Product Strategy
Single-Page Application vs Multiple-Page Application: Which One To Choose For Your Project
In this post I’m going to break down EVERYTHING about single-page application vs multiple-page application.
So if you are looking for a DEEP comparison of these two types of web applications or websites, you’ve come to the right place.
In this post, you will learn which projects are better to develop as a single-page application (SPA) or multiple-page application (MPA). You will see what single-page applications have in common as well as multiple-page applications and how to improve them.
In this post I will cover:
- What Is a Single-Page Application?
- What Is a Multi-Page Application?
- SPA vs MPA – Which One to Choose?
What Is a Single-Page Application?
A single-page application (SPA) is a web application or a website, which is able to dynamically rewrite a web page in a web browser instead of loading the entire page every time in response to user actions. With that being said, user actions such as clicking on certain buttons or links don’t force the page to reload in web browser.
SPAs are able to dynamically rewrite web page content through JavaScript’s ability to manipulate the elements on the existing page. In contrast, multi-page applications or websites load entirely new pages in response to user actions.
If definition above is still confusing, it’s best to explain by giving an example. Let’s start with a traditional multiple-page application. As you interact with Amazon website, url address changes in web browser which cause entire web page to reload. On the opposite, when you interact with LinkedIn website, a web page content changes, but web browser doesn’t reload the web page. A web page is reloaded when circle spins in Google Chrome’s URL panel, or a dot moves in Firefox.
A single-page application loads only the requested content. This would result in much faster communications and content reloading. In multiple-page application, the user is forced to wait for the page to load, even if most of the page’s content remains the same.
How does a Single-Page Application Work?
When a user requests (opens) web application or website in a web browser, single-page application loads all necessary HTML, CSS and JavaScript files to bootstrap the web page.
Once a single page application is loaded, it can dynamically transfer the content from the server using AJAX requests or WebSocket. Data is returned from a server usually in a JSON format, which is processed by SPA. This allows the browser to make requests to the server to transfer new or additional content without changing the current web page. In addition, HTML5 History API allows us to modify a website’s URL without a full page refresh.
Single-Page Application Examples
Let’s take a look at the most popular web applications and websites, which use single-page application techniques to improve the application’s performance and overall user experience.
I am going to present web applications, which don’t need to be necessarily single-page applications. These applications are complex and I don’t know all their parts, URLs and interactions. Thus, I can’t evaluate their overall architecture. However, I am going to emphasize their specific parts, which are very common in single-page application architecture.
Gmail
Gmail is one of the most popular email services developed by Google. Interacting with Gmail is engaging and smooth. As you can see in the video above, you can view your inbox, compose new email message and search very fast without reloading the page. When I use Gmail, I feel very productive. Gmail’s user experience is strong competivive advantage compare to other email web services.
Facebook newsfeed feature allows users to consume content in a creative way. Users can interact with newsfeed and watch video on it, without reloading or leaving the feed page.
Spotify
Spotify is an audio streaming platform. Its web application allows users to interact with playlist, search songs and listen to audio tracks simultaneously.
AirBnB
Booking stays through AirBnB is very fast and smooth. Users don’t see any delays between loading different pages.
Trello
Trello is a visual collaboration tool where you organize your projects onto boards with lists and cards, which represent tasks. You can create and edit lists, cards, search without page reload. Productivity is critical, especially for tools used for collaboration and management. Trello would loose this advantage with a multiple-page architecture.
Evernote
Evernote is a SaaS designed for taking and organizing notes. You can see their web application in the video above. Making notes is very fast and productivity is important for note taking applications.
Google Maps
Google Maps allows users to scroll map, view details and planning routes. Interacting with map is smooth and whole user interface is very user friendly.
Slack
Slack is popoluar collaboration tool for instant messaging. As you can see in the video above, Slack provides seamless user interface. Productivity is very important here and most of the times users don’t notice any delays when they interact with Slack application. Before Slack, there were a lot of instant messaging applications and collaboration tools. Slack added new features such as channels, threaded messages and more. They have a lot of competition and wouldn’t be successful without fast user experience.
Single-Page Application Advantages and Disadvantages
Performance & User Experience
A Single-page application doesn’t reload the entire page, only required parts of the page. It significantly improves application speed and makes seamless user experience. As users navigate through web application, most of the resources such as CSS and JavaScript files are downloaded only once, and don’t need to be reloaded during the usage.
Only data that are transmitted to and from the server changes. This decreases the server-client traffic and makes single-page application faster to user requests.
Single-page applications are faster and more responsive than multiple-page applications.
Adaptability & Portability
Single-page application is highly decoupled between client and server and their source code is separated in different projects. If the server part (back-end) of a web application is a separate project, you can use the most of the back-end code for desktop, web or mobile application. The separation between front-end and back-end gives you better ability to use a serverless architecture instead of building back-end from scratch.
Single-page applications are significantly easier to port from web to mobile or a native application and vice versa.
Price & Complexity
Single-page architecture is younger than multiple-page architecture and more challenging for several reasons. There were a lot of JavaScript libraries for making single-page applications and some of them were evolving very fast with a lot of changes. New versions introduced new concepts and drastic changes in existing applications. If software engineers start making single-page applications, they didn’t know which libraries to use and didn’t know best practices for developing single-page applications. This led to single-page applications, which didn’t work and took a long time to develop.
It’s not surprising that achieving search engine visibility SEO can be challenging. There are libraries, which help you to make your single-page application available for search engines. However, if your single-page application’s content is changing dynamically, you need to use server-side rendering for your single-page application. It can be very challenging even for a developer who has experience with single-page applications.
For these reasons, many software developers, especially back-end developers started hating single-page application concept. I came across a lot of single-page applications, where I see the same mistakes over and over again. I can’t blame unexperienced developers for doing these mistakes, because they can avoid them only after some experience. For this reason, I decided to start writing an ebook Single-Page Application Best Practices. It is not finished yet, but I can send you a free copy when it is done.
How to Build a Single-Page Application?
If you decide to build a single-page application, you can choose among many JavaScript libraries. Back in the day, all these JavaScript libraries were new and nobody knew which one to choose. You needed to do a lot of research to make the right decision. Nowadays, this is not an issue anymore because only a few of these libraries are accepted as the right choice for building single-page applications.
There is one golden rule, which says you should always choose a proven technology. If you choose the most popular library, you can benefit from a lot of existing libraries and reusing many UI components. I am not going to do a deep comparison of JavaScript libraries, because it would be topic for another post. Currently, the most popular libraries are React, Angular and Vue.
What Is a Multi-Page Application?
A multi-page application reloads the entire page and displays the new one when a user interacts with the web application. With that being said, user actions force the page to reload in web browser. Even if changes between pages are small, the browser reloads the entire page.
You can see this behavior in multiple-page application examples. When you interact with website and want to display a new page, the browser reloads the web page.
How does a Multiple-Page Application Work?
First web applications were developed as multiple-page applications because Ajax hadn’t existed yet. When a user interacts with a web application, which sends requests to the server, each response is the entire HTML file along with necessary CSS, JavaScript and image files.
Multiple-Page Application Examples
In this section, you can see how multiple-page applications work. These applications probably use single-page techniques in some parts, but their main architecture is multiple-page. I wanted to focus on their multiple-page behavior, where you can see how transitions between pages are delayed and browser reloads each new page.
Amazon
Amazon is probably one of the most complex e-commerce stores. When you navigate through store categories and item details, you can see how browser is reloading.
Medium
Medium is popular blogging platform. In the video above you can see interactions when users want to add a comment and see others comments. You can see the delays between loading pages, because these interactions are developed as multiple-page. These interactions could be developed as single-page and be more user friendly.
Delta
Delta is one of the major airlines of the US. You can see a long delay between each booking step. When you set up booking parameters and hit “search”, you can compare the delay on Delta’s website with AirBnB’s website. I am not sure if I had ever seen an airline company using a single-page architecture. I wish booking flights was more user friendly. If you know about airlines companies using SPA and seamless user experience, please comment this post.
IMDb
IMDb is an online database of information related to films, tv shows and actors. When you navigate through website, you can see how browser is reloading. Would be nice to watch a trailer and read information or reviews about a movie, but this is not possible with multiple-page architecture.
Multiple-Page Application Advantages and Disadvantages
Performance & User Experience
If you take a look at BitSight’s case study, there is no doubt that single-page applications are more performant than multiple-page applications. However, users can’t notice a big difference in small projects with few elements. On the other hand, you can see a difference in bigger projects, for example in the booking process on AirBnB and Delta Airlines. There are project, where user experience is important and in this case, multiple-page architecture is a disadvantage.
Adaptability & Portability
A multiple-page application is highly coupled between client and server. It is usually one big project, which contains front-end code and back-end code. If you want to separate them later, it’s more complicated than in single-page architecture and it makes native or mobile application harder to develop.
Price & Complexity
Multiple-page application architecture is more established in software development than single-page application architecture. When software engineers or web developers learn to build web applications, they start with traditional request-response model and multiple-page architecture.
Achieving search engine visibility in multiple-page applications is by default without any obstacles. The reason is that search engines use web crawlers, robots who try to navigate through the whole website and visit every page to index all pages in search engine. Web crawling and automated testing are more challenging in single-page application architecture, where users interactions change content of a single web page. There are solutions for making single-page applications visible for search engines, but the price is more complexity in your project.
Multiple-page applications are cheaper to develop. You can find more developers, who are able to develop multiple-page applications than those ones who are able to develop single-page applications.
How to Build a Multiple-Page Application?
Almost every back-end language has more than one framework for building web applications. This choice should be based on the problem your project is solving and you can find more info on this topic in my previous post. Choosing the right back-end language is more important than choosing a JavaScript library for building single-page applications. The wrong choice of back-end language can lead to very poor performance or dysfunctional product.
SPA vs MPA – Which One to Choose?
If you take a look at single-page application examples and multiple-page application examples, you can see similar behavior of these applications in both groups.
In the first group where are single-page applications, users interact very frequently on a single page. Productivity is one of the most important aspects of applications used for example in collaboration. In the second group, where are multiple-page applications, users don’t interact a lot on a single page. They usually need to consume content and do some simple tasks.
However, we can find web applications, which don’t need to be necessarily single-page applications or multiple-page. As an example, you can see this as a searching process on AirBnB and Delta Airlines. AirBnB decided to develop this process as convenient as possible for users and they chose a single-page architecture. Delta Airlines and most airlines chose traditional multiple-page architecture, which is not so efficient as you can see in the example. Choosing to develop a single-page application vs multiple-page application is more subjective in this case.
What to do if you want to achieve interactivity only on specific pages? You don’t necessarily need a single-page application, but you want to achieve some interactivity on specific pages. In this case, you can decide to develop multiple-page application and use single-page application techniques only on some pages. For example, Phoenix framework introduced a LiveView concept. It allows you to develop real-time interactions on a single page using WebSocket without using JavaScript. However, if you develop single-page applications, you can reuse a lot of JavaScript components and in LiveView concept you need to develop UI components from scratch.
There is a lot of web applications where search engine visibility (SEO) is important and content of web application is dynamic. Let’s say you want to create a marketplace where people can list their products. If you choose single-page architecture, you would need to use server-side rendering. Developing single-page applications that support server-side rendering has specific rules and only experienced single-page application developers are able to develop it efficiently.
Trulia is a real estate marketplace. Its content is dynamic and should be visible for search engines. This marketplace wants to provide a fast user experience and they chose single-page application and server-side rendering. You don’t need to be one of the biggest IT companies to build a solution like this, but building it as a multiple-page application would cost less.
A lot of Content Management Systems were built when single-page applications didn’t exist. They provide a lot of tools to build websites based on common requirements and easy to manage. In most cases, static websites and e-commerce stores are much easier to develop using a robust CMS with multiple-page architecture instead of building it as a single-page application from scratch. They are mostly static and you can add interactivity on specific pages later.
We can see that amount of single-page applications is increasing, and many applications transfer from multiple-page architecture to single-page architecture. Even if web applications are developed as multiple-page, they use single-page techniques to be able to dynamically change content on a single page. We will see this trend more often in the future.
If you want to build an MVP, you can decide using a serverless architecture, which can significantly streamline the development process. In this case, it doesn’t make any sense of building a multiple-page application.
You can develop your multiple-page or single-page as a Progressive Web Application (PWA). It allows you to cache some parts of your application in web browser and access device features such camera, GPS, etc. PWA is a useful concept, especially for mobile websites. You can see here a list of Hacker News readers developed as PWA with JavaScript libraries for building single-page applications.
Conclusion
In this post, you can find an explanation of what is a single-page application and how it works. Then, you can find what is a multiple-page application. This post contains a single-page application and multiple-page application examples and their advantages and disadvantages. Each example is commented and later you can find a comprehensive description of MPA vs SPA and how to improve them.
Unfortunately, single-page applications were disliked by many developers. It was caused by rapid evolution of JavaScript libraries in early versions. In the future, we will see an increasing trend of building web applications with serverless architecture and this will be the reason why we will see fewer multiple-page applications.
I hope this post is helpful and you found an answer what’s the difference between single-page application vs multiple-page application and which one to choose for your project. I would love to hear from you if you think something is missing in this post. Did I miss anything in this comparison SPA vs MPA?