Single-page applications, or SPAs, have created a lot of buzz around the internet. Writers have gone into battles of words comparing SPAs with the traditional multiple-page approach. This dispute has turned into a struggle akin to iOS vs Android.
We’ve decided to also add fuel to the fire and investigate this topic. Our aim is to find out why more and more companies prefer SPAs, to consider cases when it’s best to use an SPA framework, and to compare implementation costs of SPAs and multiple-page applications (MPAs).
Google, Facebook, and Trello use single-page apps
A single-page application is a web application that fits on one HTML page. This page can be dynamically updated, but it never reloads the whole time a user is interacting with it. Using an SPA, you can manage most interactions on one web page for dynamic updates.
Where can you see SPAs? You deal with them every day when checking your email on Gmail, scrolling your news feed on Facebook, or adding a new task in Trello.
[Image source: Trello Blog]
Do you remember the last time you used a Google Doc? Yes, Google Docs are SPAs too. When you click on any element of a Google Doc, type something, or perform any other action, the main interface remains untouched. Nothing but the chunk of content you want to alter is modified. This is the main idea of a single-page app.
[Image source: Chrome Webstore]
Most promotional websites and landing pages are also just one page. CashNotify is a good example of a landing page built on an SPA framework. This website promotes the CashNotify app (a macOS taskbar app for Stripe payments) and lets users buy the app:
Utilities, namely URL shortening sites, are also commonly single-page apps. The Google URL Shortener is a good example.
Single-page applications provide a more fluid and responsive experience. But how? To answer this question, let’s examine the pros and cons of single-page applications.
Reducing response time and hardware costs with SPAs
Single-page applications try to solve the problem of poor performance and increase conversion rates. They can drastically save on hardware costs and much more. Let’s investigate all the benefits SPAs can bring.
Speed and responsiveness
With single-page apps, a server doesn’t need to reload most resources such as HTML, CSS, and scripts with every interaction. These files require only initial loading. After that, only new data is downloaded from the server. Additionally, SPAs reload only pieces of content, so they have a lighter server payload. This is why SPAs allow fast interactions in an app.
SPAs also reduce response times thanks to moving data processing from the server to the browser.
An SPA brings you considerable relief when developing a mobile application: you can reuse the same backend code from a web-based SPA for the mobile application. That’s quite hard to do with a multi-page application. Additionally, SPAs look and feel more like an application than a website, so you don’t need to specifically adapt an SPA’s design or functionality for mobile devices.
You can totally rewrite the frontend of a single-page application with no influence on the server except for some static resource files.
Offline support and caching
Single-page applications can cache to any local storage with dispatch. An SPA sends one request to a server and then stores all the data it receives. The application can use this data. This is why an SPA can operate even offline, unlike an MPA, so you can keep using it even if your device loses connectivity. Whenever the connection comes back, the local data will synchronize with the server.
Ability to separate data and UI
SPAs are able to distinguish between data and the user interface. This can considerably help to streamline testing when developing a web app. Moreover, such a distinction allows you to handle all future integrations and possible changes in how data enters the SPA framework and goes to other systems without massive implications for the interface.
Debugging with Chrome
Of course you can debug multiple-page applications with Chrome, but with SPAs it’s much easier. There are several reasons for this. First, you can see all the code at once, as it’s located on one page. Second, SPAs are developed on frameworks that have their own Chrome developer tools such as React developer tools and AngularJS Batarang.
[Image source: Chrome Webstore]
SPA drawbacks – but not ones you can’t beat
Every new model has its drawbacks, and single-page applications are no exception. There are areas in which they lose to multiple-page applications.
Why don’t SPAs get on with SEO? Definitely, an SPA has a far smaller semantic kernel than an MPA. No matter how hard you try, you can put only a limited number of keywords on one page. For this reason, you should thoroughly consider what content best matches your users’ requests. Besides, single-page apps give you the chance to leverage rich internal anchor text links, tags, and meta descriptions.
Nevertheless, you can handle these problems with SEO. Search engines give higher scores to domains devoted to one theme, so you can make your single-page website 100% thematic. This will help you overcome problems with SEO and hold the top spot.
A memory leak is the loss of available computer memory. In SPAs, memory leaks can happen due to event listeners. Listeners, also known as event handlers, receive event notifications from an event source. By event, we mean any action recognized by the software, such as a keystroke or a mouse click.
Sometimes events can be unbound incorrectly. How does that happen? An HTML element can be bound to an event. But if you modify the HTML content, the event handler stays in memory though you can no longer execute it. The browser doesn’t remove this event handler, so you need to do it on your own with the help of RequireJS, module loading, or by closing all events properly.
Some people underline the insecurity of SPAs due to cross-site scripting (XSS). With XSS, attackers can exploit a vulnerability of a web page and insert their own client-side code. This lets attackers deliver a malicious script to a victim’s browser.
But actually, you can handle this problem as well.
Lack of scalability
We can barely call single-page applications scalable. With the traditional approach, you can create new content and split it across new pages. But with a single-page app, it’s much harder to add more to your site. If you put too many features on one page, it’ll cause a longer loading time. Facing this problem, some companies have to fully redesign their websites.
Single sharing link
With SPAs, you only have a single URL (i.e. there’s only one link to share on social networks). This makes it impossible to share a specific piece of content.
Back and forward browser buttons don’t work
Back and forward browser buttons don’t work with single-page applications. Whenever visitors click the back button, the browser will actually transfer them to the previous page that the browser loaded but not to the prior state in your application. You can handle this problem with an HTML5 History API. The good news is that many modern SPA frameworks are fitted with this API.
Wrapping things up
When choosing between an SPA and an MPA, consider the following:
What your website will do
How much information you’re going to post for your users and what type of information it will be (Does it involve interactive content?)
What your site will look like and what the main elements will be
What benefits your content will offer to users
As a general rule, single-page applications work for single-product or single-service companies, though they’re unlikely to meet the requirements of any complex provider. If you have a large business that provides many services or products, such as eBay, and want more opportunities for your users to interact with the site, you’d better choose a multiple-page approach.
On the other hand, a single-page application can be a magic wand if you want to considerably cut hardware costs or if you need offline processing – to throw a life jacket to your visitors during server outages, for instance.
We’ve provided you with a detailed list of pros and cons for SPAs and considering use cases for each approach. This data will help you choose the right approach for your website and will help you calculate your budget.