Single Page Apps

A single-page application (SPA), is a web application or web site that fits on a single web page.

When architecting your application as a SPA, all the necessary code – HTML, JavaScript, and CSS – can be retrieved with a single page load. As an alternative, you can load just the appropriate resources to the page as necessary, usually in response to user actions. In either case, the page does not need to reload at any point in the process, nor does control transfer to another page.

The applications generally retrieve their resources as needed from HTML templates for display and from Web services for data.

Advantages

Single page apps can generally appear to respond quicker. They do this by not having to refresh the page. Instead, they can provide an indication to the user that information is being retrieved, leaving the rest of the page in tact.

Single page apps can store state locally. This means that the user does not necessarily send its state to the server on each refresh. Instead, it can be stored locally and updated to the server asynchronously.

Pages and templates can be cached on the local device, whether using HTML5 local storage, a JavaScript library, or AppCache. HTML for applications on devices can be completely stored on the device and data retrieved from local memory or from the server. This means you apps that are targeted or devices can be deployed through a device store, such as Windows Store or Apple’s AppStore, while developers use the familiar HTML/CSS/JavaScript programming model.

Capabilities

Modern web technologies (such as those included in HTML5) can provide the perception and navigability of separate logical pages in the application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes.

In addition, you can build applications for devices, such as smartphones (iOS, Andriod, and Windows Phone) using single page application technology. In fact, in a well designed architecture, the services may be the same but the HTML templates vary as needed to be appropriate to the device.

Architecture

A single page app gets its power from a “dance” between the client and the server in getting the ways to display data and getting the data itself.


From Kalyan Bandarupalli‘s post Single Page Applications using ASP.NET

Characteristics

There are few distinct characteristics of the professional Single Page Application:

Chunking. The web page is constructed by loading chunks of HTML fragments and JSON data instead of receiving full HTML from a web server on every request. (Backbone.js, pjax, jQuery, Upshot.js)
Controllers. JavaScript code handles complex DOM and data manipulations, application logic and AJAX calls is replaced by controllers that separate views and models using MVC or MVVM patterns. (Backbone.js, Knockout.js, JavascriptMVC)
Templating. Coding of UI and DOM manipulations are replaced by declarative binding of data to HTML templates. (Knockout.js, Mustache, jQuery Templates, Underscore.js)
Routing. Selection of views and navigation (without page reloads) that preserves page state, elements and data (History.js, Crossroads.js, Backbone.js, pjax, HTML5 History API, Sammy.js)
Real-time communication. Two-way communication of a client application and web server replaces one-way requests from a browser (HTML5 Web Sockets, Socket.io, SignalR)
Local storage. Capabilities of storing data on a browser for performance and offline access replace cookies and intensive data loads from web server (HTML5 Local storage).

In addition the applications use well established Object JavaScript techniques:

Asynchronous Module Definition (AMD)

Promises

Sample Code

The goal of our sample code is to provide something that works, where you can understand the context and how the pieces fit together.

Sample code for single page apps is available on the DevDays GitHub repository at: