18.06.2019 / IT technology

Single Page Application – how it differs from the traditional approach

Nowadays, when entering the website, users expect that it will load in a few seconds. Most websites meet these expectations, but when the user goes to a sub-page or selects a sort criterion, the page refreshes. It does not matter much to the user. He just has to wait for an extra second and "experience" all the elements on the page load again. From the backend, the process is more complex. The page sends the function to the server, after which gets a response and makes changes on the website.

This is a classic example of Multiple Page Application (MPA) - the most (currently) used solution in creating websites and web apps. However, MPA has one big disadvantage - every time the page interacts with the user, the server sends all the elements, again and again, even those that remain unchanged, but must be refreshed anyway.

In order to shorten the time of changing of the elements on the page, programmers use a Single Page Application (SPA) approach, which instead of downloading the entire page from the server when the user performs some action, instead gets only a packet of data that needs to be changed on the page. In this case, the server does not return several thousand lines of code, but only the data of elements that need to be changed. This happens due to the earlier loading of the entire page, which, however, takes longer than in the case of MPA.

The use of the SPA approach

The SPA works best in online calculators, booking sites or other websites that are based on data entered by users. Such sites need to quickly change the content of the page or separate elements when the user changes the entered data. SPA also works perfectly for the creation of CRM and ERP, where interactions between users and the system are continual and rely mainly on changing the elements. Although the frequent refreshment of elements is not so noticeable by users, however, it affects the user experience to some extent. The SPA allows for a smooth transition between changes in a fraction of a second, eliminating the waiting time and “blinking” of elements during refreshment.

However, it is not recommended to use the SPA approach to websites for which SEO is relevant. Although Google says that the search engine is able to index sites such as SPA, however, it takes a lot longer and can negatively affect the position in the search results.

The advantages of the Single Page Application

The SPA backend and frontend are independent, so developers do not need to have knowledge of technologies used in all aspects of creating a website or system. The SPA allows programmers to choose a narrow specialization and focus on solutions, without paying attention to the frontend or backend. This is also an advantage for the IT department director. Clear division of programmers into frontend and backend developers makes it easier to manage teams and delegate tasks. In addition, the popularity of the SPA is growing among programmers, so the use of technologies that employees are interested in increases their engagement and work efficiency.

From the client's point of view, SPA is a better solution because it allows the creation of completely new graphic design without additional costs of building a new website from scratch. Because the frontend and backend are created separately, layout and design can be changed without introducing changes to the backend code. For the same reason, using a SPA, developing a mobile or web app is much easier than in the MPA. Because the backend has only elements' data that should be on the page or in the application, their appearance or layout depends only on the frontend. Due to this, the client bears lower development costs on different platforms, where the site or app may look completely different, but have the same elements.

Microservices in the SPA

Microservices are separate elements that can be changed independently of other components on the page or system. They are designed to reduce server burden, especially for large systems and extended platforms. In conjunction with the SPA, microservices reduce the complexity of the system, simplifying its management. Independence of microservices allows to enable or disable them in the system without much impact on other elements or the system in general.

Although Single Page Application is an advanced technology and requires more experience, it has many advantages for both programmers and clients. The use of SPA in the creation of CRM and ERP systems allows using modules more effectively, improving the work of system users. In the case of typical websites, SPA is not very important for Internet users, because in most cases they do not do a lot of activities when they visit websites. Also, sites that are mainly based on the publication of various information (e.g. news or articles) do not need a SPA, because interactions with users are not so frequent compared to systems management, where the use of SPA is more convenient.