Single page application

My grandmother sent me a friend request on Facebook recently. She couldn’t even connect to the internet five years ago. As social media and email become more mainstream, the more widespread the expectation for a higher level of functionality, speed, and aesthetic appeal in our digital interactions. If you’re not considering these when building a web app, you’ll end up with a product that no one wants to use.

Organizations are turning to single-page applications (SPAs) to meet the rising expectations of consumers and users of internal apps. Single-page applications are heavily reliant on JavaScript and do not require full page reloads while the user is interacting with the application. Instead, a single page is modified dynamically with each user request, providing a much more performant experience throughout the user journey. Gmail, Google Maps, Facebook, and Asana are some widely-known examples of SPAs that have popularized this “snappier” user experience. For companies that want to stay engaged with their users and easily onboard new ones, a SPA may be a good option, but they’re not a silver bullet or suited to every team. Here’s what you need to know about single page applications and what they take to build before you start developing.

Understanding single page applications

One of the best ways to understand SPA architecture is to compare it to multi-page applications, which were the standard until about five years ago. In a traditional application, when a user navigates to a new page or performs an action (such as submitting a form), the browser makes a request to the back end. The back end responds with the HTML, CSS, JavaScript, and relevant data, which is then rendered in the browser. In this case, the back end does the heavy lifting and the client simply renders what is provided. The back end has to provide the same code for static elements like the navigation bar every time a page is loaded, which could be considered wasteful.

In a single-page application, the front-end code is only loaded once throughout the user session. All requests from the client following the initial page load are fulfilled through smaller, more targeted API calls to the back end, with only relevant data being returned in the responses.

Benefits of single-page applications

The biggest benefit of building a web app as a single-page application is improved performance for users. Since the front-end code is loaded only once, subsequent requests within the application are fulfilled faster because there is less information being transmitted and also less that needs to be re-rendered in the browser. You can opt to display a spinner while data is being fetched, so the user knows that their request is processing. Nielsen/Norman Group has studied the UX benefit of progress indicators in cases like this. They cite a study in which users who were shown an animated loop during a page load were willing to wait on average 3 times longer than those who did not see any progress indicators.

Opting to build a single-page application can also benefit your development pipeline. Work can be split between front-end and back end developers, ideally speeding up the process. The front-end developers are focused on building a beautiful user experience, while the back end developers are focused on the data model and building efficient APIs. While this approach to building a web app can definitely speed up the timeline, it requires a high level of focus and collaboration between both teams. The back-end teams need to provide clear API contracts and documentation so that the front-end team knows exactly which APIs to call and what data will be provided. The front-end team needs to be involved in the API design to provide input on what makes the most sense based on the application flow. Without this collaboration, the need for re-work might be introduced that could reduce the benefits of parallel front-end and back-end development.

With the right planning, the same APIs that are built for the web app can also be re-used for a mobile application This allows you to get to market faster with a mobile offering because developers can be off and running quickly with the right API documentation in hand.

Downsides of single-page applications

The biggest concern that most people have with single-page applications is that they aren’t as SEO-friendly. Search engine crawlers were designed for multi-page applications, so SPAs are less likely to show up in search results without additional work. So, you probably should not attempt to build pages with high marketing value as SPAs. This landscape is improving and there are tools like static site generators that help with SEO, but it’s still a primary consideration.

Another concern is that the initial page load can take longer for SPAs, since it requires ALL of the HTML, CSS, and JavaScript needed for the entire app. However, since subsequent page loads are faster with SPAs, this is not a major obstruction to the overall user experience.

It’s also important to consider your development teams’ expertise and capacity. SPAs require specialized front-end knowledge to build and maintain them efficiently. They can also be harder to debug because they require the use of browser-based development tools as opposed to IDEs. Additionally, state needs to be maintained between the SPA and the RESTful API.

Tools and frameworks for building SPAs

With the rising popularity of single-page applications, there has been a parallel rise in the popularity of JavaScript frameworks that support their development. The two most popular frameworks are React (Facebook) and Angular (Google), but there are plenty of alternatives that should also be considered, such as Vue.js and Ember.

My advice when choosing a JavaScript framework is to first understand your organization’s technical landscape, then the needs and use cases for the application you’re building. It can take some time for developers to become efficient at working with different frameworks. If your organization has already invested training on one framework, it probably makes sense to choose that one for your next application.

The value of a better experience

If you’re building a web app, consider the benefits of implementing it with a modern front end. Creating the best possible experience for consumer-facing applications is a near-imperative due to rising public expectations. However, a modern web app architecture will also help you derive greater value from internal applications: A better user interface makes people more efficient and can drive overall business.

I hope this post has shed some light on the rise of the popularity of SPAs, and why it might make sense to build your next application with a JavaScript framework. So how do you start? Look out for a followup post that dives into the technical details of developing a successful single-page application.

Get in Touch