Ajax: Single-page vs. Multi-page

You've designing an Ajax web application, do you plan to have multiple pages or a single page? So far I've not seen much informed debate about how to decide, so here are the pointers that I've gathered from the several Ajax web applications that I've developed so far.

Multi-page is easier

There are 3 reasons why starting with multi-page is easier:

  • It's what you're used to
  • Bookmarking comes for free with multi-page
  • History (Back button support) also comes for free

Library Options

In the Java world there are 2 groups of Ajax libraries, I guess many languages are the same. There are RPC based Ajax libraries (DWR, JSON-RPC-Java...) which work best with a good Javascript library (Dojo, Script.aculo.us, DWRUtil...) and Tag based Ajax libraries (AjaxTags, AjaxAnywhere...). RPC based libraries can be used in either context, but tag based libraries are only of any use in the multi-page model. So if you were intent on using a tag based library, go with the multi-page option.

Is the situation in the PHP world the same? – please comment.

Multi-page can give a faster initial download

'Can' is the operative word here. Generally speaking HTML is a small part of an Ajax application, so the extra download might not be significant. If your Javascript is in separate files then you might be in for a bigger gain, however by going multi-page your total download will be bigger.

Microsoft are doing some interesting things with start.com and dynamic downloading, and componentizing the download. Advanced techniques like these can turn this on its head. Of all the advantages of the multi-page style, this is clearly the weakest.

BUT

However if you're interested in creating the best possible user experience, there are a number of advantages of a single-page design:

Advanced History

There are a number of directions to go in to get back-button support for your web-application:

If you are prepared to put in the extra effort (even with Dojo or RSH you need to do some work yourself, you can create some neat value added tools like a "Things you've looked at" section which enables the user to jump around to any point in the history with a single mouse click and too see where they are going.

Faster Rendering

One of the benefits of Ajax is faster page load times. The single page approach can get pages in front of the user faster, and it enables you to add neat effects like using Script.aculo.us effects to fade page section in and out. This kind of technique isn't just pure eye-candy, there has been a fair bit of research to demonstrate that users perceive the wait time as the time when nothing is happening on the screen, some simple animation can make the web application feel faster even when it's not.

Shared Components

In a recent web application I had a number of dialogs that where relevant in multiple sections of the site, single page design made the sharing easier, and gave the users less to download.

Recommendations

It's probably fairly obvious from this that there is no one correct answer. The best route for you will depend on what you are trying to do.

I've painted it a bit of an all or nothing so far - one page or many. In reality there is often a reduced-page option that keeps the advantages of automatic history and bookmarking, but adds some of the advantages of a single page design.

Depending on how you code, it might be possible to change make changes in direction during development, so it is a good idea to make sure your HTML ids are unique across your entire web application. I have taken to giving each section of my web apps a name to prefix HTML ids to help keeping things unique.

I've recently taken a 74 page JSP application and turned it into a single page DWR application. This has been a very interesting process. The result is surprisingly small – 450 lines of HTML and 200 of CSS – this isn't the behemoth that you might expect.

If I were to start again I'd probably create a 3 or 4 page application. This would create a simple solution to the back button and book-marking issues without needing support from RSH or Dojo.

In summary - there is no "correct" answer, but more of an it-depends.

Comments

Comments have been turned off on old posts