Designing for the future (PWA) - pages or groups?

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?

1 Like

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.

Yes, I can see that but on the other hand, hiding and showing a group is faster than switching a page. It can get messy though.

There’s a trade-off to pages vs. groups.

  • 1 page with many groups takes longer to load, but then moves between groups much quicker.
  • Pages have unique URLs and content that’s unique to that page, so this works much better for SEO.
  • I find it quicker to develop with multiple pages. Other opinions may vary.

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 a great idea to stack the groups vertically. Thank you :slight_smile:

I’ve started doing this vertical stacking as well :+1:. Speeds things up a bit.


I use vertical stacking as well. Learned it from @romanmg if I recall correctly! :slight_smile:

1 Like

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.

1 Like

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.

1 Like

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.

1 Like

How do you set the variable in the browser storage? I don’t know this one yet but it sounds flexible.

1 Like

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?


@mattmazzega that’s my question as well!


@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.

Let me know if that works for you.

1 Like

@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…

@romanmg @seanhoots Any tips on that point? thanks!

@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…

It woks with overlapping for me when I put a hidden group into the main groups empty space.

1 Like