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:
In addition the applications use well established Object JavaScript techniques:
Asynchronous Module Definition (AMD)
- Namespaces, Anonymous Module, Revealing Module Pattern
- Asynchronous Module Definition (AMD)
- Inheritance Using Revealing Module Pattern
- Getting Started with Modules Using RequireJS
- Using RequireJS Asynchronous Module Definition (AMD) Modules with jQuery, LoDash
- Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache
- Fixing Errors When Using jQuery, Sammy, RequireJS
Promises
- Asynchronous Programming Using Promises
- Promises for Asynchronous Operations Using jQuery
- Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache
- Asynchronous JavaScript Promises Using Q
- Using Q Promises Inside a RequireJS AMD Module
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: