How Single-Page Web Applications actually work?

Single-Page Web Applications have come a long way since they first appeared around 2003. They have become an integral part of the modern javascript landscape.

But during my discussions with quite a few developers, I feel that there is still a lack of clarity about how single-page applications actually work. Hence, I decided to roll up my sleeves (figuratively speaking) and provide my take on this very very interesting subject.

So, let’s start from the beginning.

What are Single-Page applications?

The best definition, in my humble opinion, is as follows:

A Single Page Application is a type of web application that requires only a single page to be loaded into the browser.

You might be thinking – what does this even mean? Surely, how could an application with just a single-page be any useful to anyone in the world?

The answer is simple. Single-page web applications are built around the concept of dynamically rewriting the contents of the single-page. This is different from loading pre-rendered pages from the server.

And this is where the magic happens. By taking this approach, single-page web applications avoid the interruption caused by rendering the pages on the server. This removes the biggest problem the web development world usually faces with regards to providing a seamless user experience.

Sounds great already, right? I know. But let’s just see how all of this even works and I’m sure you’d be even more amazed.

How does the magic happen?

In single-page web applications, when the browser makes the first request to the server, the server sends back the index.html. And that’s basically it. That’s the only time a HTML file is served. The HTML file has a script tag for .js file which is going to take control of the index.html page. All subsequent calls return just the data usually in JSON format. The application uses this JSON data to update the page dynamically. However, the page never reloads.

The client (and not the server) handles the job of transforming data to HTML once the application has started. Basically, most of the modern SPA frameworks have a templating-engine of sorts running in your browser to generate the HTML.

Contrast this to a traditional web application. In traditional application, every time the application calls the server, the server will render the entire HTML page. The client receives the rendered page and triggers a page refresh. In this case, the browser is the client.

The below illustration explains the difference between the two approaches:

What are the advantages?

• Right off the bat, it’s obvious that since we don’t send any HTML over the network for every user interaction, it saves a lot of time and bandwidth. Due to various opening and closing tags, the HTML version is usually larger. Also, in the traditional approach we also load a lot of duplicate HTML every time we make a request to the server. By following the SPA approach, the application becomes much more responsive.
• No marks for guessing that faster data refresh and less bandwidth consumption leads to a much better user experience. This is pretty useful on mobile devices and slower internet connections.
• There are arguments leveled against single page web applications saying that the javascript bundle size can become bloated. However, most of the good SPA frameworks provide wonderful methods of code splitting. This keeps your bundle sizes in check and perform on-demand loading wherever applicable.
• A less obvious benefit is regarding the overall architecture of a SPA. Using JSON to send application data creates a sort of separation between the view layer (HTML) and the application layer. This decouples the presentation and application layer and allows the developers to evolve each layer independently. You can potentially replace the HTML markup without changing the application logic. The client and server are also totally independent of one another.
• Another overlooked benefit is production deployment of Single-Page Applications. SPAs are super easy to deploy. When you build a SPA for production, you typically end up with one HTML file, one CSS bundle, and a Javascript bundle. Any static content server can host these files. Good examples are Nginx, Amazon S3 Bucket, Apache, or Firebase.

Aren’t there any disadvantages?

Well, there are Pros and Cons to everything.

One of the biggest disadvantage leveled at single-page web applications has been that they cannot be properly indexed by search engines like Google. Since there is no HTML markup except the initial index.html file, search engines cannot index the content because their crawlers cannot execute the javascript used to generate the HTML.

However, in an official announcement, Google has announced that there search engine is now able to crawl AJAX calls.

Some of the criticism levelled at SPAs are largely based on preference and complexity. However, in my opinion, they are largely subjective. The main point is that one should definitely look at the use-case while deciding on which approach best suits the application needs.

I would love to hear your comments on this in the comments section below.