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
Frameworks such as React give developers the ability to easily build complex user interfaces which are otherwise almost impossible to create using traditional approaches. However, the environment in which they are run, the browsers, was partly built with static websites in mind.
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
State management is tricky
Taking the single page approach is often beneficial, but one must keep in mind the added difficulty that comes with the preserved applications state, which is not present in traditional stateless approaches. The following scenario, while easy to debug, illustrates the simplest form of this issue:
- 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.
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.
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”.