52

I'm nearing the end of a prototyping/proof of concept phase for a side project I'm working on, and trying to decide on some larger scale application design decisions. The app is a project management system tailored more towards the agile development process. One of the decisions I need to make is whether or not to go with a traditional multi-page application or a single page application.

Currently my prototype is a traditional multi-page setup, however I have been looking at backbone.js to clean up and apply some structure to my Javascript (jQuery) code. It seems like while backbone.js can be used in multi-page applications, it shines more with single page applications. I am trying to come up with a list of advantages and disadvantages of using a single page application design approach. So far I have:

Advantages

  • All data has to be available via some sort of API - this is a big advantage for my use case as I want to have an API to my application anyway. Right now about 60-70% of my calls to get/update data are done through a REST API. Doing a single page application will allow me to better test my REST API since the application itself will use it. It also means that as the application grows, the API itself will grow since that is what the application uses; no need to maintain the API as an add-on to the application.

  • More responsive application - since all data loaded after the initial page is kept to a minimum and transmitted in a compact format (like JSON), data requests should generally be faster, and the server will do slightly less processing.

Disadvantages

  • Duplication of code - for example, model code. I am going to have to create models both on the server side (PHP in this case) and the client side in Javascript.
  • Business logic in Javascript - I can't give any concrete examples on why this would be bad but it just doesn't feel right to me having business logic in Javascript that anyone can read.
  • Javascript memory leaks - since the page never reloads, Javascript memory leaks can happen, and I would not even know where to begin to debug them.

There are also other things that are kind of double edged swords. For example, with single page applications, the data processed for each request can be a lot less since the application will be asking for the minimum data it needs for the particular request, however it also means that there could be a lot more small request to the server. I'm not sure if that is a good or bad thing.

What are some of the advantages and disadvantages of single page web applications that I should keep in mind when deciding which way I should go for my project?

Improve this question
3

5 Answers 5

Reset to default
17

The biggest disadvantage is that the client must have JavaScript enabled and be powerful enough to run a fair amount of it. It's also harder to satisfy accessibility concerns or anything else that relies on parsing static HTML (though something knowing your specific API can probably do better than HTML scraping). Finally, it's easier to have significant memory leaks.

As far as duplicating code or putting business logic on the client - I'm not sure how much of that you have to do. If the model on the client is a View-Model (a model that matches up with the world as the UI sees it, not a business model) then the logic that matches the ViewModel up to the business model can reside on the client, the server, or a bit of both. It depends on how you feel about having your API contain a client-specific facade vs. having the client translate UI inputs into API calls.

You might also want to look at knockout.js. I can't say if it's better than backbone but it may fit your project better.

Improve this answer
1
  • Yea I guess that most of the code duplication there will be is data validation which is fine. I am fine with having the requirement of javascript being enable as I am not concerned accessibility for this project (like screen reader and what not). As for the javascript memory leaks issue which was a concern of mine, with the link provided in the comments of my question, that really negates that (chrome is my primary development browser anyways).
    – ryanzec
    Apr 24, 2012 at 12:50
7

Disadvantages I often see with Single Page Web Applications:

  • Inability to link to a specific part of the site, there's often only 1 entry point.
  • Disfunctional back and forward buttons.
  • The use of tabs is limited or non-existant.

(especially mobile:)

  • Take very long to load.
  • Don't function at all.
  • Can't reload a page, a sudden loss of network takes you back to the start of the site.

All of these can be worked around, but from what I've seen, most of the sitebuilders don't.

Improve this answer
3
  • 9
    1,2 and 6 are basically just symphoms of the same problem. That the creator does not use the history API/hash linking.
    – Martin Hansen
    Feb 10, 2014 at 13:27
  • 11
    This answer is outdated, Most single page application frameworks have a way to deal with the issues above
    – Luis
    May 27, 2014 at 1:41
  • @Luis while the technology is there, too often it isn't used.
    – Pieter B
    Jun 12, 2014 at 6:53
5

There's one all-important client that never runs Javascript: Google crawler (as of 2012). (Bing's doesn't run JS either, I suppose.)

You will need to provide a reasonable non-AJAX version of every page that needs to be indexed, or links to a page that needs to be indexed.

If your site is small, you can provide very basic versions of the few pages just for indexing bots.

If most of the site's content is only for registered users, or need not be indexed for some other reasons, you can create the entire non-indexed space as a one-page app, with your own search, blackjack, etc.

If neither of these, you're probably better off developing a multi-page site from the start, and only providing AJAX updates where it does not change the 'general purpose' of the page.

Improve this answer
4
  • 4
    Googlebot does read and even execute some Javascript now. See googlewebmastercentral.blogspot.com/2011/11/…
    – jfrankcarr
    Apr 16, 2012 at 20:42
  • 2
    For this particular question, it's a project management app. Probably not an SEO-worthy site.
    – Jordan
    Apr 16, 2012 at 21:05
  • SEO is not a huge concern for most page though it would be nice to be able to SEO individual issues since it will be configurable to allow anonymous access to it (so that if a user googles an issue they are having with the product, they can find the issue related to it in the tracker).
    – ryanzec
    Apr 16, 2012 at 21:17
  • 1
    2015 update: Google does execute JS
    – rinogo
    Oct 22, 2015 at 17:35
3

-Duplication of code - For example, model code. I am going to have to create models both on the server side (PHP in the case) and the server side in javascript.

You're in the PHP world but there are code-generation strategies in the .NET world for automatically creating JavaScript WCF proxies. See here

I don't know what options might be available to not have to create your remote objects yourself in JavaScript in a PHP application, but this is an option for those writing single page applications in .NET.

Improve this answer
0

The choice doesn't have to be the one or the other. JWt is for example a web toolkit that implements the perfect illusion of a multi-page web-page, yet it is a single page. Additionally, it will recognise google bots and browsers that don't have javascript (try it), and switch to the traditional multi-page model when it detects them.

In short:

  • no need to write an API (but you still can, if you want to)
  • responsive application: every user click needs at most one server round-trip (plus fetching images)
  • no duplication of code
  • no business logic client-side
  • minimal complexity client-side
  • search bots can index it
Improve this answer
1
  • 1
    JWt is a java toolkit. The question is about PHP.
    – Joeri Sebrechts
    Apr 24, 2012 at 10:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.