Hey everyone,
Last night I recorded a video of myself trying to build out a messaging interface from scratch using the new responsive engine. I just uploaded it to YouTube here: https://youtu.be/Z-1QxxBPLBg
This was an attempt to both teach what I’ve learned about the new system so far, and also to learn more about it in the process of trying to explain it.
A few general thoughts:
-
I love the new responsive engine. While it’s quite different from what we’ve been used to and will take a while to get the hang of, I think it’s a massive step forward in terms of the types of interface designs we’ll be able to build out of the box with Bubble.
-
I also think this will fundamentally change the way we approach building apps in Bubble. In the old system, worrying about responsive design was something we could generally push off to a time much further down the road. With the new system, I think one is forced to consider page/element layouts much earlier in the development lifecycle; having a better understanding of how you want your interface to look and feel before you start throwing things onto the canvas becomes much more important.
-
There is a lot more flexibility with this system. It feels like one could approach building any type of interface in a number of different ways, which I think is much closer to the experience of building out interfaces with code. With the old system, generally speaking, making pages responsive seemed to follow a regular path forward. I think there will be a lot more room for developers to find their own way of doing things with the new responsive engine.
Anyways, I’m super stoked.
I recorded the video late last night when I was exhausted, and when I watched it back this morning I realized that I misspoke a few times when referencing “rows” vs. “columns”. My apologies for any confusion. I hope you still find it helpful nevertheless 
9 Likes
What a video! Gives a nice view into how the engine works. Really taught me a lot.
Maybe a small add-on for your video to solve the alignment issue you had at the end of the video. You could create the conversation container twice, one right aligned - one left aligned and show and collaps conditionally (if that is still a thing in this new responsive engine). Let me know if that worked!
Again thanks for the insights into the new responsive engine.
3 Likes
@klaas.vanhoeck1 Glad you found it useful 
And you know what, I think your solution is simple and works perfectly fine – add another group inside the message cell for a message that is from the current user. Only one of those groups would be visible depending on who the creator is. Regarding the alignment, I imagine you could do it by changing the container layout for the parent group for both of the messages to be “align to parent” and then align each group to either the left or right. I also imagine you could find a way to do it while keeping the container layout as a row.
2 Likes
@jacobgershkovich… bravo, my friend. This walkthrough (a resource to which I am sure I will refer often in the coming days/weeks) was a fantastic way to get a good feel for the basics (and not-so-basics) of the new responsive engine. Thanks so much for taking the time to put it together… really great work, man.
Best…
Mike
2 Likes
@mikeloc Thanks Mike! I appreciate the kind words. Glad you found it useful.
2 Likes
Extremely nice video - this one hour got me up and running!
Having just implemented a similar chat like you show here, but on the old engine, the difference was just extreme. The old engine feels like 1990:ies web design with 1-pixel spacer GIFs (quite literally - what else to call spacer groups?). I can never go back. Big thanks!
3 Likes
Glad you found it helpful. And I had the exact same feeling trying to build out a chat interface using the old system haha.
2 Likes
Hello again everyone. I released another video just now in which I build an entire signup page from scratch using the new responsive engine. You can watch it on YouTube here: https://youtu.be/Okobpne9v-E
The page that I build in the video was modelled after this image that I found on Dribble
Hope you find the video helpful! Have a good weekend. Happy Bubbling to you all.
5 Likes
Thank you so much. It’s really great. 
