Single Page Applications Fundamentals

https://msdn.microsoft.com/en-us/magazine/dn463786.aspx

What is a Single Page App.

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. 
SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.


Traditional Page Lifecycle Vs SPA Lifecycle


In a traditional Web app, every time the app calls the server, the server renders a new HTML page. This triggers a page refresh in the browser. If you’ve ever written a Web Forms application or PHP application, this page life-cycle should look familiar.

In an SPA, after the first page loads, all interaction with the server happens through AJAX calls. These AJAX calls return data—not markup—usually in JSON format. The app uses the JSON data to update the page dynamically, without reloading the page.  When the json is retrieved the app uses a data-binding JS frame work like angular or knockout to bind the json result to the HTML.























One benefit of SPAs is obvious: Applications are more fluid and responsive, without the jarring effect of reloading and re-rendering the page. Another benefit might be less obvious and it concerns how you architect a Web app. Sending the app data as JSON creates a separation between the presentation (HTML markup) and application logic (AJAX requests plus JSON responses).

This separation makes it easier to design and evolve each layer. In a well-architected SPA, you can change the HTML markup without touching the code that implements the application logic (at least, that’s the ideal). You’ll see this in action when I discuss data binding later.

In a pure SPA, all UI interaction occurs on the client side, through JavaScript and CSS. After the initial page load, the server acts purely as a service layer. The client just needs to know what HTTP requests to send. It doesn’t care how the server implements things on the back end.

With this architecture, the client and the service are independent. You could replace the entire back end that runs the service, and as long as you don’t change the API, you won’t break the client. The reverse is also true—you can replace the entire client app without changing the service layer. For example, you might write a native mobile client that consumes the service.



JS Data-binding Frameworks.

• Facilitate building single page applications
  • Page never reloads
  • No server-side page rendering
• Based on the Model View Controller concept
• Provide solutions for:
  • Routing - handling updates to the URL hash fragment
  • Templating - dynamically creating and updating HTML based on templates and models
  • Data binding - synchronize the model and user interface
• Top data binding frameworks today:
  • Angular.js
  • Knockout
  • Ember
  • JsViews
  • Can.js
  • Ractive