Hi all, i am wanting to know what is the best way to build a one page app in terms of performance. Currently, i’ve been using set states to dynamically display/hide certain groups when to simulate the user going to a different page but I am wondering if there is a better way to do it. Would it be better have each “page” as a reusable element group? or something else? What is the smartest way?
I don’t believe that a reusable impacts performance in any way. If you inspect your running app, it’s just divs upon divs. I wonder if there’s some backend processing that impacts it, but I’ve never felt it.
The best part about using reusables is that it makes it so easy to change and adjust a reusable element without fear of breaking the main app.
In terms of performance: if a reusable has a workflow that runs on page load, it will load on each page load – not only when that reusable is visible. Over the coming days, I’ll dive into a customer’s app and try to minimize every RepeatingGroup load based on if the reusable element is visible or not. I’ll report back any findings.
Some reading / watching material for single-page apps:
- Single-page app tutorial
- Object-oriented programming in Bubble
- A tweet from Mr. Reusable’s himself
2 Likes
Hey @jessefarquhar48 
After years of using Bubble, this is how I set it up.
-
Option sets for the menu items.
-
URL parameters to change pages and tabs.
-
Reusable elements for each ‘page’ of my one page app.
Does that make sense?
I’m sure other people have other ways too.
4 Likes
Thank you very much
Yes that makes sense. I currently have a navigation bar with the menu icons that, when pressed, set the state of the navigation group and then elements on the page have conditionals to make themselves visible / invisible based on this. But i wonder if reusable elments would be better for performance.
As for the URL, i’m a bit worried about doing this because of other APIs i maybe setup earlier might be looking for a particular URL so i’m scared to change the URL and break something.
Using reusable elements at least helps with editor performance with very large apps. 
What about user-side performance?
Will it be better performance from the user’s experience side (not just the editor) to use reusable element groups instead of normal groups?
I haven’t done any sort of testing on the user side. Not sure.
Ok, thanks. What about the performance difference between using set states and URL parameters?
On the user side of things, if the user has to refresh the page, they won’t lose their spot. That’s the main benefit for the user. Especially when Bubble forces the user to refresh the page with the black banner at the top. This is a better experience for them when that happens. Does that make sense?
Yes that does make sense, i will consider doing that, so i’ll just be still just be putting conditions on the groups to dynamically change visibility based on the URL parameter?
And this is faster/ better than have set states do it?
Well, It’s not necessarily faster but just a better user experience.
Hey man, have you had a chance to test the performance of this?
1 Like
This topic was automatically closed after 70 days. New replies are no longer allowed.