Hello, I've been thinking about how to develop a new web based app using AJAX, and after surfing the net looking for advice I've found information is a little sparse.

I would like to pick the communities brains, for a sophisticated web based application, is a single page, multi-page or hybrid* structure more efficient? The overall goal is maximum performance and minimum maintenance.
* Hybrid structure being a single page application which uses URL anchors as synthetic pages enabling more in build browser navigation and preference functionality.

For this particular project:
  • SEO is not important
  • Non-Visual Accessibility is not important - The app is visualisation of data
  • Browser compatibility in browsers that do not support SVG is not important.



Here are the advantages and disadvantages as I see them as of this time (I'm sure I've missed a few things!), I would love the communities input and experiences around the issue:

Application Layout Advantages Disadvantages
Single Page Layout
  • HTML can be easily left in a steady state, that is, because the page doesn't need to refresh, interactivity added to something such as a table will not be removed, and subsequently the javascript responsible for adding that interactivity does not need to be re-run to add the interactivity again.
  • Content can be displayed instantly by using simple CSS functions to hide unwanted content, and show wanted content. All content is always ready for viewing, just most of it is hidden and sometimes being processed in the background.
  • No need to use the JavaScript global.localStorage function, eliminating some scope for browser compatibility issues.
  • Could grow to be a page of inpractical size, but with higher bandwidths the norm, this seems to be becoming less relevant.
  • Could grow a large number of event listeners
  • Need to write functions to enable browsers to use forward-back button - more work plus bigger scope for bugs and browser compatability issues.
  • Can't save particular page/view in browser favourites (As a bookmark)
  • Not sure about the Big-O of browser and JavaScript internals, a double in stuff to process might mean more than double the time to process it. I expect it varies drastically between browsers.
Multi Page Layout
  • Can use in-built browser features for navigation (forwards, backwards, bookmark page etc)
  • Only need to load HTML for the page if the user clicks on it to view it
  • Fewer javascript event listeners

  • Relies on the global.localStorage function in JavaScript to avoid re-loading and running all the javascript every page, which leaves scope for browser compatability problems.
  • Need to load common html for every page request instead of just once
  • HTML can't be left in a steady state, that is if javascript enriches a table with interactive features for example, if the page is reloaded, the interactivity is gone and the javascript function has to run again to restore the same interactivity as before.
Hybrid Page Layout Same as Single Page Layout - Plus "can use in-built browser features for navigation (forwards, backwards, bookmark page etc)" Same as Single Page Layout - Minus "Can't save particular page/view in browser favourites (As a bookmark)"

Thank you very much in advance for opinions and experiences.

Best Regards,
EAguy :-)