I’ve been working on a multiple page web app where each page has a distinct function (client management, scheduling, etc). And am at the point of tieing them together with a side menu. As I struggle with spacing and formatting issues the thought occurred to me that I could create one page with the …

It’ll take longer to load the page initially, but the show/hide of individual groups will be really speedy. I’ve done both approaches and tend to use whichever fits the context.

I’ve seen the same. Initial page load is a bit slower, but navigating between pages is almost instantaneous. Also, from a architecture standpoint, if you go with a single page app, best to set it up so that the different views show up based on a url parameter so that you can link to different view…

Good point about the URL parameters. Also want to be able to use the back button on the browser!

Yeah, the catch to using a one-page app is that the browser controls don’t perform intuitively. Like if someone clicks next in your UI and then wants to go back they might hit the browser’s back button, which will either reload the app or take them out of the app entirely.

[image] sridharan.s: best to set it up so that the different views show up based on a url parameter so that you can link to different views of the 1-page app. Great suggestion, this would solve a major frustration point in my app’s UI/UX.

´Hi Sridharan, I have been struggling with this problem for a while now: I designed a 3-step form, all on the same page, with every step (1,2,3) in a different group which is shown/hidden based on the step the user is at. I would like to be able to design the page in a way in which the next page o…

Yep. If you change the URL parameter whenever users go to a different step, then when they click “back” it’ll take them to the prior step (since it had a different URL) instead of going all the back to the page before the 3 steps. Here’s how to do that. When users click, say, the “next button” …

@Tivano , Scott answered the question here! Thanks a lot Scott, I´ll try to implement it today still but I feel like it´s going to work out just fine now. Great!

Why doesn’t this trigger a page refresh? Is it hardcoded in Bubble’s backend not to reload after navigating to the same page unless we specifically execute “refresh the page”?

I’ve wondered this too actually… why navigating to the same page doesn’t fully refresh the page.

Architecture layout best practice: one page with multiple functions/groups vs multiple pages

Questions

supernaturally April 18, 2017, 6:33am 6

Great suggestion, this would solve a major frustration point in my app’s UI/UX.

Creating Things spread over different pages

Topic		Replies	Views
Single page + states = back button in browser? App Organization	15	4519	October 1, 2022
Navigation for Single Page Application App Organization	4	1939	December 9, 2022
Anybody experience wtih one page apps Need help	35	1802	November 28, 2020
Is this layout awesome, or not a good idea? App Organization	3	1000	November 27, 2017
What do you think...single page vs multi page? Tips	45	18740	March 9, 2023

Architecture layout best practice: one page with multiple functions/groups vs multiple pages

Related topics