Showing posts with label MVVM. Show all posts
Showing posts with label MVVM. Show all posts

Monday, May 14, 2012

MVVM for the Web using Knockout.js

Ever since the explosion of web-oriented apps, the need for doing complex things simpler becomes more obvious. Creating richer & more sophisticated UI's usually involves using JavaScript API's like JQuery.

What?

Knockout.js is an open-source JavaScript library (yep, not Microsoft - licensed under the MIT) that helps you create rich, responsive display & editor user interfaces with a clean underlying data model.

Any time you have sections of your UI that update automatically, Knockout.js can help you implement it in a simpler, more maintainable fashion.

Why?

The problem with designing for the web is that rich user interactivity is fairly hard to do. Even when using a JavaScript library (like JQuery) it can become quite cumbersome. Before you know it, you have a mess of inter-related event handlers that all pretty much do the same thing.

Now, with Knockout, we can say hello to more structured code based on true object orientation & declarative bindings. This means that Knockout brings the MVVM pattern comes to the web.

Like any other good JavaScript library, Knockout also supports a wide variety of browsers like IE 6+, FireFox 2+, Chrome, Safari & Opera.

Knockout can be added on top of your existing web application without requiring major architectural changes.

Developers familiar with Ruby on Rails, ASP.NET MVC, or other MV* technologies may see MVVM as a real-time form of MVC with declarative syntax. In another sense, you can think of KO as a general way to make UIs for editing JSON data… whatever works for you :)

How?

The best way of explaining Knockout.js is to actually show you. In order to keep this post short & sweet and on to the point - here's a link to the interactive tutorials found on the website - knockoutjs.com

Also - I've uploaded an simple example based on my demo on SkyDrive here

Enjoy experimenting & happy knocking!

@FanieReynders