“Single Page App” Website Style Sucks!

There’s a disturbing trend in website development, the “Single Page App”. It’s trendy, popular, and awful.

In a “single page app”, instead of a separate url for each screen, it’s one big page and Javascript is used to mutilate the html document object model (DOM) as the user navigates.

I’ve seen two styles of Single Page Apps. In “type 1″, it’s one giant document and Javascript shows/hides page elements as the user navigates. In “type 2″, AJAX calls fetch Javascript from the server, which is then jammed into or deleted from the HTML DOM. For my current project, I’m maintaining a “type 2 single page app” that someone else wrote.

Gmail is an example of single page app style done correctly. Your stupid website isn’t gmail. If your website has 10 or more screens, make each of them a separate URL.

My criticism is not directed at projects with a high degree of complexity, where a single page app style might be appropriate. Even for those, code should be carefully organized for easier debugging. If your website is a bunch of static screens or forms, then each screen should be its own url. The single page app style adds unnecessary complexity and difficulty debugging.

For a “traditional” or “multi-page” website, the user can link to any specific page. For the single page app, it’s the same URL for everything, so you can’t link to a specific screen. The single page app breaks the way normal websites work, preventing users from linking to specific page elements.

A fool says “With a single page app, you can preload images on optimize the experiece for the user!” For the “type 1″ single page apps I’ve seen, you couldn’t navigate at all until all the images finished loading, probably because it was written incorrectly. For a “type 2″ single page app, you’re still making an AJAX call for each request.

For my current project, it’s a single page app that makes AJAX calls to mutilate the html DOM. There was no handover from the previous programmer, just “Here’s the code, it’s your problem now.” It’s a standard “CRUD” app, a bunch of forms that move data in and out of the database. The single page app style is totally inappropriate. Each form really should be a separate page.

If each screen were a separate page, troubleshooting problems would be easy. I would look at the url, look at the short bit of code for that page, and fix it quickly. Instead, I’m wading through a huge mess of Javascript. To troubleshoot a problem, I have to use Firebug to identify the page element, figure out what AJAX call on the server generated that Javascript fragment, and figure out what different AJAX call is used for form submit. Then, I can start fixing the problem, but my solution has to follow the same twisted style as the existing code. It’s all clumsily mixed together, making a gradual refactoring impossible.

Even worse, I suspect that some compile-to-Javascript tool was used to generate the site. Even if I could figure out what tool was used, I only have the compiled Javascript and not the true source code. My only option is to edit the generated Javascript directly.

The “single page app style” is a disturbing trend in web development. As usual, popularity is inversely correlated to merit. I’ve heard many insults directed at building a website in the “traditional” or “non-retarded” style. It makes a clueless programmer feel good, when he adds a lot of unnecessary complexity to his project. The worst part of the single page app style comes when maintaining someone else’s code. Then, you’re dealing with one giant Javascript file or code that loads itself in bits and pieces via AJAX calls.

9 Responses to “Single Page App” Website Style Sucks!

  1. Anonymous Coward August 4, 2013 at 6:22 pm

    Sorry if this is off-topic, but in the past you have mentioned panic attacks.

    I just came across an article that mentioned panic attacks could be a sign of hypothyroidism. Another article says that standard TSH tests may not diagnose some cases of hypothyroidism.


  2. I agree about the part that it makes a programmer feel good. I know from first-hand experience that they feel like is a big accomplishment. Maybe we should also educate the client who might ask for a “single page app style” as a requirement.

  3. Slow and unresponsive, and the data does not have its own resource locator, so it is impossible to bookmark anything. When you return to the site, you have to go through all of the navigation steps again, rather than linking directly to the page with the content.

  4. Ajax calls are useful for nagivating through content (eg. a catalog, tab blocks or tables with pagination) on the same page. That way, only the actual data needs to be reloaded and you don’t need to reload the rest of your page over and over.

    Another valid use case is eg. form submission. It makes more sense to use Ajax to submit a form and show the server’s response than reloading the entire page.

    Those are the only use cases I can think of from the top of my head where I’d actually use Ajax calls. Loading totally distinct content via Ajax throughout the same page is simply madness.

    • Acutally, regular form submit is cleaner than ajax submit. With regular form submit, the user’s back button will take him to the page with the form filled out, if there’s a problem. That problem specifically occurs on my current project. When data is eaten due to a bug, the users can’t go back to the old page, because it’s ajax and not a proper page.

  5. Pages like Hulu, Youtube, USA Today are SPAs and have urls you can link to that are generated and handled by the javascript frameworks they use. Pages like facebook, twitter and others use a hybrid technique in which they preffer handling urls with javascript and if no js is available then they switch to serverside.

    • T. R. Ollinsworth December 3, 2014 at 3:45 am

      If they do it correctly then it just becomes an implementation detail, but the vast majority of people doing “single-page apps” are not even trying to do it correctly, let alone succeeding.

      The memory leaks that plague JavaScript’s piss-poor object model and piss-poor garbage collectors also become a much bigger problem when the page state isn’t periodcally flushed by full reloads.

  6. The new way of writing web apps is lunacy if you ask me. After 20 year, I’m ready to retire from programming. Web programming isn’t getting better. It’s getting worse.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>