JavaScript Best Practices: How to implement long-lived apps (one-page web apps)?

Question

Are there any best practices for implementing a long-lived JavaScript app, ie a web app that consists of a single page and loads other pages into the content area via AJAX? (Gmail is a good example of this.)

I already read about pro and cons, SEO, performance, etc. (http://stackoverflow.com/questions/1499129/one-page-only-javascript-applications), I'm interested in patterns how to implement this.

I'd like to avoid large frameworks (eg Cappuccino, Echo2, SproutCore, Claypool).

How would I manage dynamically loading content while maintaining the #link portion of the URL (for bookmarking)?

Don't get me wrong, I have an idea how to implement this myself, but this problem must have been solved before.

Are there articles on this? Maybe a tiny JavaScript library?

Thanks! Mark

Answer 1

Here is an article to help you with the History bookmarks problem: http://codinginparadise.org/weblog/2005/09/ajax-dhtmlhistory-and-historystorage.html . It's quite old, but the solution still works.

I made several apps using this "long lived" apps, and one thing you should take into account is IE's tendency to leak memory.

I would also recommend you to use a JS library, like JQuery to help you with the AJAX and DHTML.

Answer 2

Heard about javascript pushstate?

http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate

It's meant to replace location.hash

Answer 3

I found JQuery Address http://www.asual.com/jquery/address/ extremely easy to set up. $.address.change() let's you know whenever something was clicked (works with back and forth as well) and you just parse self.location.hash and build your app from there. It seems lighweight enough as well, if you can handle using JQuery.