Here’s a short history of why more and more companies are using single-page applications.

In the beginning, when applications consisted nothing but simple HMTL and CSS, it didn’t have to worry about the user state and each view could be regenerated by sending a new request to the server.

Below is an example of a simple page of what a website in the earlier days might’ve looked like. You’ll notice that there’s not much happening. There aren’t any gif’s, images, videos or even many colors like all of today’s websites.

An example of a simple website

But over time, applications became more complex. Reloading the whole page, when just one part of it changes, was ineffective and slow.

So why is this important?

According to Google’s Site Performance for Webmasters, “2 seconds is the threshold for e-commerce website acceptability”

Amazon has discovered that for every one second delay, conversions dropped by 7%. If you sell $100k per day, that’s an annual loss of $2.5m.

Walmart has found that it gains 1% revenue increase for every 100ms of improvement.

JavaScript to the rescue

JavaScript/jQuery brought significant advances to front-end web development.

It provided simple and effective out-of-the-box capabilities such as client side validation, modal windows, alert messages, animations, and even Ajax-based partial page updates.

This is all possible because of the DOM

But DOM trees are huge nowadays.

We are pushing more and more towards dynamic websites. That means that we are constantly modifying the DOM tree.

This is a real performance and development pain.

The DOM works in a retained mode, which means that it only remembers the current state. In order to modify our view, we need to provide instructions for each DOM element and program the transition. So every time we click on something, it finds every node interested on an event and updates it if necessary.

We easily end up with spaghetti code.

This takes a big toll on performance and it becomes a big pain for developers.

There are two main problems:

It’s hard to manage. Imagine that you have to tweak an event handler. If you lost the context, you have to dive really deep into the code to even know what’s going on. Both time-consuming and bug-risky. It’s inefficient. Do we really need to do all this findings manually? Maybe we can be smarter and tell in advance which nodes are to-be-updated?

Single Page Applications

A single page application literally has only one page. One of the main purposes is to reduce amount of page refreshes. Rendering pages are handled mostly on the client-side.

Here are some popular JavaScript frameworks for building SPA’s that you can check out.