Aug 26, 2012

MVVM with javascript HTML5, Is it possible?

Excellent news for the programmers using MVVM pattern in WPF/Silverlight.

MVVM (Model, View & ViewModel), the coding architecture pattern is booming now a days with Microsoft's latest technology, especially in WPF.  I was having a telephonic talk with one of my techi friend, Jay Nanavaty, and he shared very interesting concept of following MVVM pattern in javascript.

While using WPF/Xaml/C# combination in Silverlight/WPF applications we were able to used MVVM coding architecture pattern, because of various features like INotifyPropertyChanged, ICommand, ObservableCollection..  

Now, what if, we need to use MVVM pattern with javascript / HTML5?  definitely we need above mention feature set to make use of MVVM pattern, such feature were not supported by javascript.

I would like to share one interesting javascript library which allows developers to create rich, responsive display and editor user interfaces with a clean underlying data model, supports MVVM pattern known as 



Features of Knockoutjs:
  • Free, open source (MIT license)
  • Pure JavaScript — works with any web framework
  • Small & lightweight — 40kb minified
    • Reduces to 14kb when using HTTP compression
  • No dependencies
  • Supports all mainstream browsers
    IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)
  • Fully documented
    API docs, live examples, and interactive tutorials included
More historical details can be seen over here Wikipedia Knockoutjs

Comparing KnockoutJS with Silverlight:

Here, what I feel is actually, we cannot compare JavaScript with the powerfull C# and  xaml used in Silverlight. But if we just talk about the final output using each technology, then it is achievable using KnockoutJS, as we can get Rich User Interface similar to Silverlight using KnockoutJS.

An Excellent, article is given over code project for a demo project developed using KnockoutJS and also using Silverlight. Here is the link of it KnockoutJS vs Silverlight

For those who are more interested to learn more about KnockoutJS. Here is the link of Building Single Page Apps with Knockout, jQuery, and Web API

Great thanks folks for going through this post, Do drop any comments/suggestions/concerns below.

Regards,
Viral Rathod.