Introduction

When the web was born it was originally only hypertext documents linked together. Then there was an introduction of a forms tag which started the “web applications” era.

In recent times, there has been huge demand for more advance web applications which are readily replacing the old desktop applications. Although the world is gradually abandoning the browser-based web applications for their mobile domain counterparts, there are still two major design patterns that is employed to develop web applications. They are multi page web applications (MPA) and single page web applications (SPA).

What is a Single Page Application?

A Single Page Application is a web application that requires only a single page load in a web browser. It is a web application or web site that fits on a single web page with the goal of providing a user experience similar to that of a desktop application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes.

In a Single Page Application, either all necessary codes (HTML , JavaScript, and CSS ) which is retrieved with a single page load or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page.

Technical Overview

Single page apps are distinguished by their ability to redraw any part of the User Interface without requiring a server round-trip to retrieve HTML. This is achieved by separating the data from the presentation of data by having a model layer that handles data and a view layer that reads from the models.

Single Page Applications are essentially an evolution of the MPA+AJAX design pattern, where the only shell page is generated on the server and all UI is rendered by a browser JavaScript code. SPA requests the markup and data separately which enables SPAs to communicate with back-end servers without doing a full page refresh resulting to rendering pages on the client-side of the App.

A standard web app is structured from three different perspectives:

Architecture: what (conceptual) parts does our app consist of? How do the different parts communicate with each other? How do they depend on each other?

Asset packaging: how is our app structured into files and files into logical modules? How are these modules built and loaded into the browser? How can the modules be loaded for unit testing?

Run-time state: when loaded into the browser, what parts of the app are in memory? How do we perform transitions between states and gain visibility into the current state for troubleshooting?

However, according to Wikipedia.org there are various techniques available that enable the browser to retain a single page even when the application requires server communication. They include using:

• The JavaScript frameworks

Web browser JavaScript frameworks, such as AngularJS, Ember.js, Meteor.js, ExtJS and React have adopted SPA principles.

AngularJS is a fully client-side framework. AngularJS’s templating is based on bidirectional UI data binding. Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. In the AngularJS framework, the controller and model states are maintained within the client browser. Therefore, new pages are capable of being generated without any interaction with a server.

Ember.js is a client-side JavaScript web application framework based on the model-view-controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model.

Meteor.js is a full-stack (client-server) JavaScript framework designed exclusively for SPAs and uses the Distributed Data Protocol and a publish subscribe pattern to automatically propagate data changes to clients in real-time without requiring the developer to write any synchronization code.

Aurelia is a JavaScript client framework for mobile, desktop and web. It is similar to AngularJS, but is newer, more standards-compliant, and utilizes a modular approach. Aurelia was written with next-generation ECMA-Script.

Vue.js is an open-source progressive JavaScript framework for building user interfaces. With its CLI and web-pack we can easily create SPAs.

• Ajax

Ajax is the most prominent technique currently being used. Predominantly using the XML http Request/ActiveX Object from JavaScript, other Ajax approaches include using iFRAME or script HTML elements.

• Web-Sockets

Web-Sockets are a bidirectional real-time client-server communication technology part of the HTML5 specification, although, superior to Ajax in terms of performance and simplicity.

• Server-sent events

Server-Sent Events (SSEs) is a technique whereby servers can initiate data transmission to browser clients. Once an initial connection has been established, an event stream remains open until closed by the client. SSEs are sent over traditional HTTP and have a variety of features that Web-Sockets lack by design such as automatic reconnection, event IDs, and the ability to send arbitrary events.

Advantages & Challenges of SPAs

Considering the level of technological improvements on Single Page Applications there are still some few major demerits and challenges it exhibits.

• These cons could take any form such as:

– Heavy client frameworks which are required to be loaded to the client.
– UI code is not compiled, so it makes debugging difficult, thereby risking exposure to potential malicious users.
– Search Engine Optimization problems because the search engine crawler only sees a different version of the page than that of the users.
– Cancelling navigation is difficult.
– Inaccurate history data.
– The browser does most of the heavy lifting, which means performance can be a problem especially on less capable mobile devices thereby causing the user’s data allowance could be eaten up unnecessarily.

• Meanwhile the advantages of SPAs cannot be underrated as well. These include:

– Faster page loading times.
– Improved user experience because server load is reduced.
– No need to write the code to render pages on the server.
– Decoupling of front-end and back-end development.
– Simplified mobile development; you can reuse the same backend for web application and native mobile application.

Conclusion

Web browsers have come a long way. Modern ones offer a variety of APIs that enables the creation of the best user experiences software has to offer. Invariably, the work of ensuring a suitable user experience with a single page application still falls on the developer.

Also, recall that the Single Page Applications came into play because the web wasn’t designed for such richly interactive apps but soon enough browsers will catch up with the way apps are now being designed.

Without much doubts, its obvious core building blocks of the web (HTTP, URLS, HTML) are probably here to stay, as they’ve proven to be a strong foundation for several generations of web-apps.

We can see that major SPA concepts such as routing, partial loading, and data-binding, are gradually migrating upwards into the web browser.

It is actually up to the browsers to adopt latest techniques and features.