How Single Page Applications Broke Web Design

Mar 17 · 4 min read
Image for post
Image for post
“Try Ember” they said, “it will be fun” they said.

The world wide web was initially designed around the concept of documents connected together with hyperlinks. The general idea was fairly simple: a web browser requested a document from the server, downloaded its contents and displayed it (visually enhanced with CSS) on the screen. Hyperlinks in a given document led to another document with new content and the web of information was formed. Web browsers, crawlers, social media and the whole web infrastructure have all evolved around this simple idea.

Single Page Applications (SPAs)

The term “single page application” was first used back in 2002. Three years later, an introduction of AJAX provided the foundations for SPA frameworks such as Ember or Angular. Each framework aimed to solve a clearly defined problem. While Angular was constructed to target web designers who were already familiar with HTML, Ember reduced boilerplate code with its “convention over configuration” principle and ReactJS, introduced in 2011, took off and disrupted the web with component based approaches, code re-use and speed.

The underlying technology is outdated

For example, the concept of URLs makes sense for document based websites, but needs to be re-thought from the SPA perspective. The URLs are often artificially injected by using the browser’s History API; this seems like some kind of a hybrid state instead of a long term solution. If not carefully taken care of, some SPAs break simple features like forward and back buttons in the browser, resulting in a user experience which is far from ideal. Even the simplest things, like the title element of SPA, needs special handling either with JavaScript or server-side-rendering approaches.

Another issue are the web crawlers. Google has already taken some steps to index single page applications, but according to John Mueller, Google’s employee, there is room for improvement:

It’s not always perfect, and certainly not easy, but for some sites it can work well, even if you rely on client-side-rendering (just JS, no server-side-rendering). YMMV :) — John Mueller

While Facebook created ReactJS, it’s surprising that their crawlers are completely blind to the mixture of lets and vars of JavaScript, rendering SPAs often invisible on their platform (given that the app lacks server-side-rendered code).

State management is tricky

  • A user (Richard) visits your freshly made React single page application and is truly amazed with the blazing fast tab switcher that you’ve been sweating over for the past month or so.
  • Richard switches to a sign-up tab and quickly fills out the necessary fields to become an honored member of your app.
  • As a member, Richard can now see two additional tabs: Stories and Reading List. In all the excitement, Richard opens the Stories tab and quickly adds two stories to his reading list.
  • However, the Reading List still shows 0 stories, which confuses Richard and makes him delete his account.
Image for post
Image for post

In the “old” days, the technical aspect of the implementation would possibly involve two different documents: stories.php and reading-list.php. Both of these would be a program with a clearly defined lifecycle — Richard opens a link in the browser, the program runs for a couple of seconds and responds with an HTML source code that even Facebook crawlers can read.

In the case of single page apps, there is often one program — app.js, which is transferred, before execution, over to the Richard’s browser. The browser then translates logical operations into DOM elements.

Going back to Richard, the problem that he experienced is due to improper state management. The programmer updated the state of the buttons (they’re now showing Added to the Reading List), but forgot to update the number of items in the list. This issue, while easily solved, can get trickier as the app grows in size. Javascript community is not alone in having to deal with state management — most mobile developers are also familiar with the problem. Tools like Redux help with reducing this headache to some extent, but tend to introduce boilerplate and complexity to projects.

Web developers are moving fast from one technology stack to another. Single page applications are trending because they offer brilliant user experience on screen transitions as compared to more traditional approaches. New frameworks and libraries are released almost every day, only to solve isolated issues. Real step forward is to adapt the browsers and the world wide web in general to play more nicely with single page applications. Until that happens, there will only be hypes for the next “big thing”.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store