One of the good things about single-page apps is that it's possible for them to remember UI state within a page. If an area of the page is hidden from the user, and then redisplayed later, you're able to display that area in the same state that it was left.
This is in contrast to traditional request/response apps, which are mostly stateless, and where maintaining the state of finely-detailed UIs across requests quickly becomes impractical.
However, done carelessly, retaining view state in a single-page app can result in drastic memory leaks over time as the user navigates through the UI.
I'm going to describe a strategy that we've used to efficiently maintain stateful Backbone.js views in a large-scale app. In this post - the first of two parts - I'm going to give an overview of the problem, introduce some memory-management infrastructure, and then propose a solution for simple views. In Part 2
, I discuss how to handle collections and animated elements. Note that these posts assume experience with Backbone.
10 October, 2012