Creating Single Page Applications with HTML5, WEB API & KNOCKOUT
We all wonder when we hear the Teram SPA? KNOCKOUT , BACKBONE? What is it?
Lets understand The following
What is SPA?(Single Page Application)
Which Framework ?
Why Knockout ?
What is Web-API?
and Other Building Blocks of SPA
Fundamentals of Single Page Application
All the required data is loaded on page load
Profile Information
No Page refresh
Asynchronous calls.
Faster Performance
# based URL – Handle the Back Button
Developed using JavaScriptDefinition of a Single Page Application
Combining multiple actionable and non-actionable views on single page is nothing but SPA.THE MAIN QUESTION? WHICH FRAMEWORK TO CHOOSE?
-Backbone.js
-Batman.js
-Angular.js
-Knockout.js
and hundreds moreWEB API
A framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices
Build around
-HTTP Communication protocol
-Uniform Resource Identifier (URI)
-HTTP Methods (GET, POST, PUT, DELETE)
You have what single page application is, what are its features and how to create a single page application in visual studio.
One of the features of single page application is to get the html, css and javascripts along with 80% of data in the first page load.
SPA will hit the server only if there is some change in the data or it wants to retrieve more data (not html, css and js). So we will need an point on the server which will retrieve and send only raw data. This is where WebAPi comes into picture (show the slide and read the definition).
WebAPI is an ideal platform for building pure HTTP based services where the request and response happens with HTTP protocol.
The client can make a GET, PUT, POST, and DELETE request and get the WebAPI response appropriately.
It makes use of the URL and the Http verbs to retrieve and send the data.
Open visual studio and show the bookmark controller. Also, show the routeconfig file and then show the demo in the browser which gets the bookmarks list.KNOCKOUT
KnockoutJS is a JavaScript framework that implements the MVVM design pattern to allow you to quickly bind your view-model data to your HTML
KO core features
-Observables and dependency tracking
-Declarative binding
ViewModel serves as the glue between the View and the Model. It wraps the data from the Model and makes it friendly for being presented and modified by the view. ViewModel also controls the View's interactions with the rest of the application (including any other Views). Not aware of the view and holds the unpersisted data which the user changes
Here are some Technical Features
-Bundling
-Minification
-Modularity
-Navigation
Hope it clears the concept of SPA which is Single Page Application