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

Is there a way to not use URL parameters and still preserve the page state in the Single Page Application?

For instance, instead of:
/single-page?tab=1

Something like:
/root-page/page/page

I initially thought I could make it work in SPA … but I realized using External Links to generate these nested URL structure always refresh the page and thus defeat the whole purpose of SPA (instantaneous response upon page load)

Hope anyone has gone through and found some clever solutions?
I never expected making nested URL to be difficult in Bubble.

This is great!
Just restructured my whole app into one single page! :slight_smile:
Question though: How about popups?

Test users have told me, that it’s annoying to go back a whole page, when all they were doing was trying to vlose the popup by the “system back button”. I can’t seem to find a solution for that.

Any ideas?
Cheers,
Alex

Best practices are to have some sort of back button top left corner of the popup, since users tend to move that way when attempting to close. I also usually include a material icon ‘x’ top right to close, especially if I’m not allowing the popup to be closed with the ‘esc’ key.

In my single page app new users typically run into this, especially when they’re unused to SPAs, but over time they break this habit themselves.

Nothing we can do to prevent them from hitting the back button other than trying to intercept their behavior before this happens by understanding what they’re trying to do and giving them an easier option.

2 Likes

Thank you, will do that!

Another way to do this is to have a URL parameter for popups so users click backing removes that URL parameter, which then closes the popup. For example, when a user does that action that triggers a popup, instead of triggering the popup directly have that action add a URL parameter (e.g., popup=popup-title) to the page. Then, have conditional logic that when popup=popup-title, have it open the popup. And, have a condition that when that URL parameter isn’t there, to hide the popup.

8 Likes

(I realize this thread’s a bit dated, but for the sake of those who might stumble upon it…) This should be possible with no page refresh using Sudsy Page. Plus, one of my requirements when developing the plugin was for browser forward/back buttons behave as one would expect.

3 Likes

And how do you do that?

1 Like

I’m building a SPA which I am using with BDK Native and I started implementing this idea to enable to back button. I added the Go To Page step and now I’m getting a Bubble error. Should I ignore this error?

Screen Shot 2020-09-16 at 8.15.13 PM

I haven’t seen that error before so I’d only be guessing.

1 Like

This is not really an error, it’s more of a warning/suggestion. It only pops up when you hit the mobile check box. It can be ignored with no consequences.

1 Like

Yeah if your running a native app you shouldn’t need navigation.