Single Page Applications - A Brief Overview

April 21, 2014

The Single Page Application (SPA) is a fairly new concept in the area of web application design, but nevertheless has grown significantly in popularity with the increasing attention to delivering a more fluid user experience (similar to a traditional desktop application) for web applications.  The primary distinction between an SPA and a traditional web site is that the SPA will load the majority of its content when it is first loaded, whereas a traditional web site will only load content as the user specifically requests it.  Also, as a user navigates within an SPA, the application will stay on the same main web page, whereas a traditional web site will request and load a brand new page each time.  Thus, an SPA might launch slower, but will typically become more responsive (than a traditional website) once running.  There a few techniques that are involved in the design of an SPA, as described below.

JavaScript backbone

In additional to the traditional visible content (i.e. HTML) of the SPA, there is typically a large set of JavaScript code that is used to create the functionality of the application.  Whereas a typical web site would have majority server-side code, an SPA would have majority browser-side code made up of JavaScript.  There might still be some server-side code in an SPA (including security and validation logic), but much of it would be replaced in the browser.  It is certainly possible to create the JavaScript backbone from scratch, but there are many available frameworks that are designed to implement SPA's.  Some of these frameworks are listed farther down

Single page with replaceable content

As the name states, there is typically one actual web page that loads into the web browser in an SPA.  Within the single page, there is typically a section whose contents are replaced when the user navigates within the application, thus giving the appearance of actually navigating to another web page.  The replaceable content is typically made up of smaller segments of HTML, and possibly the associated JavaScript. It is possible to load all of the replaceable content when the application first loads (thus increasing the initial load time), although it is more common to load each segment of content only when it is requested, and then caching that content so that it can be reused.

Browser navigation

As mentioned in the previous section, navigation in an SPA usually consists of replacing the content within the main page.  One of the functions of the JavaScript framework of the application is to handle this navigation.  Specifically, the framework will have to intercept all attempts by the browser to request any URL's associated with the application, and associate them with replaceable content within the single page.  In other words, the framework will not allow the browser to navigate to a new main page, it will simply take the requested URL and find the associated replaceable content with that URL.  Of course, if the requested URL is not associated with the application (e.g. if the user types in a new URL in the browser address bar), then the application framework should allow the browser to navigate away from the SPA and request the new URL.

In conjunction with navigation, the SPA should also maintain a history of navigation within the app itself.  This is to allow the use of the back and forward arrows of the browser, in order to navigate within the history of views visited by the user.

Asynchronous data access

It is very common for the SPA to retrieve and save data to the web server.  In order to preserve the responsive nature of the application, data is typically retrieved and saved asynchronously.  Ajax techniques are typically used to implement this functionality, as they are well implemented within JavaScript itself and various JavaScript frameworks.

Existing Frameworks

It is certainly possible to implement an SPA from scratch, however there are many existing JavaScript frameworks that can be used to jump-start the process.  In most cases, these frameworks will take care of just about everything on the browser-side, with the exception of the HTML markup that will be required for the main page view and the replaceable content views. 

Here are a few of the prominent frameworks:

AngularJS

Durandal

Ember

 

Information and material in our blog posts are provided "as is" with no warranties either expressed or implied. Each post is an individual expression of our Sparkies. Should you identify any such content that is harmful, malicious, sensitive or unnecessary, please contact marketing@sparkhound.com.

Meet Sparkhound

Review our capabilities and services, meet the leadership team, see our valued partnerships, and read about the hardware we've earned.

Learn How We Work

See how our Plan/Build/Run methodology drives real client success, and gain our team's perspectives on timely tech topics.

Engage With Us

Get in touch any of our offices, or checkout our open career positions and consider joining Sparkhound's dynamic team.