Managing state in SPAs


Why is nobody talking about state management in Single page applications?
There are endless posts, tutorials and resources (such as pluralsight) on building a SPA using frameworks such as AngularJs or EmberJs. I have yet to find one of them address or even mention state management.

The web world has never had to worry about state before. A lot of web developers don't consider the implications of holding state within an application for long periods of time. More and more businesses are adopting the SPA instead of building their applications using Windows Forms, WPF etc...

Why is managing state important?

You have to predict that the application is going to be running constantly throughout the day without a page refresh. If you don't remember to clean up after yourself (in code that is) its very easy to leak memory.

Previously, memory leaks haven't really been an issue. Most of the time the user isn't on the page long enough for it to become a real problem. This changes when you expect state to be around for a long time.

Problems encountered from leaking memory need no explaining.


I'm sure many of the MV* frameworks can suffer the same, but I’ll use Angular here.

Take an Angular service, which listens for an event thrown from a controller.
This is all well and good except in Angular, services are singletons, controllers are not. So if we don't remember to unbind the event listener from the service when the controller is no longer needed, the garbage collector won't clean up the controller, because there is still a reference to it. That service is going to be around for the entire lifetime of the process, and now so is the controller, and all the objects the controller has references to etc etc...

It's easily solved, essentially we need to create a controller dispose operation, so we guarantee clean up, informing the service to unbind any events that maybe attached.

I'm not sure what Angular does to prevent this, or even if it does; it's just something as developers we need to keep on top of now we have state on the web.


You might not see this as a big issue - that the odd object is lying around, but these things can get out of hand really quickly, especially if the app is being used all day. Plus, do you really want to make a sub-optimal app?

The fact is, SPA's aren't just websites, web applications with state are a different beast and learning material should be covering it, even if it's only at a basic level.