Hacker News new | ask | show | jobs
by keyist 5835 days ago
Imo, the most important technique (besides standard ajax with js lib of choice) is making use of hashchange and organizing your behavior into 'routes' based on the hash. You'll notice that Gmail does this -- it has URIs ending with #inbox, #label/action, etc.

Using hash routes allows you to keep track of state and decouple event handlers that set state from code that updates the page. Plus you get back button functionality and bookmark support.

Some background info on hashchange: http://blog.whatwg.org/this-week-in-html-5-episode-3

jquery library for dealing directly with hashchange: http://benalman.com/projects/jquery-bbq-plugin/

Higher-level jquery library for handling hashchange: http://code.quirkey.com/sammy/ . It has more assumptions and imposes more constraints on the structure of your code. But in return you get route parsing and a DSL.

If you go through the examples/tutorials in those two libraries you should gain enough knowledge to get started.

2 comments

if you can map these hashes to actual URLs, you can get rid of hashes entirely by using HTML5's history methods. see: https://developer.mozilla.org/en/DOM/Manipulating_the_browse... you can fall back on hashes for browsers without support.

the first implementation i've seen of this is in Flickr. i was amazed when i ran into it yesterday. you have to be signed in to preview the new photo pages, but the zoomed/lightboxed photo pages use HTML5 history in compatible browsers and fall back when they can't. their JS is viewable at: http://l.yimg.com/g/combo.gne?j/history-manager.js.v90829.14

Plus one for Sammy, it's wonderfully easy to use. It even has templates built-in.