If you want to create a web app, you have to decide what it is going to be like. And it's not only about functionality but also about the development approach.
As it happens, in addition to traditional multi-page resources that you probably know very well, there're single-page applications either. Being built on a different principle, they’re in some cases the best choice (although by no means always).
Let's discuss this topic in order. We'll look at the pros and cons for SPAs and MPAs and figure out your perfect business strategy.
So, single-page apps versus multi-page apps... which one is better? What should you choose?
History of Different Types of Web Applications
Web applications are becoming more and more popular. Being located in the cloud, they function seamlessly on all devices, which is convenient for the user.
Traditionally, web apps link together several static pages, and when the user moves from one to another, the content is completely updated. This is the so-called MPA model, which we’ll discuss below.
At first, everyone was happy with such an approach, but later some problems emerged. In particular, it was discovered that if an application was processing too much data or had a complex user interface, it slowed down. Developers did their best to fix the situation, and in the early 2000s, they improved multiple-page applications using AJAX, which allowed updating the content partly. Thus, the performance of the website had been improved, but not without side effects (among other things, the online page had become more complicated).
After 10 years, the SPA pattern was created, which was an evolution of the “MPA + AJAX” pattern. SPA requests the page layout and data separately and renders the results directly in the browser. All this became possible thanks to new front-end frameworks (AngularJS and the like).
And now let's discuss both types of web applications in more detail.
What Is a Multi-Page Application (MPA)?
We're most familiar with multi-page applications or websites, we deal with them every day, all the time. And their functioning principle is clear to us.
Multiple-page application architecture
As we explained, these web applications are more traditional in architecture. When a user clicks on a link to another page, the latter sends a request to the server and completely refreshes all data, even if there is very little of it. To be precise, each request leads to a 100% page reload. As you can imagine, it affects the speed and performance of the resource.
Surely, developers are finding ways to somehow improve the situation. Among others, they use different JavaScript/jQuery tools to reduce the load on the site. One example is online store filters: when a user sets his wishes for the search results (let's say, he specifies the brand, color, size of the desired item), the product list is updated without reloading the page.
Alas, not each problem can be solved so easily. Therefore, sometimes developers decide to build a single-page application.
However, let's discuss the advantages and disadvantages of this type of apps in order.
Pros and Cons of Multiple-Page Applications
We’d like to start with MPA pros:
-
Easy SEO optimization. The main advantage with a multiple-page architecture is the ability to effectively optimize the SEO resource. The fact is, search engines were originally adapted for indexing multi-page applications or websites. So each page can be optimized for a specific request, which is problematic when making SPAs.
-
Habitual interaction. Users are accustomed to sites with such an interface since it has classic navigation. In particular, it is possible to save links to pages of interest in bookmarks and share them seamlessly with each other.
-
Google Analytics data. To ensure the success of a web application, you need to constantly analyze user behavior and adjust your business strategy. And Google Analytics is irreplaceable in this regard. Luckily, MPA resources are well compatible with Google's analytical tools (as opposed to websites as SPAs).
-
Scalability. The MPA architecture is ideal when it comes to online platforms with multiple sections.
-
Lots of development solutions. There are many out-of-the-box solutions, which allow you to create MPA with maximum ease (such as e-commerce-focused Magento).
Now we’re ready to discuss MPA cons. They include:
-
Low resource performance. As the content is constantly reloading, the speed of the web application slows down, which degrades the user experience.
-
The complexity of development. The backend and frontend are closely related, so it's impossible to work on these parts of the web app in parallel. In addition, one has to use frameworks both on the client and server sides. All this complicates and lengthens the website creation.
-
Difficulty maintaining a resource. Developing and updating large multi-page websites is an uneasy task. You'll have to invest a lot of time, effort, and finance.
Now let’s discuss a single-page application concept.
What Is a Single-Page Application (SPA)?
A distinctive feature of SPA is that such a web application is 100% interactive, although it is located on one page. Let’s say, an online information resource might consist of one page too but it doesn't mean it has something to do with SPA.
Here's an example to convey the idea of a single-page app. Imagine the following picture: you go to a website, open one of its tabs, and wait for it to load. Realizing that this isn't the page you need, you go to another and wait again. Annoying, isn't it? So, the SPA helps to solve the problem.
The SPA concept implies that the user stays on the same page, switching between tabs. The content of the resource is only partially reloaded, and the site works faster.
Languages in which SPA is written
The main language to make an SPA is JavaScript. If it's about a small resource, then the jQuery library will come to the rescue. However, if your project is larger, we recommend using other frameworks including React and Angular.
Single-page application architecture
As we've already explained to you, the SPA architecture is designed in such a way that when you go to a new page, only part of the content is updated. Some elements are always the same and don't need to be reloaded every time.
Wondering what makes this possible? Let's explain to you!
The point is, when the website is first loaded, the server sends all the required code to the computer (or another device). Further interaction with the server occurs through AJAX requests, and the page layout is being generated on the client-side. So the content can be updated without a full page reload.
In other words, after the first page load, the user receives only the data itself from the server, and the data view comes from the cache.
How does a Single-Page Application Work?
In the case of traditional MPAs, the user opens a new page to access its content. But when it comes to SPA, the situation changes, and users interact with different states of the same page.
Single-page application techniques allow specific elements and modules to be loaded asynchronously (namely, on demand).
Pros and cons for SPAs
As always, let's start with the good and tell you about the key advantages of single-page apps:
-
Positive user experience. According to statistics, almost 50% of users expect that each new online page will load no longer than a few seconds. A 1-second delay reduces conversions by almost 10%. And SPAs are able to solve the problem because the application's response to user actions is instant in most cases.
-
Processing large amounts of data. The size of the application and the amount of data it processes aren’t limited by the device memory.
-
Offline mode. Of course, the user won't be able to get new data in the absence of the Internet, but he'll have a chance to work with information that has already been downloaded earlier and is stored in the cache.
-
Higher productivity. Also, when comparing SPAs with the traditional multiple-page approach, don't forget that such web resources work much faster. This is due to the following:
-
SPA updates only part of the content, which reduces the load on the server;
-
The layout is being processed by the client device instead of the server.
-
-
Less development time. There are many web application frameworks and libraries for making single-page applications. Besides, back-end and front-end developers may work on a project at the same time (which isn't the case when it comes to MPAs, as you probably remember).
-
Affordability. The above point leads to lower development costs (not always, but in some cases). However, later we'll tell you more about the cost to build an SPA website. So keep reading.
-
Cross-platform approach. SPAs are supported by different browsers and work great on any operating system, which is wonderful news, isn't it?
-
Good data caching, which is the last but not least item on our list.
The SPA type of apps has its cons too, we can't escape it, alas:
-
Poor SEO optimization. Search engines don't work well with SPAs and scan their content poorly. The result could be bad organic traffic, which is unacceptable for many resources.
-
Disabled JavaScript. Some users disable JavaScript on their browsers, which means the SPA won’t be able to operate properly.
-
The duration of the initial download. As we explained to you earlier, everything needed to get the portal to work, including scripts and styles, is loaded immediately. Consequently, the initial loading of the online resource may take longer than desired. However, this disadvantage will be compensated for later when the user navigates between the website tabs.
-
Browser history. If a user navigating the SPA tabs wants to go back a step and clicks the corresponding button, the browser will take him to the previous site page (the one loaded earlier) instead of the previous SPA state.
-
Analytics issues. Google Analytics processes the data it receives on every new page load. As you understand, this won't work with SPA. Therefore, it won't be possible to collect statistics - at least, not efficiently.
-
Security problems. SPA is quite vulnerable to cross-site attacks (XSS). The problem is solvable, though, you just need to know about it and prepare in advance.
We've discussed the pros and cons for SPAs and could move on to the next topics. But first, we'd like to touch upon another issue, which is closely related to single-page applications.
Progressive Web Application (PWA)
PWA is the next level of SPA development (although also not devoid of disadvantages). PWA can do everything that SPA is capable of and has a few more cool features.
Most importantly, you may install the PWA on your phone and run it the traditional way, from your desktop screen. Roughly speaking, you have not just a website, but a real cross-platform mobile application! It even works offline (with some limitations).
PWA pros:
-
Intuitive interface. The user doesn’t feel the difference between a PWA and a regular mobile application.
-
Any device support. When discussing the SPA type of apps, we talked about their compatibility with different devices, but PWA is even better in this respect. The developer only needs to create one program, and it'll work on all platforms.
-
Security. PWA works exclusively over HTTPS protocol, which makes these services much more reliable.
-
Interactive features, such as push notifications and geolocation.
-
Offline access. Most of the functions are available even without the Internet (those that don't need updated data).
-
Convenient link exchange. A link to a PWA application can be easily shared (which is difficult when it comes to a single-page application).
PWA cons:
-
Lack of support on older smartphones. Let's say users of iOS 11.3 and below won’t be able to enjoy PWA features;
-
High battery consumption, which is also a disadvantage;
-
No access to some hardware resources of devices, including Bluetooth. On the other hand, there is hope to expand the capabilities of these applications in the future.
SPA or MPA?
Both multi-page and single-page application architectures have their pros and cons (which you obviously already understood from our article). The final choice depends on the specific project.
So let's reason. SPA is fast and offers the ability to seamlessly create a mobile application using ready-made code. On the other hand, it has poor SEO optimization. Thus, SPA architecture is an excellent choice for projects with complex interface and functionality, such as:
-
all kinds of SaaS platforms;
-
social networks (Facebook or Instagram clones);
-
corporate software;
-
various sections in multi-page sites;
-
closed online communities where search engine optimization doesn't matter.
On the other hand, if your company provides a large number of products or services, you need to use a multiple-page application architecture. It is good if you have...
-
online store;
-
information resource;
-
catalog;
-
online marketplace;
-
business platform.
But remember, although the MPA can be optimized to make the resource work efficiently, you won't be able to build a mobile application as easily as you would in the case of SPA development anyway.
How about a hybrid web app?
You may have an idea to combine MPA and SPA architectures (although SPA, as you remember, has become a kind of new stage in the development of MPA applications). Why not, after all?
Well, such an option is quite possible, but you need to be clearly aware that you run the risk of creating an application, which has flaws of both patterns. Among other things, the web app can turn out to be slow, since some of the pages will have to be generated on the server, and to implement the SPA part, you'll need to install client frameworks.
But the idea to combine both types of web applications isn't as bad as it might seem. Such an approach is sometimes implemented in practice to varying degrees. For example, the main part of the resource can be multi-page, while the personal account is based on SPA. However, this is by no means a full-fledged hybrid of SPA and MPA.
But still… Let's be specific. What should you choose in the end?
Summarizing what to choose
The choice of SPA is advisable if:
-
your project is a multifunctional site with a rich user interface;
-
you’re interested in an API for using ready-made blocks to build an application;
-
SEO optimization isn’t a priority.
The choice of MPA is advisable if:
-
your application is primarily focused on reading information;
-
you’re selling products or providing services online;
-
your web app is likely to run in browsers without JavaScript support;
-
you cannot do without SEO optimization.
How to make an SPA or MPA
The main development stages include:
-
Drawing up a requirements specification. Describe what you want to get in the end, how you want to see the finished product. You must clearly define your ultimate goal.
-
Budgeting. Digital development is expensive and you'll have no choice but to fork out. So determine in advance what funds you have on hand. Maybe you have to find investors, what do you think? Or is it worth seeking help from crowdfunding? Consider all your options.
-
Hiring a development team. Now you need to hire a team of developers and designers. Make sure they're qualified and experienced and you understand each other.
-
Working on a web application. Instead of describing all the stages of development, we'll just say that sometimes it's better to start by creating an MVP (minimum viable product). MVP is a cheaper version of your resource, which allows you to get feedback from the users. Subsequently, you'll be able to improve your product without risks and additional costs.
-
Testing. Of course, you'll also need to test your web application at every stage of MPA & SPA development. This is the only way to ensure your product is going to perform flawlessly.
-
Application launch. Quite an obvious step in the creation of any digital product, right?
-
Improving the project. A web application resembles a living creature that must constantly evolve. And you should help it by updating its functionality and expanding its capabilities.
What kind of specialists do you need?
-
Project Manager to organize the work process;
-
UI/UX designers to create a user-friendly interface;
-
Front-end developers. They’re working on creating the client-side of the application;
-
Backend developers who are responsible for server development;
-
QA engineers who must constantly test the product.
But if you want to build a single-page application, there are a few more important things to consider:
-
In the case of SPA, the client-side usually contains not only the UI but also the application logic. Accordingly, you need very good front-end developers, JavaScript specialists.
-
Sometimes the logic stays on the server-side (albeit less often). The approach relieves the load on the client-side but provides fewer other benefits.
MPA & SPA development costs
Development costs depend on the following:
-
The number of features you plan to implement;
-
Possible integrations with third-party services;
-
Application complexity level;
-
Developers' rate.
A web application can be as complex as you like, which means it's impossible to give an exact project price. But we'd like to tell you what to focus on when forming a budget:
-
In some cases, the cost to develop a single-page application can be comparatively low, provided the mobile service has a simple structure. Its creation would take about a month, and the cost could reach $ 4.5K. Though, if we're talking about a more complex platform (say, a SaaS type), development takes at least six months, and the project price might reach $ 30K or even higher.
-
Multi-page applications or websites, on the other hand, are almost always complex in functionality, and creating them is a time-consuming and costly task. So get ready to pay between $ 30,000 and $ 50,000 (sometimes more).
To provide more accurate data, we need to know what type of resource you have in mind.
Single-page & Multiple-Page Application Examples
And now we’re going to give you some real-life examples of SPA and MPA.
Single-Page Application Examples
-
Gmail, which is one of the world-most famous email services from Google. It is SPA-based, so you just have to wait for your email to load the first time, and then you'll move between its sections without any delay.
-
Netflix. Even if you yourself have never used Netflix, you could not help but hear about it. Netflix ranks among the best entertainment streaming media services and also operates on the SPA principle.
-
Twitter. Another example of SPA is Twitter. As a user, you may visit the Twitter home page, view notifications, and scroll through the news feed without having to wait for the page to reload every time.
Single-page application examples also include Google Maps, Pinterest, and Facebook.
All of the web apps we've listed could do even without SEO optimization. However, not each resource would be able to afford it.
Multiple-Page Application Examples
We explained to you that if your project is related to the sale of goods or the provision of services, then it is better to create a multiple-page application. That's why e-commerce giants such as Amazon and eBay are among the MPA examples.
They chose this development model in order to fully leverage the SEO tools and be able to continually scale their project.
Summary
As you understand, it all depends on your business and its goals. You must analyze your project and only then decide which development approach to choose.
