“To design the future effectively, you must first let go of your past. Because an ounce of performance is worth pounds of promises.” Dr. Praveen Kumar G

An Inatech Whitepaper

Executive Summary
Every time you use Gmail, Google Plus or Facebook, you are using Single Page Application (SPA). SPA provides rich user interface and high experience in navigation between the pages within a single page. SPA provides best performance applications with high responsive designs and intuitive platform for mobility. When considering the High Performance Business Web Applications.

Why SPA?
Supporting rich interactions with multiple components on a page means that those components have many more intermediate states. Single page apps are distinguished by their ability to redraw any part of the UI without requiring a server roundtrip to retrieve HTML. This in turn reduces the number of hits to the server and increases the application’s load time. The main reason is that they allow us to offer a more-native-app-like experience to the user. This is hard to do with the other approaches.
SPA with MVVM
SPA is an Architecture approach used on client web browser with Model-View-View-Model techniques.
From a high level, SPA provides the rendering and data retrieval to client side. The web server becomes a services tier sitting in front of the database. An MVC pattern is tweaked to MVVM to work best using SPA. Frameworks like Knockout.js, Angular.js and Backbone.js can be used for this approach to bind the data tier to the application.
Reducing the network load with SPA improves the server side performances when compared to the earlier native applications. 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.

Modern Application Development
Most projects start with high ambitions, and an imperfect understanding of the problem at hand. Our implementations tend to outpace our understanding. It is possible to write code without understanding the problem fully; that code is just more complex than it needs to be because of our lack of understanding. The architectures used in single page apps represent the result of this process, where we would do things in an ad-hoc way using jQuery.
Write –Only DOM Approach
No state / data are read from the DOM. The application outputs HTML and operations on elements, but nothing is ever read from the DOM. Storing state in the DOM gets hard to manage very quickly: it is much better to have one place where the data lives and to render the UI from the data, particularly when the same data has to be shown in multiple places in the UI.
View Observer Model Changes
We want the views to reflect the content of the models. When multiple views depend on a single model, we don’t want to manually keep track of each dependent view. Instead of manually tracking things, there is a change event system through which views receives change notifications from models and handles redrawing themselves.
Decoupled Modules
Decoupled modules that expose small external surfaces. Instead of making things global, we should try to create small subsystems that are not interdependent. Dependencies make code hard to set up for testing. Small external surfaces make refactoring internals easy, since most things can changes as long as the external interface remains the same.

Minimizing DOM dependent-code
Any code that depends on the DOM needs to be tested for cross-browser compatibility. By writing code in a way that isolates those areas, a much more limited surface area needs to be tested for cross-browser compatibility. Cross-browser incompatibilities are a lot more manageable this way. Incompatibilities are in the DOM implementations, not in the JavaScript implementations, so it makes sense to minimize and isolate DOM dependent code.
No Controller Approach
Instead of writing too many server side MVC, SPA provides the placeholder technique to avoid the response with the DOM events. Controllers deal with adding and responding to DOM events, rendering templates and keeping views and models in sync, this is improved through SPA.
ODATA
The Open Data Protocol (OData) enables the creation of HTTP-based data services, which allow resources, identified using Uniform Resource Identifiers (URIs) and defined in an abstract data model, to be published and edited by Web clients using simple HTTP messages. OData is intended to be used to expose and access information from a variety of sources including, but not limited to, relational databases, file systems, content management systems, and traditional Web sites.
JavaScript Frameworks
A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.
Knockout js
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainable.

Knockout Data bindings
Knockout is an MVVM (Model-View-View-Model) implementation. It separates the view from the data (i.e. the model) via the view model; a “value converter,” so to speak. The view model exposes the data from the model along with other functionality to manipulate the model. Knockout takes the view model and binds it to the UI; the browser’s HTML. In addition, Knockout hooks up event handlers so that changes in the browser are automatically reflected in the view model. Likewise, changes in the view model cause immediate updates to the HTML; no more writing jQuery event handlers to keep model and data in sync!