In many homes and offices, use of web applications has been outpacing that of desktop applications for quite some time. Web apps are generally more intuitive to use, easier to update, and their utility isn’t restricted to the one device they have been installed on.
You may read headlines stating that users are flocking from web application to mobile apps -- and they aren’t wrong -- but that doesn’t mean that browser-based applications are dead. In fact, the existing market for web apps is actually still growing.
So, the opportunity to build and launch a wildly popular web application still exists, but how do you make the most of it?
If you have been thinking about creating your own web app, you are probably aware that there are two primary options: single page applications (SPAs) or multi-page applications (MPAs). Of course, each format comes with its own set of pros and cons, but today we’ll be focusing on what makes single page applications an increasingly attractive option.
The term “single page application,” or SPA, is used to characterize a certain type of software application that is designed and built to operate efficiently on the web.
Like other websites, SPAs are accessed via a web browser, but they have the ability to deliver more dynamic user experiences, similar to what you might expect from a native mobile application or desktop application.
SPAs differ from traditional websites in that they greatly reduce the number of page refreshes needed to serve up the desired user interactions. They achieve this by leveraging AJAX - a tool that allows the site to exchange information with back-end servers and load data into the application without executing a full page refresh.
More directly, a single page application transfers most of the processing work to the client side, which allows the user to load a single HTML page and dynamically update the content on that page, without refreshing it, as they interact with the application.
If you’re reading this article, there’s a good chance you’ve already used a single page application today. Have you checked your Gmail inbox, scrolled through your Facebook news feed, or looked up directions using Google Maps?
Yep, those are all single page applications.
SPAs are a great option for delivering an outstanding user experience inside the browser, because they can provide intuitive user interfaces with no page reloads with little or no wait time.
But, as with most things in life, single page applications also have some drawbacks when compared to the alternative, multi-page applications. To make sure that an SPA is the right solution for you, let’s weigh our options.
If you want to understand the difference between single page applications and multi-page applications at a glance, here’s a helpful graphic from an article written by Mike Wasson on the Microsoft Developer Network.
Multiple-page applications are the more “traditional” way of delivering a dynamic user experience inside of a web browser.
As you can see in the top portion of the graphic above, every change to the page, initiated by some action that has been taken by the user, sends a request back to the server and requires the rendering of a new page in order to update the appearance of data and content from the user’s perspective.
In the past, these applications were much, much bigger than their single page cousins, which meant they required longer load times and more complex user interfaces to function properly. Thanks to AJAX, structural complexity and the speed of data transfer isn’t as much of a concern, but MPAs are still more difficult to develop than single page applications.
The theory behind how SPAs and MPAs work isn’t hard to understand, but what about the pros and cons of each model when they are actually put into practice?
Here is a snapshot of the advantages and disadvantages that SPAs and MPAs bring to the table, respectively:
Prior to building and deploying any web application, you first need to determine what the your strategic objectives are.
As an example, let’s say that you run an eCommerce site or you publish a lot of written content that needs to be searchable and you know that users will want to have the ability to filter a large and growing inventory of items by a selection of tags or categories.
In this particular instance, you might want to opt for a multi-page site that will handle the complex information architecture while providing an intuitive set of buttons or menus that users can leverage to find exactly what they are looking for.
On the other hand, maybe the data queries that are generated by user interactions are not numerous enough to warrant an MPA, so a single page application would be a faster, simpler, and possibly cheaper solution.
The primary takeaway from this comparison is that deciding whether or not a single page application is the right format for your product should begin by taking stock of the objectives that you have for the product and the specific needs of your users.
Both models come with inherent advantages and disadvantages, but when deployed in the right situation, single page applications can provide an outstanding experience for the end user while saving you time and money.
There is a growing sentiment that in the near future almost everyone will use single page applications to deliver a delightful user experience in the browser.
This is supported by data sources like the one below, which shows that interest in developers who are proficient in AngularJS - a programming language that is an integral part of developing single page applications - has skyrocketed.
When we take a step back, it’s not hard to see why plenty of large companies are making the transition from MPAs to SPAs:
Sure, they come with some downsides, but every day there are smart people who are coming up with clever ways to overcome those hurdles while still capitalizing on all of the upside that SPAs have to offer.
Imagine a world where Amazon.com was just as amazing, but was also more SEO-friendly, had fewer page refreshes, faster loads times, and an improved user interface that got you to exactly the product you’re looking for, only much faster and with fewer headaches.
That’s where web applications are heading and single page applications will almost certainly be a large part of the final solution. There may be some growing pains along the way, but all signs point to SPAs playing a significant (and increasingly important) role in how we design the next generation of consumer web apps.
Artificial intelligence is here, and it’s helping brands refine customer experiences by delivering even more personalized content and product recommendations. Here’s how to get started.
Hyper-personalization aims to go a step further than traditional personalization by relying on even more data to produce an even more tailored customer experience.
What are microservices, and how do they impact agile development, deployment and scalability? (monolith lovers, look away now!)
What is voice shopping, and how is it changing the eCommerce landscape?