Strategy for restoring state via URL in web apps
- by JW01
This is a question about modern web apps, where a single page is loaded, and all subsequent navigation is done by XHR calls and modifying the DOM.
We can use libraries that manipulate the hash string, which let us navigate by URL and support the back/forward buttons.
But to use those libraries, we need to be able to move the UI from any one state to any other. Is there a good strategy for moving between UI states, that also allows them to be restored from scratch when you load a new URL?
In a complex app, you might have a lot of different states. You don't want to reload the entire UI each time you change states. But you also don't want to require separate methods for moving from every state to each every state.
Typically we need to:
Restore a state from scratch, when you enter a new URL or hit Reload.
Move from one state to another, when you use the Back/Forward buttons.
Move from one state to another, when you perform an action within your app (like clicking a link).
Move to certain states that shouldn't be added to the history, like ones that appear after form submissions.
Move to some states that are built on the previous state, like a drill-down list.
When you perform actions within your app, there's the additional question of which comes first:
Do you change the URL, listen for the URL change, and change your state in response to it?
Or do you change your state, then change the URL, but don't do anything in response?
Does anyone have some experience to share on this topic?
