How to better organize multi-views in a web single page app?

Question

Assume I have a lot of views in my single page app. It means, I put some view inside a div and show this or that view depending on user's actions. So, I usually show on view at a time. For example, I have these views - dashboard , settings , entries , entry details .

Depending on current state of the app one of these views is visible and others aren't. When I go this way dashboard > entries > entry details , then edit some entry details and click save or back button, I want the app to go back to entries . But if I have a link on dashboard that, for example goes to the latest edited entry, I can go this way dashboard > entry details , and in this case I want to get back to the dashboard by clicking save or back button.

This case can become even more complex with deeper views paths. Right now I manage it like this - When a button responsible for views switching is clicked, the variable state is being changed to something like from_dashboard_to_entries . I listen for that variable to change, then do all the view switching from another function depending on the state variable value. This way I have to manually define all possible scenarios and test all the possible combinations of cases. Right now this approach works quite well, but I am worried about deeper, or longer views sequences.

My idea is to somehow create a history of views in an array or something but I am not clearly understand how to do it better. Please share your thoughts how you would organize this.

Answer 1

Simply don't worry about the source view - you don't have to know it to change to the destination view. If you want a history, instead of manually storing it, consider using the HTML5 History API , preferably with a wrapper library (eg History.js ).

Answer 2

Rather, We should be setting the view while changing the state of application. This may optimize the initial app launch time by not loading all the views at launch and will give a way for on-demand loading.