Rigidly defined areas of doubt and uncertainty.

Tuesday, August 01, 2006

Fixing the back button in ajax

I didn't think this was possible, but thanks to Mike Stenhouse's article in the Content With Style blog and the accompanying demo I can now see how to overcome my biggest objection to ajax. The problem, as I mentioned in my last post, is that most ajax sites break the normal user interface conventions of the web by effectively disabling the back button. If you press it on an ajax page such as Google maps you don't undo the last step you made, you exit the application entirely and lose the history of all the clicks since you entered it. I thought this was impossible to fix because to make a new entry in the browser history you need to change the URL of the page, which loads a whole new page for the new URL.

The key insight of Mike's article is that it's possible to change the URL without reloading the page. How? With a page anchor: a link to a particular point in the same page. Changing the URL to point to a different part of the same page doesn't force a page reload, but it does add an entry to the history buffer. By adding '#1', '#2', '#3' etc to the end of the URL you can track every click in an ajax application.

Now, I'm very interested in continuation based web frameworks. The idea was pioneered by Paul Graham, and more recently implemented in Avi Bryant's Seaside framework. Continuation frameworks allow the creation of stateful web applications without using ajax. A continuation is a representation of the state of the whole application at a point in time. When you call a continuation it's like returning to that state. By encoding a reference to a continuation in a URL you can return your application to the state it was in at the time the page was generated. Pressing the back button becomes the equivalent of an undo operation.

My visualisation of a continuation based framework is one where a second dimension of time is added to the URL's first dimension of space. eg http://www.alexfarran.com/#2006-08-01-16:41:53. With ajax now able to track each click I could couple each ajax state to a continuation, and recreate it at any time on any machine. I think that would be cool.

1 comment:

cathski said...

Hi Alex

Great article. I been aware for a while that this can be done, but not being a coder, haven't fully understood how. I am now able to design AJAX interfaces with more confidence, knowing I can point a developer to this article in support of my ideas!

Cheers

Cath