What are Single Page Applications(SPA)?
Tags: beginners, webdev
Published: 2019-09-15 09:18:42

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.

| ![Traditional http request](https://thepracticaldev.s3.amazonaws.com/i/faav73ifc3ss6pjcl35l.png) | 
|:--:| 
| _Source: [microsoft](https://msdn.microsoft.com/en-us/magazine/dn463786.aspx)_ |
 
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](https://en.wikipedia.org/wiki/Single-page_application) 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. 

| ![SPA http request](https://thepracticaldev.s3.amazonaws.com/i/33jxnuw76ahwv9dacedu.png) | 
|:--:| 
| _Source: [microsoft](https://msdn.microsoft.com/en-us/magazine/dn463786.aspx)_ |

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.

| ![SPA components](https://media.giphy.com/media/b2CD0Qrq2ulwY/giphy.gif) | 
|:--:| 
| _Source: [giphy](https://media.giphy.com/media/b2CD0Qrq2ulwY/giphy.gif)_ |

# 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_](https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16). 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](https://en.wikipedia.org/wiki/Web_crawler) 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.