< Everything You Need to Know About Single Page Applications

Everything You Need to Know About Single Page Applications

$URLMapContent.title

Jan 11, 2018

Everything You Need to Know About Single Page Applications

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.

SPA-vs-MPA-Blog-Post

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.

What Is A Single Page Application?

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.

Single Page Applications vs. Multi-Page Applications

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. 

Microsoft-Developer-Network-Graphic

SOURCE:  https://msdn.microsoft.com/

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.

Single Page Applications Vs Multi 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:

Single Page Application (SPA)

Advantages:

  • SPAs are fast, since most resources (Ex: HTML, CSS, Scripts) are only loaded once throughout the lifespan of application.
  • The product development is simple and streamlined. You don’t have to write code in order to render pages on the serve. In fact, you can usually get started without using any server at all.
  • You can debug single page applications using Chrome, which allows you to monitor network operations, inspect page elements and examine the data associated with individual elements.
  • The back-end code can be reused to develop a native mobile application.
  • SPAs send one server request, store the data locally, and retain the ability to use that data over and over again without another request, even when the user is offline.

Disadvantages:

  • This is an evolving situation (read: getting better), but it can still be very tricky to conduct search engine optimization on a single page application because of its use of AJAX.
  • The initial data request can be slow to download, because heavy frameworks have to be loaded to the client side.
  • If users have JavaScript disabled for any reason, it won’t be possible for an SPA to appear or function as intended.
  • Compared to multi-page applications, SPAs are less secure. Theoretically, an attacker could inject malicious scripts (client-side) that would directly affect users.

Multi-page Application (MPA)

Advantages:

  • Multi-page applications are a great option for products where users need a visual map of where to navigate inside of the application.
  • MPAs are much easier to manage when it comes search engine optimization. They afford more control and flexibility around optimizing individual pages for specific keywords.

Disadvantages:

  • There is no option to re-use the same back-end code to develop a mobile application.
  • Front-end and back-end development has to work in unison, which could require additional time and resources.
  • In general, product development for MPAs is more complex. Developers often need to use independent frameworks for client and server side functionality, which again requires more time and resources.

What are Your Objectives?

Prior to building and deploying any web application, you first need to determine what the your strategic objectives are.  

  • What are the goals that you have for the product?
  • What are the expectations that your users or customers have for the product?
  • What is the functionality that is required to make both of those dreams a reality?

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.

Why Are Single Page Applications Becoming Popular?

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.

SPA-Graph-1


SOURCE:  https://aimconsulting.com/

Making the Transition from MPAs to SPAs

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: 

  • They are simple to deploy and easier to iterate on over time. There is more control when it comes to versioning and walking back unwanted changes.
  • They are less complex, which means they can be developed faster and are easier to debug when something goes wrong.
  • They provide a better user experience, because pages aren’t constantly being reloaded while the website calls for data from a back-end server
  • They give developers a re-usable codebase that can be tweaked to produce a native mobile application. The usage of mobile devices for research, social interactions, and shopping has also taken off, so the impact of this ability should not be underestimated.

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.

Webinar

Join Us for Our weekly Webinar

See how dotCMS is changing the way organizations look at their content. Give us a few minutes of your time and we'll show you your digital future.

Register Now


Recent Posts

AI-enabled Personalization: How to Get Started

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.

What Is Hyper-Personalization?

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.

How Microservices Aid Agile Development, Deployment, and Scaling

What are microservices, and how do they impact agile development, deployment and scalability? (monolith lovers, look away now!)

What Is Voice Shopping, And How Does It Work?

What is voice shopping, and how is it changing the eCommerce landscape?