While it is recommended to selectively show/hide groups for mobile applications developed in Bubble, would this approach not also be of benefit in regular development for the desktop browser?
I can imagine an increase in interaction speed and a more app like user experience. I am not sure how loading times will be affected though. They could be faster still as the same data is accessed through different layouts.
Development times could be reduced too as only one responsive design is needed across all devices. I also could imagine this to be converted into a progressive web app faster and easier in the future.
So is designing in groups (you could also call them layers) the better option throughout or are there drawbacks I overlook?
One not-insignificant drawback will be the development headache if your app is complex. Constantly showing/hiding groups while developing will get tiresome, and it can be hard to keep track of where you’re working.
I agree with @andrewgassen about the issues with showing/hiding groups.
As a typical example take a look at the default Tab resusable group in the bubble editor. I personally find it very cumbursome (unwieldy) to work with. So for complex applications in terms of the user flows it definetely adds a level of complexity to the development.
Having said that, i still use it here and there (especially for very simple applications) but i use a vertical stacking/layering instead of a horizontal one.
Meaning instead of layering groups on top of each other and showing/hiding them when developing, i stack them from top to bottom.
Then on each group i check the option Collapse this element's height when hidden
The nice thing about this architecture is that when developing all my pages (aka groups) are visible making it very easy to switch between pages.
Take a look at this simple page to see exactly what i mean:
Here i was using them as tabs instead of pages but could easily be made to look like pages with a menu instead of the tabs.
As you can see, all pages show in the editor all the time. Compare this design with the Tab reusable element in the editor and you can see how it is very easy to develop with this vertical layering than the horizontal layering.
I’m not sure of the implication of showing elements vs hiding them in the editor in terms of performance and memory consumption of the editor though.
This architecture doesn’t address issues with SEO though as @sridharan.s pointed out but at least it helps reduce the complexity with the development.
What strategy do you guys use to persist the current page on refresh?
I normally store the current page state variable in local browser storage. So that on page load i check if the variable is set and use that to determine which page to show.
I also stack groups vertically above and below each other then show and hide with the collapse action. I love it.
I also occasionally use pages as well for desktop eg. 1 page has most groups on it then I have an Admin page and Payment pages separated out.
At the moment I haven’t noticed any significant loading issues.
I like to add URL parameters for the major changes so that if a user were to refresh their browser, they’d go back to that same “state” and I can do this because the URL parameter tells the app which state.
Note, when navigating to the same page but with a new URL parameter, the page doesn’t reload. So, you can use a 1-page app concept while also adding URL parameters for the different views.
As a groups hide/show afficionado, I’m super interested by your method!
One question though : How do you do so the page height adapt to match more or less the visible group height?
@jordan.shotwell@mattmazzega, I do not know if it is applicable in this scenario but what helped me when publishing my app to mobile was that I made all groups the length to the end of the page and then placed an empty group filling the empty space within the main group, set this group to collapse when hidden and set the group as hidden.
@rico Thanks for your help. I’m nut sure to understand well, in this scenario, the point is that the page lenght will remain the addition of the different groups (hidden or not). So when one group is visible, we will have a big blank space at the bottom…
@mattmazzega, yes this is the point. I had those big blank spaces as well and I removed them with the method described. The page length adjusts to the size of the groups. There is a tread about this in the forums but I cant look for the link right now.
Hi @mattmazzega and @jordan.shotwell, when you use the vertical stacking and check the option Collapse this element’s height when hidden, the page will automatically adjust to the height of the content.
See the following demo. The tournament tab (or page) has a shorter content than the Games tab (or page). But when you switch from the Game tab to the tournament tab the height of the page auto adjust.
thanks @rico and @seanhoots. That’s nice. I’m still not understand why it works with vertical stacking and not with overlapping mode…That would help me refine my existing groups…
. Speeds things up a bit.