In the Digital Pulse ‘Uncovered’ series, we break down buzzwords to clarify technology and terminology.

Here, Adnan Jaswal explains what a single page application is and why designers are clamouring to use it.

The way we use the internet is rapidly evolving. In 2015, mobile overtook desktop as the preferred digital platform. Users have become accustomed to not only receiving content but generating it themselves. Installing apps, along with the broad functionality that comes with them, is commonplace.

As a result of these influences, modern users expect websites or web applications to provide an increasingly rich, interactive and fluid user experience – much like native applications do on devices such as phones and tablets.

Touted as one of the major web design trends of recent years, the single page application (SPA) is a solution that enables designers and developers to build web applications that respond to the demands of today’s user.

What is a single page application?

Websites that are slow, clunky and one-dimensional are losing relevance in the digital age, where users expect a rich and interactive digital experience. Traditional web applications, which generally serve page after page of static content, are not well suited to meet those expectations.

A single page application is one that’s loaded as a single HTML page in the browser. As the user interacts with the application, the relevant parts of the page – rather than the whole thing – are dynamically updated.

Facebook is one example that uses single page application design. To see more, the Awwwards website maintains a list of other, well-designed ones.

Key features of single page applications

No more page reloads

Shopping cart

The shopping cart may be the only item to refresh on page when you add to basket. Why bother reloading an entire page?

The most important feature of a single page application is that it eliminates the need for page reloads when navigating through the application or performing app tasks.

For example, in a traditional e-commerce web application, when adding an item to a shopping cart, a user may see a white flash as the page reloads. In a single page application, the item will be added to the shopping cart seamlessly and relevant parts of the page updated or redrawn in a fashion that doesn’t demand the whole page to reload.

Let’s take an example such as online retailer Catch of the Day. On that site, when you add an item to the cart, the image of the cart in the top corner of the page refreshes to show the total number of items in your cart. The page itself doesn’t change – a giveaway is that the URL remains the same.

The browser shares the workload

With a single page application, most of the interaction logic is executed in your device’s browser – which means that not all commands, or actions, are sent all the way back to the server to be processed, as was traditionally the case.

Traditional web applications work on a request/response cycle. Every time the user’s browser sends a request, the server responds with a new HTML page. The HTML page is loaded in the browser as a page refresh.

In a single page application, the server responds with HTML page and interaction logic in JavaScript. Any subsequent requests to the server are made asynchronously using JavaScript. The server responds to these requests with data or instructions – not necessarily a new page. Parts of the page are then redrawn because the interaction logic – the set of instructions – lets the browser know what it should do.

This ‘thick client’ model makes the application work seamlessly, which results in an experience more like that of a native application. By removing the ‘round trip’ of sending commands to the server and back, the journey is quicker – and therefore more fluid.

A seamless journey from online to offline

A single page application can remain in use even when offline. This is because most of the interaction logic is downloaded to the browser when the application is accessed for the first time. The application state during offline mode is stored locally on the browser, and when network connectivity becomes available again it syncs with the server.

An example of this feature in use could be a travel application that tracks a user journey for a route that spans an area where network connectivity might not be available. During periods of network drop out, the application would still continue to function in offline mode, resyncing when network connectivity becomes available.

Being able to connect the dots of a user experience that moves between online and offline in this way has long been a feature of native applications on mobile devices – but it is also one of the drawcards for employing a single page web application.

Where to from here?

Today’s single page applications are mostly developed using HTML5 and JavaScript. This is driven by the fact that these two technologies have matured over time to include all the features expected of a mature programming language. They also do not require a plugin to be installed on the browser.

The emergence of JavaScript frameworks such as KnockoutJS and AngularJS in the last few years have increased the adoption of single page applications as they significantly decrease development effort.

There are some wider accessibility considerations to bear in mind when building this type of application, particularly if aiming for a triple-A rating. Make sure that you are up to date with World Wide Web Consortium’s WAI-ARIA accessibility specifications and that accessibility is part of your quality assurance process.

The arguments for single page application are so strong that most modern websites are now based on this design. Long live the single page application!


Adnan Jaswal is a manager in PwC’s The Experience Centre and the author of KnockoutJS by Example (2015, Packt Publishing)

 

Contributor

Adnan Jaswal

Adnan Jaswal is a solution architect in PwC Australia’s Experience Centre.

More About Adnan Jaswal