Knockout, Upshot, History

These javascript libraries together support presentation and editing of data across a set of pages that interact with local and remote data. A good use case scenario where these different libraries fits together to perform a job is SPA (Single Page Application). For example: facebook, gmail, trello... ASP.NET MVC 4 comes with built in template for SPA, so you do not have any more excuses not to build fast responsive application with offline support. See this Steve Sanderson SPA presentation at Techdays 2012 in the Netherlands to get how these libraries fits together to create a greate web application.

Knockout.js

Knockout is a javascript library that helps to bind data in html page using MVVM pattern. Its declarative binding with observable pattern is powerful binding mechanism which is very easy to understand and use.

I have passed through knockout in the past, but never gave it a serious thought until I saw Steve Sanderson talk on "Building Single Page Apps for desktop, mobile and tablet with ASP.NET MVC 4", in which, Steve uses knockout.js, upshot.js, and history.js to create a Single Page Web App that can work offline. (All theses js library are included in SPA template of MVC 4.0)

Learning materials:


Download Knockout.js:


Other similar libraries are:


Comparing Knockout and Backbone:


Some data bind example with knockoutjs:

  • Image Source: <img data-bind="attr: { src: imageUrl, alt: name }" />

  • Text:<div data-bind="text: name"></div>




Upshot.js (formerly previewed as RIA/JS)

Upshot is powerful DAL (Data Access Layer) javascript library. It knows how to talk to server or local data storage. It knows how to the interprete data from the server, understanding the metadata for things like validation and association. It knows how to track changes and synchronize those data to sever.

In case of server data storage, upshot can talk to json/xml data services like web api. And in case of local storage, upshot can use html5 local storage. There is even possibility to use local storage when there is no connection with server, and synchronize all changes to server as soon as server is available. This is the great library that makes building SPA application as easy as building normal web application.

If bufferChanges attribute is set to true, Html.UpshotContext(bufferChanges: true), Upshot won’t synchronize changes with the server until we explicitly ask it to. But if set it to false, Html.UpshotContext(bufferChanges: false), changes are immediately send to server. This is a great funcionality if we want to do bulk insert/update, which is great enhancement in terms of performance because it reduces number of http request to server.

This can also perform query against data like sorting, filtering etc.. Moreover, it can perform query against remote data as well as local data, so you don´t have to go to remote if you just want to filter over data that is already in the local.

Learning materials:


Download Upshot.js:


History.js

Javascript library enables client-side navigation by associating a URL with each UI state, so that the user can use the browser’s back/forward buttons to retrace their steps (without actually performing a full page load in the browser).

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.

Download History.js:


PS: I am still learning and exploring these great libraries, if you have any good link, or post to get more information, please leave them in comment. Thanks
Posted by

5 comments:

  1. AnonymousApril 13, 2012 at 7:43 AM

    Dear Ajit, you are saying that Upshot supports the local web storage. I am also trying to store my data in local storage to restore it in the datasource/datacontext afterwards but I can't find any features in Upshot which should support this? Do you have any information how this should work?

    ReplyDelete
  2. BKATD24July 19, 2012 at 8:52 AM

    Simple and nice post.
    Thanks for it.

    ReplyDelete
  3. UnknownJuly 25, 2012 at 7:28 AM

    I have gone through with Video - Steve Sanderson.but i couldnt find UpshostContext parameter called provider,

    i need to add Provider:"OfflineProvider"

    ReplyDelete
  4. Ajit DhunganaAugust 2, 2012 at 1:08 AM

    Hi scipbe, Nadeeshan

    Sorry for the late response.

    If you look at upshot.js (version 1.0.0.2), constructor of the RemoteDataSource receives 'options' (line 3375 ). It is an optional paramter which has a field named 'bufferChanges'. This is the field that you want to set 'true' for offline support, by default it is 'false'.

    I dont know which version of vs you are using, in the RC of VS 2012 microsoft decided not to include SPA template as default(imho it is a stupid decision), which means you have to get it later using NuGet. It means, Html.UpshotContext (Which is nothing more than a simple Htmlhelper that is in System.Web.Http.Data.Helpers2 namespace in Steves presentation) might have been excluded in the version that you are using.

    So if you dont find Html.UpshotContext even after including System.Web.Http.Data.Helpers2 or if dont have this namespace, there is no problem, just set 'bufferChanges' field to false manually.

    Cheers.

    ReplyDelete
  5. GAugust 29, 2012 at 9:41 PM

    Hi Ajit,
    I've used the example on GitHub of Steve's code and updated Upshot using NuGet ... this makes the offline stuff work perfectly for me.
    However, when I implement the manifest for offline caching, it all goes wrong.
    Am I doing something wrong, or is this simply not supported at the moment?
    Thanks,
    Graham

    ReplyDelete

Subscribe to: Post Comments (Atom)