We’re so used to being online and with a cell phone with our hands that often we don’t even stop to think about what kind of technology is helping us run this or that app. Usually, that’s not a problem – we don’t think about the electricity when we turn on the lights. However, when you face the decision to create an app for your business, then it’s conducive to understand what does SPA (single page application) means and how is it different from Multi-Page Applications (MPA).
In this article, we’ll talk about what is Single Page Application (SPA), what benefits does SPA bring to users and businesses, how does it work with SEO, what are its pros and cons, and finally how SPA works with such technologies as Blazor, Angular, React.js, and Vue.js.
In this issue:
- Single Page Application Definition
- Single Page Application Advantages
- Single Page Application Disadvantages
- Single Page Application Migration Issues
- Benefits of SPA for Users
- Benefits of SPA for Businesses
- Single Page Application Architecture
- SPA and Angular, React.js, Vue.js, and .NET
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.
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)
Single Page Application Advantages: Why Use Single Page Application?
The main advantage of single-page applications is its speed. Most resources SPA needs (HTML + CSS + Scripts) are loaded at the launch of the app and don’t need to be reloaded during the 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.)
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 the 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 a 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 the 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.
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 for 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 crawler 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 the 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 the 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 search 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 the 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)
- The browser sends a request for HTML file from the server
- The server responds quickly with a simple HTML file with styles and scripts linked
- The user sees an empty page or some loader image while the js is executing
- The application fetches data, generates views, and injects into DOM
- 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)
- The browser sends a request for HTML file from the server
- The server fetches all needed data, renders the application, and generates the app’s HTML file on the fly
- The user sees the available content
- The single-page application framework is what attaches events, generates a virtual DOM, and performs other actions
- 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)
- The browser sends a request for an HTML file from the server
- The server responds quickly with an already prepared HTML file
- The user sees the page
- The application fetches data, generates views, and injects it into DOM
- 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.JS, and vue.JS
As I was writing this article, I have 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 frontend – Angular, React, and Vue – and there is one main (their favorite) 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.
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.
ANGULAR AND SINGLE-PAGE APPLICATIONS
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.
# Contributors on GitHub: 997 (as of September 2019)
# Library size: 500+ KB
Angular community is about to release the Angular 9.0.0 – what to expect in the new version of Angular?
REACT.JS AND SINGLE-PAGE APPLICATIONS
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 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 be found worthy.
# Contributors on GitHub: 1,336 (as of September 2019)
# Library size: 100KB
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.
# Contributors on GitHub: 281 (as of September 2019)
# Library size: 80KB
Recently, we wrote an article about React.js vs. Vue.js
SINGLE-PAGE APPLICATIONS AND ASP.NET (BLAZOR)
We decided to add the ASP.NET option to the list of frameworks and technologies for the 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.
.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 single page application in ASP.NET MVC? You set it up on the backend to serve the HTML on the frontend.
# Contributors on GitHub: 67 (as of November 2019) + .NET contributors of 60K+
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).