Have you ever heard about some of JavaScript frameworks, such as AngularJS, React or Vue.js? Maybe you would like to learn it but you don't know in general why there are so popular? All of them have adopted SPA principles. What is SPA? Let's start from the beginning...

The 'old' websites

Let's assume that you have been developing the websites in the 'old' way. The end user opens it in the browser and navigate through it.

Aside graphical interface the whole page was downloaded from the server. Every click resulted in sending a bunch of files by the server. Moreover if the user has bad internet connection this exchange might cause seconds to load the page! This is how it have been working behind the scenes.

Source: microsoft

Wouldn't it be nice to involve the server only once to load the page and navigate through it ? This is where SPA comes in.

What actually is SPA?

Wikipedia provides rather clear definition but let's take a closer look

,,A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server."

Let's dive deeper.

SPA loads all the bundled content for the first time when you make a request by typing i.e. www.myAwesomeSPAWebsite.com in the browser.

Source: microsoft

You can see that after the initial response from the server later on it would send the JSON data. Most of the requests in the app are moved to the client side. Server is mostly responsible for authentication and connecting with database.

In popular SPA frameworks such as React, Vue, Angular, code of the website is split in components. In general when you navigate through the page, other components are rendered replacing the content instead of download it from the server and reloading the whole page.

Source: giphy

SPA pros

• Using the website is faster - Because everything is loaded by the first time the client can change the content on the page instantly. In other words our app works like the desktop application because it doesn't need to communicate with the server again to properly display the page.

• Decreases the server load - SPA works different with the server at the communication level than the traditional page. To understand this better we can compare this process with building a house. Imagine that you(client) would have to carry bricks(data) one by one wasting your time(like in traditional websites) or you can just use the wheelbarrow(all of the data) and load all of them at once(using SPA). Now you have to transport them only once at the beginning. From now on you do not care that a bricklayer sends you to bring some bricks again. You (the server) can rest.

• User experience (UX) - UX refers to any interaction a user has with a product or a service. The fact that you don't have to wait till the page reloads, gives you more pleasure of using it.

• Less amount of transmitted data - I have mentioned that all the data is loaded at at once at the beginning. Moreover there are mechanisms that allows us to define which data should be loaded on the first request and which can be load later. It also increases the UX of the app.

• Modern solutions - Thanks to use modern solutions the code of an app can be more minified. You are also able to use microservices. This gives you a possibility to divide your app into services that provide an API.

SPA cons

• Developers pay more - SPA can be simply written in HTML, JS and CSS but sooner or later you will realize that you need to learn i.e. Webpack, Express, React/Vue/Angular and other accompanying solutions. This can be frustrating at the beginning but it is worth to learn them.

• SEO - Search engine crawlers like Googlebot and Bingbot are designed to index web pages through a process known as spidering or crawling, where they download the page’s HTML file(s). That's why it is easier to index and rank a static HTML-based web page. When it comes to indexing JavaScript-based SPAs, things get a little complicated. You have to make more effort to take care about the SEO.

Summary

Should you use SPA for your future projects?
Well, as always you should consider every pros and cons to choose the best option. Maybe it is not worth to develop SPA, maybe the overall cost would be too much. There can be more subjective pros and cons depending on the developer preferences. However it is worth to keep track this rapidly developing SPA world.