What is a SPA

This article explains the concept of SPA (Single Page Application), a type of web application that is increasingly used due to the pleasant user experience it provides.

This article is prompted by a question from a fellow community member. Basically, his question was the following: Could you briefly indicate the main features of SPA and what kind of languages ​​and technologies help me to make one?

Simply put, SPA stands for Single Page Application. It is a type of web application where all the screens are displayed on the same page, without reloading the browser.

Technically, a SPA is a site where there is a single entry point, usually the index.html file. In the application there is no other HTML file that can be accessed separately and that shows us a content or part of the application, all the action occurs within the same index.html.

Note: The file name is not important, just that the servers default document is usually index.html and that’s why I mention it.

Multiple views, not multiple pages

Even if we only have one page, what we do have in the application are several views, understanding by view something like what a screen would be in a desktop application. On the same page, therefore, different views will be exchanged, producing the effect that you have several pages, when really everything is the same, exchanging views.

Note: For those who know what I’m talking about, the concept of view is similar to what is understood by the “V” of : The presentation layer of an application section.

To give you an example, Gmail is a SPA, I imagine Hotmail is too. It has a login screen, but once you’re logged in, you can do whatever it takes with your account emails without leaving the same page.

The effect of the SPAs is that they load their screens very quickly. In fact, although they appear to be different pages, it is really the same page, which is why the response is often instantaneous to go from one page to another. Another characteristic is that it usually communicates with a server and the latter sends it the data that it must show “raw”. By raw I mean that it sends you the pure data, not mixed with HTML or another language to define its presentation.

To clarify possible misunderstandings, SPA does not mean that it does not change the address of the address bar, that is, the URL that you access with the browser. In fact, it is normal that when interacting with a SPA, the URL displayed in the browser’s address bar also changes. The key is that even if this URL changes, the page never reloads. The fact of changing that URL is something important, since the browser itself keeps a history of screens between which the user could move, pressing the “back” button in the browser or “forward”. With all this, it is possible for the user to be able to use the history as he does in a normal page, being that in a SPA the navigation between the sequence of history pages is really carried out between views of the application.

Why a SPA offers such a pleasant user experience

Since the data weighs very little, much less than if it were mixed in a complex HTML and CSS code to define its presentation, transmissions are very fast and communications between client and server are very fluid. Again it helps the pages to respond very quickly to the visitor, creating a very pleasant user experience.

Note: The language with which you usually communicate raw data from the server to the client is . In any case, nothing prevents the use of another language such as XML, also very popular in Web Services. Although JSON has established itself as a standard and preferred by most developers, due to various reasons. Among them is that JSON is a Javascript object notation, so it is something very close to the web. It is lightweight and supports all the languages ​​used on the web.

Management pages, or administration of any type of service, control panels and things like that are very suitable for SPAs. The result is a web application that behaves much like a desktop application.

Surely you have used more than one SPA even if you did not know it had that name. If you know the page from where there is another example of SPA, although the term with which this type of application is known already takes the name of another, more specialized type of SPA.

Languages ​​and technologies to produce a SPA

This is very easy to answer: A SPA is done in Javascript. There is no other type of language in which you can do an SPA, since it is basically a web application that runs on the client side.

Note: Obviously, it is also done using HTML + CSS, for the presentation, since they are the languages ​​that the browser understands.

Then, within Javascript, there are various libraries and frameworks that greatly facilitate the development of a SPA, among which we can mention:

These are the most common, but there are also many others that could help us. The choice is basically based on tastes, previous experience, size of the application, etc. The ideal is to explore them to be able to decide and in .com you have a lot of literature to delve into any of them.

Now, if you want to also expand this question and cover the server side part, the backend, there you have a new range of possibilities. Although I think it is not even necessary to go into it because really any backend language would help you to produce the server part, creating what would be a REST API that returns the JSON necessary to feed data to a SPA. What should be clear is that any SPA is agnostic to how it is developed in the backend. They are two independent projects. In other words, on the client side it makes no difference how the received data is constructed on the server side.