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 JavaScript

Definition of a Single Page Application

Combining multiple actionable and non-actionable views on single page is nothing but SPA.


and hundreds more


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)

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.


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


Hope it clears the concept of SPA which is Single Page Application


No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: