What is a Single Page Application? Pros and Cons of the SPA Technology

What Does Single Page Application Mean and Why Do We Need Single Page Application

A single-page application is an app that doesn’t need to reload the page during its use and works within a browser. Think of the apps you use daily: Facebook, Google Maps, Gmail, Twitter, Google Drive, or even GitHub. All these are examples of a SPA.

One of the best advantages of a correctly-configured SPA is the user experience (UX), where the user enjoys the natural environment of the app without having to wait for the page reloads and other things. You remain on the same page, which is powered by JavaScript programming language. 

Before we go further, there are three abbreviations you’ll see in this article:

• SPA – single-page application (like we’ve mentioned above)
• MPA – multi-page application (a traditional app that loads new pages when you click a link)
• PWA – progressive web application (a website that is built using JavaScript or its frameworks and can act like an app, i.e., you can, for example, add it to your mobile phone homepage as an app)

Single Page Application Advantages: Why Use Single Page Application?

The main advantage of single-page applications is their speed. Most resources SPA needs (HTML + CSS + Scripts) are loaded at the launch of the app and don’t need to be reloaded during usage. The only thing that changes is the data that is transmitted to and from the server. As a result, the application is very responsive to the user’s queries and doesn’t have to wait for client-server communication all the time.

Numerous studies by Google and key findings by companies such as Amazon and Wal*Mart show that if a page takes more than 200 milliseconds to load, it has the potential to ruin your business or, at the very least, cost you much money. For example, Amazon says that 1 second of additional delay in page load costs them 1% of sales (which, considering Amazon’s amount of sales, is $1.6 billion per year.)

Talking about the page speed impact on SEO and other things, here is a diagram of the user experience factors that directly affect the ranking of your website in the search engines (besides the importance of content – that’s a completely separate extensive topic.)

From a developer’s point of view, the creation of such an app is streamlined and optimized. You don’t need to write code to render the pages on the server. It’s not even really need a server to begin the development process. You can kick off from a file to get started. Besides, the developer can completely reuse the same backend server-side code and efficient API for the web application and a native mobile app. 

Single-page applications are excellent when you have a team of developers working together. It allows backend developers to focus on the API, while frontend developers can pay more attention to creating the best user experience based on the backend API and implementing a beautiful user interface. 

Debugging a single-page application is also easy using the Chrome browser since it has special tools for Angular Batarang and React (the technologies used for SPAs.) Using a console, you can monitor network operations as well as investigate various page elements and associated data. 

Caching process is also quite efficient – the application sends only one request, stores all data transmitted, and can use this data. This is especially important at times when the user can have poor connectivity – s/he can still use your app since it’s synchronized with the server when the connection improves.

We’ve mentioned Progressive Web Apps (PWA) above, and SPAs can easily be transformed into PWA. In turn, this enables the developers to provide local caching and offer the offline experience to the clients and users. 

Single Page Application Disadvantages: Why Not a Single Page Application?

Despite all the advantages of single-page applications, nothing is ever perfect. Let’s check out the times when the SPA can be not an ideal solution.

What do we mean by single-page application disadvantages? 

Single-page applications put a more significant load on the browser. For example, if your users have low-power devices, they will have a poor app experience in terms of speed.

Additional problems with JavaScript arise because you have to make sure there are no memory leaks. Since the app can run for a long time – hours at a time (as opposed to the MPA, where the lifespan of a page was counted in minutes), you need to make sure your SPA doesn’t consume more memory than it needs. Otherwise, the pleasure of fast-loading pages will be destroyed by the sluggishness of unavailable memory on the user’s device.

One more disadvantage of JavaScript is that users simply can have it disabled on their devices, and then you need to think of additional ways how they can access the information on your website or your app without JavaScript. 

Another critical thing to remember about using or building a SPA is security. Due to cross-site scripting (XSS) and the fact that no new pages are loaded, hackers can gain access to your website and inject new scripts on the client side. 

Therefore, if you are thinking about building a single-page application for your business, make sure you take the necessary precautions not to let this happen. 

Another security issue is the privacy of sensitive data. The initial page load should not contain any information that shouldn’t be available to all users. Since the entire SPA loads right away to the user’s device, you might accidentally give away data that should be behind a login or not available at all. 

SEO Optimization for Single-Page Applications

SEO optimization is tricky when you have a single-page application, which is why we decided to dedicate a separate section to it in the SPA Disadvantages.

It’s safer to use SPAs when you don’t rely on search engine optimization (SEO) as much, for example, if your app can only be accessed via a login.

If you have a blog, on the other hand, it’s harder for the search engines to index your SPA website as opposed to traditional server-rendered pages. This is because the URL doesn’t really change, and different pages don’t usually have their URL addresses. 

Therefore, our advice to you: if you don’t want to bother with the URL settings, choose a framework that supports server-side rendering (SSR). Additionally, don’t use iframe windows, use static URLs, and optimize the scripts on your page to speed them up. Finally, make sure your pages have HTML5 for Google crawlers to be able to access them.

You also should pay special attention to the server messages, especially the 200 and 404 errors.

Single Page Application Migration Issues

Single-page applications sound like they were sent from heaven to simplify users’ experience with the website. It’s fast and convenient; it’s almost perfect. Is it really so?

When you are thinking about migrating to a single-page application from an MPA, you need to stop and consider the pros and cons (that we’ve mentioned above.)

WHEN TO USE A SPA

You might be asking, “When should I use a single-page application?” When you have a business or a personal website that needs a dynamic platform and small data volume, the single-page application is a good idea. It is also a great option if you are planning to develop a mobile app in the future, since, as we mentioned above, the backend API can be used for both web and mobile apps.

The main drawback is the SEO, but the architecture is suitable for Software-as-a-Service (SaaS) platforms, closed communities, and social networks (which is why Facebook uses it). The reason for this is that these sites don’t need optimization for searches on Google. 

WHEN TO USE AN MPA

Large companies with a broad range of services and products would benefit from a more traditional multi-page application. Such businesses include online stores, company sites, catalogs, and marketplaces. Managing such an application would also be much easier since it is possible to connect it to multiple user databases. 

Finally, these types of companies would need search engine optimization options since a lot of them would want to be found in Google, Bing, and other search engines (to sell the products or services they offer.)

Benefits of SPA for Users

The main advantage of single-page applications for end-users is, of course, the speed at which the app loads as well as the ability to work offline.

SPA offers a linear user experience, which means that it is easy to navigate the website and understand where to find this or that thing. For example, the Saucony SPA has a clear beginning, middle, and end. Using UI/UX design, the Saucony app developers have used parallax scrolling and transitions to make the customer journey a pleasurable one. 

Single-page applications are great on mobile devices too, since most of the time, all the users need is to scroll (think of the endless Facebook wall). You don’t have to click any links, and you just enjoy scrolling. 

Benefits of SPA for Businesses

When it comes to businesses, single-page application development usually takes less time since the same backend API can be used for both the web and mobile. As a result, the information flow is streamlined, and it becomes much easier to create a standalone native mobile application. 

Considering the advantages in speed optimization of the SPA, businesses can also benefit because the users would be more interested in using an app that is fast (ergo, purchase something or just use the app more often.)

Single Page Application Architecture and How Does Single Page Application Work

How do single-page applications work? Single-page application architecture is quite straightforward – it consists of the client-side technologies (at HUSPI, we rely on React.js, Angular, and Vue.js) and the server-side technologies (for which we usually use Node.js)

In terms of the way the site renders as it is presented to the user, there are three options to choose from. 

1. CLIENT-SIDE RENDERING (CSR)

1. The browser sends a request for an HTML file from the server
2. The server responds quickly with a simple HTML file with styles and scripts linked
3. The user sees an empty page or some loader image while the js is executing
4. The application fetches data, generates views, and injects it into DOM
5. The application is ready for use

This might be an option for simple websites, but keep in mind that rendering the information on the client side requires a lot of resources from the device and might overload the browser. As a result, this option might be the slowest of the three. At the same time, if you have a high-trafficked website, CSR would be better since it would present the information to the user without having to talk to the server too much.

Also, if you need social sharing options, keep in mind that all pages in CSR usually have the same open graph (og:) values, therefore you need to use either SSR or SSG.

2. SERVER-SIDE RENDERING (SSR)

1. The browser sends a request for an HTML file from the server
2. The server fetches all needed data, renders the application, and generates the app’s HTML file on the fly
3. The user sees the available content
4. The single-page application framework is what attaches events, generates a virtual DOM, and performs other actions
5. The application is ready for use

Server-side rendering is the option we rely on at HUSPI, because it combines both the speed of the single-page application and doesn’t overload the user’s browser, making the app fast.

3. STATIC SITE GENERATORS (SSG)

1. The browser sends a request for an HTML file from the server
2. The server responds quickly with an already-prepared HTML file
3. The user sees the page
4. The application fetches data, generates views, and injects it into DOM
5. The application is ready for use

Good and fast option, but remember that if you have dynamic content on your website, static site generators wouldn’t be your best friends because they are oriented more at static pages (as you could’ve already guessed from the name.)

How to Do Single Page Application Using Angular, React, and Vue

As I was writing this article, I consulted with our developers to understand what are the world’s best practices in terms of single-page application creation that are used here at HUSPI.

HUSPI developers have tried and tested numerous frameworks and have different work backgrounds, but they unite in saying that there are top-three frameworks for the front – Angular, React, and Vue – and there is one main for the backend – Node.js. There are a handful of other frameworks available on the market (like Ember or Knockout), but we don’t use them as much. 

To build a single-page application, you need AJAX and HTML5 to build responsive pages while Angular, React, and Vue are responsible for handling the “heavy lifting” on the client side of a SPA.

[Source]

What to Choose – React, Angular, or Vue?

We have written several articles on the topic of comparison among these frameworks. However, let’s compare them again to see whether they have advantages in terms of single-page application creation. 

In short, if you’re going with JavaScript frameworks:

• Angular: A powerful JavaScript framework developed by Google. It provides a complete solution for building complex SPAs and offers features like two-way data binding, dependency injection, and modular architecture.
• Vue: A progressive JavaScript framework that is known for its simplicity and ease of integration. It allows developers to gradually adopt its features and scale up as needed.
• React: A popular JavaScript library developed by Facebook. It focuses on building reusable UI components and provides efficient rendering through the use of a virtual DOM.

Angular and Single-Page Applications

Angular is a JavaScript framework that was introduced by Google back in 2010. Among the three options we’re comparing, Angular is the oldest, and it is based on TypeScript. Due to TypeScript, Angular is a great option to use by large teams of developers and companies that already use this technology in their other products.

It’s the most mature among the frameworks and has a decent number of contributors on GitHub. It might be harder in terms of the learning curve, but at the same time, it’s worth it. 

Among the clients that use Angular for their Single-Page Applications are Google (and their products such as Gmail and Google Drive) and Wix, so if you decide to create a single-page application using Angular, you’ll be in great company.

# Version: 14.0.4
# Contributors on GitHub: 1,590 (as of July 2022)
# Number of users: 2.4M
# Amount of stars on Github: 82.7K

The latest Angular version is 14.0.4 which was released in June 2022.

React.JS and Single-Page Applications

React.js is a JavaScript library that was created in 2013 by Facebook. They use it extensively throughout their product line, including such well-known single-page applications as Facebook itself, Instagram, and WhatsApp. Besides Facebook, Uber also uses the React.js library for its products.

Out of the three competitors, React has the most considerable amount of contributors on GitHub – over a thousand – which helps to stay up to date with the various challenges developers face every day.

Our developers here at HUSPI also prefer React technology for the projects we develop (unless there are requirements for another framework). It’s both lightweight and mature enough to be tested and tried and found worthy.

React is the right choice for those who are just getting started with JavaScript frontend frameworks as well as startups and developers who like being flexible. React offers good integration options with various other technologies and frameworks, which is very helpful when you’re working on a project with a big ecosystem.

# Version: 18.2.0
# Contributors on GitHub: 1,561 (as of July 2022)
# Number of users: 10.7M
# Amount of stars on Github: 191K

Vue.JS and Single-Page Applications

Vue is the youngest of the three, created in 2014 by an ex-Google employee Yuxi (Evan) You. Even though no large corporation supports its development, Vue has managed to rise in popularity. Currently, such companies as GitLab, Baidu, and Alibaba use Vue.js for their needs.

If you prefer simplicity and flexibility in your front-end frameworks, then Vue is a good option. Besides, it’s the most lightweight of all.

# Version: 2.7.6
# Contributors on GitHub: 336 (as of July 2022)
# Number of users: 2.7M
# Amount of stars on Github: 198K

We wrote an article about React.js vs. Vue.js

If you want a JavaScript framework besides these three, there are also JS options:

• Ember.js: A framework that follows the convention-over-configuration principle. It provides a robust and opinionated structure for building ambitious SPAs.
• Backbone.js: A lightweight JavaScript library that provides a minimalistic structure for organizing code and handling data models.

Single-Page Applications and ASP.NET (Blazor)

We decided to add the ASP.NET option to the list of frameworks and technologies for single-page applications. There’s a new kid on the block called Blazor. It’s a .NET framework that uses C#/Razor and HTML that runs in the browser with WebAssembly, according to the GitHub repository. 

Microsoft announced the release of this framework earlier in 2019 and currently, it looks like version 1.0 is ready. This serious backing from a large corporation is a great advantage of Blazor because it immediately makes this open-source instrument a part of the 60,000+ OSS contributors’ community with 3,700+ OSS company contributors.

Blazor is a convenient tool because there’s no need for TypeScript or JavaScript, you can write all logic in C#. That said, Blazor offers interoperability with JavaScript APIs and libraries, so if your ecosystem is large and consists of JS libraries, you’re not lost in the transition. 

.NET Blazor also offers two different options – client-only Blazor and server-side Blazor. The latter should be shipped with the .NET Core 3.0. 

Does it mean that Blazor will kill Angular, React, or Vue? We don’t think so. However, it is something to keep an eye on. 

For SPA using .NET, you can also use ASP.NET Core and ASP.NET MVC. How to create a single-page application in ASP.NET MVC? You set it up on the backend to serve the HTML on the front end.

# Version: 5.0
# Contributors on GitHub: 73 (as of July 2022)
# Amount of stars on Github: 9.4K

Other options of technologies for SPAs include:

1. AJAX: Asynchronous JavaScript and XML (AJAX) allow SPAs to retrieve data from a server without reloading the entire page. It enables seamless data exchange between the client and server, improving user experience.
2. JSON: JavaScript Object Notation (JSON) is a lightweight data-interchange format commonly used to transmit data between the server and client in SPAs.
3. RESTful APIs: Representational State Transfer (REST) is an architectural style used to design networked applications. RESTful APIs provide a standardized way to interact with server-side resources and are often used in SPAs for data retrieval and manipulation.
4. Webpack: A popular module bundler that allows developers to bundle and optimize various assets, such as JavaScript, CSS, and images. It aids in code organization and performance optimization in SPAs.
5. Single-Page Application Frameworks: Several frameworks, like Meteor and Aurelia, provide comprehensive solutions tailored explicitly for building SPAs. They offer features like routing, state management, and build tools to streamline the development process.

Conclusion – Need to create a SPA?

Considering the rise of mobile devices and an on-the-go lifestyle, single-page applications are great. Whether your business would go for a SPA or an MPA – that’s more of a question for your business analysts and requirements.

At HUSPI, we’ve got business analysts on the team who can help with understanding and defining the technical needs of the project (and developers who can build the architecture and the project itself from the ground up).

---