Bubble Response Engine thoughts after migrating my multipage app to a new single page one
Perhaps this might be helpful to some of you. I’m no programmer but I’ve just migrated an app that we had made in Bubble in the last 12 months to the new responsive engine. Here are some of my thoughts and suggestions as a result (it may be that there are somethings I just don’t know how to do in Bubble that may have made this easier so feel free to enlighten me!)
Background
The App we had developed was 12 pages in size and had roughly 400-500 workflows (most often controlling button actions and navigation elements). It was designed to be used on web and mobile devices.
Moving to the New Responsive Engine
Whilst migrating the app I decided to turn it into a single-page app for performance, so my experience may also reflect on the process of merging 12 pages.
Initially I tried ‘upgrading’ my pages using the Bubble one-click option. This worked I suppose as the pages were still responsive, but it was almost impossible for me to follow what was going on, as Bubble seemed to add in many extra groups of Rows and Columns. I could not follow the logic when I looked in the elements tree.
So, I went back to basics, I watched a number of helpful tutorials, copied a few, and got the hang of using the new engine. I then started building my new page from scratch and copying across page elements and workflows. Naturally, quite a lot of clean up needed to be done in the process.
Procedures
I added this new page into the same Bubble instance as my original app so that I could access all the data which made testing easier.
I got the basic structure of my page working first with the header, footer and key lefthand navigation pane behaving properly. Only then did I start copying across page elements.
When I copied across elements I would copy popups first, and the main page/canvas elements second - this seemed to ensure that I had less errors to fix later.
I always copied using Copy with Workflows and Paste with Workflows. To make sure I was pasting them into the correct groups/sections I would select the element I want to paste it into in the Elements Tree and then click on the Edit menu at the top of the page to select Paste with Workflows (NOT using the right click menu as sometimes I inadvertently deselected the object I wanted to paste into).
When I copied across page elements I did sometimes attempt to clean up the page - by removing redundant groups. Having extra and unnecessary groups just meant that there was more than needed “fixing”,so deleting them makes good sense - just make sure they do not contain any logic, especially Custom States! (Note - if you have put the majority of your Custom States on the Page object your life will be tougher as this is the one object you cannot copy into another page. Not sure what to do about that other than rewire all the workflows… that’s what I had to do)
Then begins the task of changing MANY groups and elements from being Fixed elements - to either Column, Row, etc. This is painstaking and laborious! But the best way I could find to do it was to open up EVERY branch of the elements tree and click on each one in turn to check its settings. Usually every single item needed to be changed in order for the responsiveness to work (uncheck “Fixed width” and change Minimum width to 0).
Managing Workflows: as I was copying across a group/page at a time, I would move all of the associated workflows into their own Workflow folder for that “page”. This helped me to be able to work-through/revise the workflows in a more orderly manner.
Testing
Firstly I fixed errors that emerged as I copied elements across. Sometimes this was where Custom Workflows did not come across. Not a responsive task, important as I moved to a single page app.
For a first look at the responsiveness I would normally Preview the page and check it out in my browser (so I can see real data in the page). Then move the edge of the browser window or use the Developer Tools in Chrome to preview different device types.
My experience was normally that I had missed some elements and left them as FIXED by mistake, this had the effect of making the page wider than I wanted, or causing some elements not to be responsive. I would then have to try and find the rogue elements and change them - this is tricky if you have a big elements tree!
Putting the Bubble canvas in Responsive mode was quite helpful as I could show elements and click through each item in the elements tree to see what effect it had.
One tip I came up with (which sounds a bit extreme) was deleting a whole group of objects, testing to see if this fixed the responsiveness of the rest of the app, and then pressing Undo. Sounds crazy I know, but if you have 500 elements in your tree, finding the offending section can be hard. This at least narrowed it down on occasion.
Once I had it working I would normally do a final test on a mobile device (as occasionally I would find something new out).
Improvements I’d like to see Bubble Make
It would be great if I could delete a group from the elements tree without deleting its children (but rather have the children become children of the element above). This would be so helpful for getting rid of redundant page elements from the old engine!!!
It would be amazing if I could search for Fixed width elements somehow, or have Bubble highlight them in the Elements Tree. Finding these rogue elements was a pain in the butt.
It would be helpful if there was a feature in the Responsive Canvas view that said “the Page width is this size as a result of this element being fixed width” - similar to the margins message in the old engine responsive tab.
I did also find myself making the same 4 or 5 changes to many many groups (e.g. change container layout to Row, change container alignment to Space Between, change horizontal alignment to Centred, uncheck Make Element Fixed-width, set the Minimum width to zero.) I might have had to do this on 50-200 objects! Some type of Macro or copy with formatting function would have been very helpful.
Add ‘Copy with Workflows’ and ‘Paste with Workflows’ to the Right click menu when I right click on an item in the elements tree.
Not to do with the responsive engine, but I’d like to be able to select multiple Workflows and move them into a folder in one action.
Again, not to do with the responsive engine, but I’d like a visual indicator to see if an object has Workflows associated with it (perhaps as an icon at the top of the Properties box) and if it has Custom States attached to it.
Overall it was a pretty reasonable process and I’m pleased with the result. The new engine makes it easier to enforce commonality across the site, easier to get the page to perform the way I want, requires far less groups and fiddling, and it seems pretty fast. I think it is a big improvement even though it took me a while to get the hang of it - oddly I can’t really remember how I used to work in the old engine now. Hope that helps.
Not sure if this was mentioned – thread is too long to read…
Idea: When defining the layout of an element the default units are px rather than %. This seamed to make sence before, but maybe now it might be better to default to %.
My though process: All child element sizes are relative to the parent, henc px shoulld be avoided if possible. I typically define the highest order Parent as px (in most cases the page) and then use relative sizing for all child elements. The only typical exceptin was images, but ( "genius " ) the Bubble Architects have included Aspect Ratio - which negatest the need for this too.
@andrew18@nick.carroll
These are fantastic suggestions – I get particular excited about improvements to Bubble UI that can speed up my development.
I, myself, am generating a list of workflow improvements that can be discussed w/ the bubble team. Wrapping up MVP that has been fully developed in new responsive engine. Will release the list of Bubble UI recommendations then.
Overall, my impression as a 5 year Bubble veteran and power user is, yes, the new responsive engine is a step in the right direction.
Well I finally I got the time to try using this new responsive engine, even though I had no problem with the old responsive engine even with its some limitations.
Giving that I have been using and designing apps on bubble since 2016 and love how easy it is to design and build pages fast.
I have to be honest I struggled at the beginning with the new responsive engine especially losing out the capability to drag things around, but once I got the hang of it and understanding how columns, rows and alignments functionality works, I think with this new responsive engine you can create almost anything, you feel like this how it should be from the begning.
I think yes, the new responsive engine is indeed a step in the right direction.
@nick.carroll are there plans on having dynamic positioning of elements (Dynamic X and Y values in case of fixed layout and dynamic “to be placed at x% width of the container” in case of row/column)?
Are you basically talking about margins having not only pixel control but also percentage control so that you can say you want a certain element to be a certain percentage from the edge of the container it is held in?
Yes that would be good too. But I guess that is mentioned already in the thread somewhere.
What I am asking for is to be able to determine the margin run time on the basis of some conditions.
My use-case that I have mentioned in my thread is of being able to position in a task in the timeline depending on its starting time.
So, say I have a row that depicts timeline of the day. Now if a user has a task at 9 am that task block should be shown there while the one starts at 3pm should show up there. If I could dynamically calculate that 3pm task should be 48% (or 220 px) away from the left edge, I would be able to position the task correctly.
Right now I can’t. Please do reply to my thread if there is a way you think that can be done.
Yes I understand now. I do agree you can’t completely do what you want to do with the existing responsive engine right now it seems. I would say that if you limited your users to only starting tasks at the top of the hour, 9AM, 10AM, you could create duplicate groups for each time block and show and hide them based on whether there was a task at that time.
In terms of how far the task stretches based on its length of time, @nick.carroll had mentioned prior in regards to @boston85719’s post that he is going to allow the ability to conditionally define how wide or narrow things stretch based on certain conditions, that’s going to open up a huge amount of possibilities and it look it’s coming out soon. But that only solves the stretching of the block of time based on how long the task is, not how far or near the task block is positioned in the cell based on the length of time that it is.
Essentially what they will need to do eventually is they will need to expose an additional condition in the conditional tab to define a margin for a certain expression or the actual placement itself.
So what I imagine this ultimately to be is that for each block hour in your sample app you’ll have a vertical column for each hour going down vertically, and then within that column there will be a bunch of rows, that span across those hours, and then you’ll have the conditionals working whether you can move boxes left or right depending on how far along it is on the timeline.
I think ultimately what the solution would be is you would have a bunch of event boxes flush at the left of each row, let’s say a maximum of 12 so that a user can create a maximum of 12 events along the span of time, and then you’d have to program each individual box with those conditional controls one by one.
Hi @nick.carroll I’m having some issues with “fit to width of content”, and I could not find any documentation in the new responsive help guide. Maybe I don’t understand it correctly, but from what I can gather, the response I’m getting is not intended?
I have a text box that does not seem to be fitting to the content, and instead taking up a bunch of negative space in my row. I have conditionals set up to adjust font size according to page width. They’re working, but when the font size changes the text block is not shrinking to match it.
I have 2 elements in a row. My text is fit to width with a min and max, and my image is aspect-ratio-fixed with a min and max width. When I adjust the page width that row should scale both elements equally, but the text box’s width never changes.
“Fit content to width” stops responding on the text, and if I keep decreasing the page width my other element just shrinks until it hits the limits for the group, then drops to another row below.
Again, maybe I’m not understanding correctly, but this seems like the text box should not be wider than the text inside it if I have selected “fit to width”.
Text box not fitting to content, creating empty space.
I think your understanding of the feature is correct, but it does not sound like the behavior you are seeing is expected. Its hard to say if its a bug or not without looking at your editor - but might be worth filing a bug report if you can’t seem to get it to work.
Second this. 90% of the time, the first thing I do is hit the layout dropdown, then uncheck fixed width, remove the width, and set to “Fit to Content”.
