What is a Single Page Application (SPA)

The difference between an SPA and a traditional website

If you are here you will probably have heard about SPAs, but you have understood that we are not talking about wellness centres. So, what are they? Single Page Applications, web apps that are organised around a single page. To find out more, read this article!

Before getting down to the main topic, perhaps you would like to refresh your memory with regard to apps in general. At times it may be confusing because it is a very complex and nuanced sector. If you are in a hurry, go ahead and skip the introduction, otherwise, take a minute to understand the context better.

Software, applications, apps and web apps

An application is a piece of software, but the term is very generic. Indeed there are many different types of applications that can be distinguished based on the criteria chosen and the technologies used to create them.

The most evident difference currently is between the apps that you can download and install on your smartphone or tablet (from the iOS App Store or the Android Play Store) and those that are also accessible from a desktop browser such as Google Chrome or Safari, without the need for installation. These two types of applications can be respectively defined as app mobile e web app.

There are also applications that are installed on premises, which work without the Internet and are on your laptop or desktop computer. Two obvious examples are Microsoft Word and Microsoft Paint. There’s not much more to be said, this is the “classic” software which has existed since the 90’s, although in recent years we have witnessed a growing migration online of tools and services. These migrations consist in the creation of web apps which offer the same functions (sometimes a selection or with new integrations) as the old style applications.

We need to focus for a moment on internet websites. They are different from web apps based on the technology used to develop them, but more in general for their different level of complexity and purpose. An internet website is usually a portal of informative content with limited tools (for example a contact form) while an app is more often used to perform certain activities and complex operations.

Ecommerce sites are good examples of how these two aspects can coexist: the purchasing management system via browser is similar to a web app, but it can also have informative sections that give information about the identity and business of the brand that owns them.

Where do the Single Page Applications come into all of this?

What is a Single Page Application? (SPA)

First of all it’s important to know that an SPA is a kind of web app, so it is an application that is accessible via browser with an Internet connection. So, how is it different from the others? As the name suggests, it is an application based on a single page, but what does that mean exactly?

Applications like Facebook, Twitter, Netflix, Google Docs, Gmail and Google Drive are all SPAs. To better understand this, let’s take a step back and compare an SPA to the classic company Internet site made with Wordpress.

The differences between a Single Page Application and an Internet site

An internet website is organised in pages and every time you view one your browser asks the server that hosts the site to download all the elements that it contains. Text, images and other content “burn” a part of your data traffic (based on how many megabytes these elements are) and they are displayed on your screen. This procedure is performed every time you change page. The heavier this data is the more traffic they consume and the slower they are loaded.

schema funzionamento sito internet classico

A summary chart of the function of a traditional internet site.

A Single Page Application is organised in a single page that does not follow this method. This doesn’t mean that an SPA does not have traditional navigation features with different sections containing specific functions and information. The difference between an SPA and the other applications refers to the way in which the developers organise the software code and not the way in which the users see it on their devices.

The Single Page Applications download all of the common components to their different sections only once and these remain available regardless of the section you want to view. When you have to consult certain data – for example the products on an ecommerce site – it is downloaded from the database that contains it without needing to perform a global refresh of the page.
This begs the question: what are the advantages of developing a Single Page Application? Let’s see.

schema funzionamento single page application

Summary chart of the function of an SPA.
The advantages of a Single Page Application (SPA)

Of course an SPA allows you to save traffic data, but the real advantage is another.

Indeed an SPA guarantees more fluid navigation as if you were using an application installed on premises. Up until a few years ago you could speak of loading speed, but thanks to improvements in caching policy with the browsers (increasingly aggressive and standardised) nowadays the difference in time compared to many traditional sites has been decreasing.

Although it is very subtle, the SPAs have a higher perceived speed, a very important element for the User Experience (UX). As we have known for years, performance and accessibility are two fundamental elements to improve User Experience and to make work tasks based on software more effective.

You will have noticed how quickly this blog loads articles. Most sites are usually slow and take a few seconds to show you the content. The secret? Our Dreamonkey internet website is a Single Page Application! That is one of our specialities: knowing how to create platforms that are stable, fast and easy to navigate. If you are interested in developing one contact us.