User experience is often perceived as a playground for designers. We all know it matters, and we should pay attention to it. But could it be we that we start thinking about it too late? Short answer: totally. On our journey to discover the best practices of product development, we can’t ignore such thing as single page web applications.
The concept of SPA itself evolved from an idea that user behavior highly depends on product architecture and responds to technical features of an app, which may and should be improved.
In today’s article we will be looking at what is a single page application, how they are different from conservative multiple page application designs, which alternative solutions they offer, debunk some myths and try to answer your silent question whether it’s a good idea for your project to choose SPA over MPA, or otherwise.
Single page application vs Multiple page application
The traditional way to build a web application is to go with a familiar architecture of an MPA. The name of such approach speaks for itself and all of us, who know at least some basics on how websites work, are perfectly familiar with the idea behind it: the apps consist of several different pages, which get updated upon request.
That means that your browser reloads the complete page from scratch every time you are trying to access new data or reach another part of the website you’re at.
This leaves us with the fact that except the design familiar to every Internet user, we are at the same time are limited by the fact that working with a multi-page web app is going back and forth between our end user’s browser and a server with HTML requests and responses. It is a traditional technology used from the very first days of the worldwide web until this day.
As you see, when we’re talking about a conservative approach to building web applications, we have to realize we’ll need to deal with a roadmap that has a few bottlenecks.
Why are these important? Because even back in 2009 the universal standard for a page load time was considered to be 2 seconds. Do I have to mention that since then users expectations have grown even higher?
And here’s how load time perception looks like now:
In other words, here’s how the web app performance is seen by users:
- 0.1-0.2 seconds – such immediate response let’s user consider an app to be an extension of themselves.
- 1 second – user begins to notice the delayed response and separates from the experience
- 10 seconds – they will get distracted and will be already thinking about something else and are likely to leave and forget about your app
But what’s that 11.8 seconds point on our timeline then? That is the average page load time for websites across the web. Needless to say, we’ve got room for improvement.
Now, if we look at the traditional workflow of the multiple page applications, we will notice there are too many bottlenecks that could weaken our performance at any point of the process, beginning with the network latency affecting the speed of data transfer and off to the lags in server or database processing.
Naturally, we grew a need for a better solution, that would eliminate at least some of the weak spots. The simple solution was to move as much action to the users’ browsers as possible.
This is the moment when the single page application architecture comes into play. The main idea behind SPAs is to avoid reloading the whole page, but instead rewrite a particular spot on the current page using AJAX requests.
Rendering only the necessary updates instead of reloading the whole page is what makes single page application performance truly stand out.
Building a single page application – advantages, myths, and pitfalls
Of course, there are pros and cons to every solution. SPAs are not exceptional to this rule. While we do acknowledge the criticism that surrounds this concept, in this article, we would like to focus on the benefits of single page application design and point out the ways to overcome the limitations which should not be ignored.
The most distinct feature of SPAs in terms of UX is the similarity of the experience to the native desktop apps the users are used to. The integrity and seemingly flawless responses make that feeling even stronger.
Due to fundamentally new approach to the architecture of such applications, browsing the app no longer requires reloading multiple pages, providing us with minimum disruptions while working with an app.
The reason this issue appears is that a browser’s back button manages the history of URLs and not the state of the application you’re using. Accordingly, instead of showing a previous screen of a single page app which is typically located entirely within one URL, your browser will redirect you to the previous URL you’ve visited.
The solution to this problem is surprisingly simple: to manipulate the URLs using history API. There are a few methods you can choose from, but the idea behind them is pretty much the same – to call out events based on user’s actions or location on a page and apply changes to the URL adding a specific hash. Since the URLs are now constantly changing, we will now be able to go back, forward, or share the exact spot they’re on with others.
Here’s an example of a hashchange event used in Gmail which you can even check out on your own:
Being a single page application, Gmail does not send you to a new page every time you perform an action. Instead, they implement a hash route that enables all the navigation you’re used to within their app.
We are not going to deny that difficulties with SEO optimization were a huge pain point for every online entrepreneur who considered building a single page app. The reasoning behind this is bound to the algorithms of web crawlers used before this new development approach was introduced.
Put in simple words, search engines have processes called web crawlers that visit the URLs on the web. Once they are on your website, they are determined to visit every URL you have there, index the pages and then go on and visit other links found on those pages:
This problem was mainly solved by the search engines themselves. What they now do when visiting URLs with hashtags is remapping and request a new page from your servers:
The only thing you need to do is to respond to such request a web crawler makes, and give them a page with an SEO-optimized content.
Following such pattern can not only solve the issue but also gives you a considerable advantage of not having to find the middle ground between a heavily SEO-enhanced text and human-friendly copies because the pages you will be feeding to a crawler won’t be the same your visitors see.
Majority of trained developers on your way will have more knowledge and hands-on experience with traditional MPA patterns. For obvious reasons. On the other hand, if you decide to build a single page web application, it may turn out to be a more straightforward, faster and less complicated way to approach your end goals due to design approaches which are used as best practices while developing SPA applications.
Another advantage of SPA over MPA is reusable backend code. This is the most important thing you should know while choosing between two, having in mind a project that requires both web and mobile applications. Reusable code means less work, less work – less development costs.
In long-term scenarios, another thing you want to keep on the table is your product vision. SPAs are best suited for the defined and polished ideas and project with a narrow focus. If you’re not sure one page is enough for your business, is it worth trying to fit into a box that’s too tight for you? MPAs are more flexible in terms of adding new pages without breaking any architecture. Just don’t forget: the ability to add a new page doesn’t always mean you should.
Examples of single page applications
Earlier on in this article, we’ve already mentioned Gmail as one of the best known single page apps out there. But you’re still probably wondering what else can be built following this approach, and most importantly – how big can you get?
The short answer is – pretty big. So what sites are single page apps? Here are a few examples we all know and love for their awesome product features and fluid performance on any platform:
Netflix is a worldwide streaming service with a market cap of $169.7 bln. They’ve reinvented the way we watch movies and shows, giving us what we all wanted before we even knew we wanted that:
- Courage to invite a crush over without being too obvious
Instagram aka “Where the wild exes are”, the photo and video-sharing social network, which became the best Facebook’s billion-dollar deal. Instagram is running on Facebook’s own framework designed for developing native mobile apps, React Native.
Another great example of a unicorn that has changed our lives and the way we do things – LinkedIn, combines pretty much all the instruments we need for a busy work-life and effective networking.
And here’s a list of few other businesses that used SPA architecture to build their websites or apps, you might want to refer to, if still in doubts:
And that’s just to name a very few.
If you’re not too familiar with a concept of frameworks and don’t know why they are important, I suggest you reading this article from Coding Ninjas blog that explains the idea in simple words. If we are to compress the explanation to just a few words, frameworks are sets of libraries containing predesigned solutions, which make developing faster and easier.
The availability of frameworks to choose from when you decide you want to develop a single page web application is essential because it may directly affect how fast and affordable will it be for you to finish. Of course, if we were to compare SPA and MPA approaches in this plane, single page apps would stand zero chances. But in reality, you don’t need to have as many frameworks as possible. In fact, you need one. The one that suits your specific requirements.
Here are some of the most popular frameworks for building a single page app:
Decided to make a single page application using AngularJS? You are going to be in a great company! Originated in Google, Angular framework has been heavily used by its founding fathers, as well as thousands of other projects worldwide.
There are a few significant benefits of Angular over any other framework used to build SPAs. First of all, this framework induces the best practices of clean coding: TypeScript helps engineers to stay away from common errors. This is a massive advantage for the large-scale projects or the ones, that will need long-term maintenance. For further reading on Angular JS, check out this article.
React is probably the most trendy SPA framework on the market right now. Designed by Facebook engineers for internal purposes, React has been only growing over the past few years. In our recent ReactJS vs AngularJS comparison, we pointed out the frameworks differences and similarities quite thoroughly. But the one thing you should now that React has and Angular doesn’t is the Virtual DOM – a technology that can make your already-fast app even faster.
Other advantages enthusiasts love to emphasize on is excellent documentation that helps to learn faster, impressive sets of components to choose from that will help you to gather the product you dreamed of, and most importantly: the testing capabilities. Aurelia Skeleton app is a tool included in the package and supports end-to-end testing. But no matter how good Aurelia is claimed to be by its early adopters, your main difficulty will be finding a developer who has any significant experience with this framework.
Vue.JS is another open-source framework that takes its roots back to Google. Its’ creator, Evan You, has worked on a number of projects at Google, using Angular. His finding was that there are tasks for which he needed something more lightweight and less complicated than Angular. At that time, React that could have been a solution for him, wasn’t widely known, so he decided he’d create his own framework. And that is how VueJS was born, folks.
Vue is often labeled to be a child of two beautiful parents: React and Angular. And that is understandable since Evan You tried his best to inherit all the best features from both frameworks. VueJS offers virtual DOM, integration with other libraries and frameworks is easy, it’s modular and fast in development. And while some say Vue has a potential to take over the leading position due to its potential, we doubt it will happen any time soon. This leaves us with a conclusion, that, similar to Aurelia, it may also be more challenging to hire VueJS developers than it would have been with Angular or ReactJS.
There are a few things to consider before deciding whether you should or should not choose building single page application over a multi-page application. To simplify this decision, here’s a list of questions you should consider:
- Who is your primary audience and where are they? If you suspect that some or even all of your customers live in places which are likely to have high network latency or any other kinds of network insufficiency or slow devices, you may face higher churn rates going with an MPA.
- Is your app going to be multi-platform? As we’ve stated above, SPA architecture leaves you with a reusable backend code, and that is very helpful for speeding up the development and making it more affordable. At the same time, if you’re building a web app only, building an MPA is most likely to be a more budget-friendly option.
- How much do you rely on SEO? You can’t ignore the fact that with single page apps it will be going a little more complicated to get your website indexed. Don’t forget though, that there are plenty of business models that don’t imply your project to be heavily dependant on SEO.
- Do you have a long-term product vision? Sounds like a bad thing not to know what you want to do with your project? Maybe, but it isn’t. Even Instagram wasn’t Instagram at first. Don’t get me wrong, SPAs are flexible and will allow you to go in another direction. But still, if you’re not sure you’ll be able to resist the desire to add another page, consider choosing an MPA pattern.
After all, the crucial thing to understand is whatever architecture, language or framework you embrace, your final result will heavily depend not on your tech stack, but the engineers. Everything else is just a tool that gets things done. But hiring a professional developer, especially for technologies that haven’t been around for decades, can get tricky. Especially, if your business is located in a place that offers a low concentration of technical specialists.
Coding Ninjas is a network of vetted professional developers and may be an option you’d want to consider if you are ever in need of a professional who not only has hands-on experience with SPAs and MPAs but will also help you to find the best solution for your particular case. We only work with qualified developers who have passed our 3-step testing process and are available to start working on your project. Need a developer right now? Get a free quote.