What is a Single Page Application (SPA)
How is it achieved?
Single page apps are distinguished by their ability to redraw any part of the UI without requiring a server roundtrip 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.
Two-way communication of a client application and web server replaces one-way requests from a browser (HTML 5 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 (HTML 5 Local storage).
Behavioral difference from traditional web applications
When to go for Single Page Application?
Challenges with Single Page Applications
Search Engine Optimization (SEO)
Single Page Apps are a little extra vulnerable to both Cross-Site Scripting (XSS) attacks and Cross-Site Request Forgery (CSRF) attacks. We have to be little extra cautious while building SPA, to defuse such attacks though server side apps are also vulnerable.http://stephenwalther.com/archive/2013/03/05/security-issues-with-single-page-apps
With an SPA, by definition, "a single page", the model breaks the browser's design for page history navigation using the Forward/Back buttons. This presents a usability impediment when a user presses the back button, expecting the previous screen state within the SPA, but instead the application's single page unloads and the previous page in the browser's history is presented.
To further address this issue, the HTML5 specification has introduced pushState and replaceState providing programmatic access to the actual URL and browser history.
Performance should be on your mind as you build and add features to your app. If you encounter a performance issue, you should first profile the app. The Webkit inspector offers a built-in profiler that can provide a comprehensive report for CPU, memory and rendering bottlenecks.
Some common performance improvements include:
Before deploying your application, it's a good idea to combine all of your scripts into a single file; the same can be said for your CSS. This step is generally referred to as minification, and it aims to reduce the number of HTTP requests and the size of your scripts.
Managing browser differences may involve a bit of trial and error.
EmberJS has built-in support for Handlebars. However, you do have to consider a templating engine if you decide to use a lean framework, such as Backbone. Underscore is an excellent starting point, if you have limited templating requirements. Otherwise, Handlebars works great for more advanced projects. It also offers many built-in features for more expressive templates.
ExpressJS users can even use the same templating engine on the client as on the server, giving you the benefit of sharing your templates between both the client and server.
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)
RoutingSelection of views and navigation (without page reloads) that preserves page state, elements and data (History.js, Crossroads.js, Backbone.js, pjax, HTML5 History API)
Real-time communicationTwo-way communication of a client application and web server replaces one-way requests from a browser (HTML 5 Web Sockets, Socket.io, SignalR)
Local storageCapabilities of storing data on a browser for performance and offline access replace cookies and intensive data loads from web server (HTML 5 Local storage). Can be downloaded and run from a local file with browser based storage (HTML5 storage)
Other design approaches to consider