knockout.js

By eidias on 11/26/2012 (tags: javascript, knockout, categories: tools, web)

Knockout is a MVVM framework for javascript. It has been around for a while, but I never spent too much time with it until recently, when pluralsight released a free training that included knockout. My impressions – this is definitely something I could utilize in quite a few places, but it carries a pretty big startup cost, so I’d think hard before using it in a project.

First, here are some links that you may find useful:

knockout home page
knockout interactive tutorial (pretty nice I must say)
mentioned pluralsight trainings: Single Page Apps with HTML5, Web API, Knockout and jQuery, Building HTML5 and JavaScript Apps with MVVM and Knockout
Backbone.js – a library solving the same ‘problem’ – structuring web apps with javascript – here is a more comprehensive comparison.

So, with that out of the way a brief summary.

Knockout uses the mvvm pattern to introduce some structure to javascript code in a page. It’s best suited for single page apps (SPA) or pages that require a lot of user interaction and want to achieve a desktop(ish) feel. It has a nice event wire up system and I believe that using it right may improve an apps maintainability significantly.

But…

On one of the trainings, the author also showed ways to use this to achieve animations, transitions and things like that. After all, it is a front-end framework, so why not. But my gut tells me, that maybe, just running

   1: $('#foo-button').click(function() {

   2:     $('#content').fadeIn();

   3: });

may be a better idea.

I mean it’s a tool and although (paraphrasing):

when you have a new hammer, everything looks like a nail

let’s face it – you’ll be much better off with a screw driver if you want to unscrew a pc case.

The good news is, that knockout doesn’t force you to – it’s flexible enough to allow you to make your own decisions, but structured enough to help you with your app if you choose to build it using knockout.

Cheers