What Is A Single-page Application?

A spa is a place you go to drink mimosas and have slices of cucumber placed over your eyes, which is a very specific experience. The term comes from the Latin sanitus per aquam meaning “health through water”. When you visit a spa during the day, you are having what is called a “spa day”. When you visit a spa at night, they are closed.

That’s a spa, but what is a SPA? A SPA is a much less appealing and relaxing proposition. It is a type of web document named after the English expressions single-page application and sadness per Angular.

SPAs replace the bad user experience of having to wait a second or two for 20KBs of HTML to be sent to your browser from a server with the good user experience of waiting several seconds for the server to send a 300KB JavaScript bundle, used to render HTML from scratch. It’s a good user experience because it means you get to look at one of these:

By taking the content and functionality of several web pages and shoving it up the guts of a single document, it is easier to persist data within the application, making transitioning between screens (fake pages) blazingly fast. Or it would, if the person who created the single-page application you’re looking at didn’t make it fetch content from a GraphQL server every time you switch between these screens. Considering localStorage has been supported since Internet Explorer 8, you’d think good use would be made of that. But then you wouldn’t get to look at one of these:

To make single-page applications load faster, you can render them as static HTML on a server, then send that static HTML to the browser (like you did before single-page applications were invented). However, to make them behave as single-page applications in the browser, you still have to send the 300KB JavaScript bundle alongside that static HTML. During the time that elapses between the HTML and JavaScript arriving in the browser and the JavaScript re-rendering the HTML in situ, the interface has no functionality. To save you from pressing buttons that don’t do anything yet, a courteous developer will take this opportunity to show you one of these while you wait:

Once your SPA JavaScript is all loaded up, it may be that it does a lot of DOM operations. In which case, it may benefit from using a Virtual DOM. With a Virtual DOM, you don’t operate on the DOM directly, which is inefficient. Instead, you create a virtual, serialized representation of the DOM, which you query and evaluate before you do any DOM operations. Which, of course, you still have to do. Because, otherwise, nothing actually happens. This overhead isn’t an issue if your DOM is not especially large. But, well, you’re using React with Tailwind, so have another one of these:

You can’t create a complex modern web application like Google Mail without JavaScript and a SPA architecture. Google Mail is a webmail client and webmail clients existed some time before JavaScript became the language it is today or frameworks like Angular JS or Angular BS existed. However, you cannot create a complex modern web application like Google Mail without JavaScript. Google Mail itself offers a basic HTML version that works perfectly well without JavaScript of any form—let alone a 300KB bundle. But, still, you cannot create a complex modern web application like Google Mail without JavaScript. Just keep saying that. Keep repeating that line in perpetuity. Keep adding more and more JavaScript and calling it good. Incidentally, you do not need to create a complex modern web application like Google Mail with JavaScript or otherwise because it already f**king exists.

This site is rendered statically and uses no JavaScript whatsoever, largely because it is a blog so there really is no need. But equating familiar with good is common and I aim to please, so here’s yet another one of these for good measure:

If you enjoyed this, you may like my videos and there’s a vanishingly small chance you may also be interested in some web themed apparel.