The Popularity And Features Of A Single Page Application

Single page applications are known as SPAs.

There was a time when the server fulfilled each page request by sending an entirely new page to the browser.

Nowadays, SPA or single page applications, popularized by JavaScript frameworks such as React, are taking the browsers by surprise. With a single page application, the browser does not need to refresh itself to change or update data.

When we open a one-page website, the application code loads only once. After interaction with the application starts, JavaScript takes hold of the requests to the server. Instead of the whole web page, the server now only sends data upon each request, in the form of JSON. The page which a user sees is never really wiped away from the browser it is simply filled with new information.

The technology for creating such an application remains generally the same. The only thing that changes is the philosophy and the components of the application.

Some of the most notable single pages application examples are:

  • Twitter
  • Google Maps
  • Facebook
  • Google Drive
  • Gmail

Ever noticed, you are searching for a location on google maps it keeps on updating on its own. As you move around the maps, new locations start to pop up without any page refresh. This is one of the best examples of a SPA application.  

The same goes for google drive, Facebook and Twitter.

How This All Works

Let us start with the concept of a traditional website.

A traditional web app makes a call to its server. The server in response renders a new HTML page. This rendering triggers the browser to refresh itself to show the newly rendered page.

Now, let us look at a single page application example.

In a SPA the first page renders and is sent to the browser. Now all the requests from here on out will happen through AJAX calls.

AJAX call return only data instead of HTML (Rendered Page) from the server. The returned data populates the fields on the webs page that are already on the browser thus updating itself with new data without reloading.

Positive Aspects

There are innumerable positive aspects associated with Single Pages Applications. Let me list down the top benefits.

1. Fast Response
Since there is no need to reload the whole page and no need to receive a fully rendered page, the application feels much faster than any traditional web app.

2. Fewer Resources Consumed
In this case, the server does not have to utilize many resources. For SPAs, the focus is not on building a number of layouts on the server side. The focus is on making use of proficient APIs to send and receive data instead.

3. Great For Developers
When you are working with a team of developers, developing such an application yields great results. Front-end developers can focus all of their efforts on making the web app look good. The back-end developers, on the other hand, can fully focus on the API without worrying about the front.

Negative Side

The negative aspects are few but still, we need to consider them before making a decision.

1. A Great Deal Of JavaScript
Working on such a web application requires a lot of JavaScript code. Each session of SPA can last for hours and so a single memory leak can result in lower performance. There is a lot of JavaScript code to write and inspection of memory leak to do.

2. Poor Performance On Low Power Devices
With these applications, all the processing is happening on the client's end. If a device is old or has low processing power then the app might not work properly. It will work slow and glitch along the way.
Some of the older devices might not even have JavaScript enabled.

3. Employing SEO Tactics Are Tad Bit Difficult
Implementing SEO on SPA is no easy feat. Too many technicalities are associated with this. This topic needs a blog of its own.
Here I will mention a few things. For a successful SEO implementation, the application is pre-rendered in the back-end. After that, on the client’s side, Angular bootstrap needs to take over the page.

Future Of SPA Applications

Imagine that one website you have to visit daily. It might be a company's website or an e-commerce website.

Let us take the example of an e-commerce website and say you have to buy a cell phone. You swift through 100 pages in order to find the perfect cellphone. Each time you click on a link, your browser refreshed and new page loads.

For each page reload, you have to wait on an average of 10 seconds. In total, a hundred pages will take you back nearly 16 minutes. Instead of browsing, you just spend 16 minutes waiting for the browser to load.

This is where a single page application can work its magic. The waiting time is radically reduced with the help of the SPA.

You get the picture now? How fast the searching and loading on their website would be? The answer is, very fast.