[melbourne-pug] Web App Architecture

[Ben Dyer]

Javier,

On 18/03/2012, at 22:01 , Javier Candeira wrote:

> I was surprised when Ben said his apps were more bookmarkable, not
> less, after going to a js framework. Ben: could you explain how that
> worked?

We started off using jquery.address.js [1], which provides cross-browser support for page state management using the document fragment identifier (#!/whatever). Right now we're using the much simpler and nicer jquery.pathchange.js [2], which uses HTML5 history where possible, only falling back to the fragment identifier method on IE 6 and 7.

In any case, the idea is that you register a callback which is run whenever the page URL changes, like on page load, when the user clicks forward/back, or when an "internal" link is clicked. This callback function renders whatever section of the app corresponds to that URL, so you can tie whatever view state information you like into page navigation. For us, this meant that in-app search/filtering, which we had always done purely client-side, was able to have unique URLs attached so that history navigation made sense in terms of being able to "cancel" or modify your filter settings by going back to a previous page, as well as being able to bookmark a particular combination of searches/filters for easy access.

Cheers,
Ben


[1]: http://www.asual.com/jquery/address/docs/
[2]: http://www.bcherry.net/playground/sanerhtml5history