One page only javascript applications

Question

Have you experimented with single page web application, i.e. where the browser only 'GETs' one page form the server, the rest being handled by client side javascript code (one good example of such an 'application page' is Gmail)?

What are some pro's and con's of going with this approach for simpler applications (such as blogs and CMSs)?

How do you go about designing such an application?

---

Edit: As mentioned in the response a difficuly is to handle the back button, the refresh button, bookmarking/copying url. The latter can be solved using location.hash, any clue about the remaining two issues?

Answer 1

I call these single page apps "long lived" apps.

For "simpler applications" as you put it it's terrible. Things that work OOTB for browsers all of a sudden need special care and attention:

• the back button
• the refresh button
• bookmarking/copying url

Note I'm not saying you can't do these things with single-page apps, I'm saying you need to make the effort to build them into the app code. If you simply had different resources at different urls, these work with no additional developer effort.

Now, for complex apps like gmail, google maps, the benefits there are:

• user-perceived responsiveness of the application can increase
• the usability of the application may go up (eg scrollbars don't jump to the top on the new page when clicking on what the user thought was a small action)
• no white screen flicker during the HTTP request->response

One concern with long-lived apps is memory leaks. Traditional sites that requests a new page for each user action have the added benefit that the browser discards the DOM and any unused objects to the degree that memory can be reclaimed. Newer browsers have different mechanisms for this, but lets take IE as an example. IE will require special care to clean up memory periodically during the lifetime of the long-lived app. This is made somewhat easier by libraries these days, but by no means is a triviality.

As with a lot of things, a hybrid approach is great. It allows you to leverage JavaScript for lazy-loading specific content while separating parts of the app by page/url.

Answer 2

One pro is that you get the full presentation power of JavaScript as opposed to non-JavaScript web sites where the browser may flicker between pages and similar minor nuisances. You may notice lower bandwidth use as well as a result of only handling with the immediately important parts that need to be refreshed instead of getting a full web page back from the server.

The major con behind this is the accessibility concern. Users without JavaScript (or those who choose to disable it) can't use your web site unless you do some serious server-side coding to determine what to respond with depending on whether the request was made using AJAX or not. Depending on what (server-side) web framework you use, this can be either easy or extremely tedious.

It is not considered a good idea in general to have a web site which relies completely on the user having JavaScript.