What is KnockoutJS?

DevToolsGuy / Thursday, May 02, 2013

Knockout is a JavaScript implementation of the Model-View-ViewModel software pattern (MVVM). If you haven’t come across MVVM before it is an architectural pattern based on the classic Model-View-Controller concept, which basically separates data from a user's interaction with it. MVVM, originally developed by Martin Fowler at Microsoft, was designed specifically for UI development and clearly separates these elements from data they operate on.

Knockout was created by Steve Sanderson, a program manager for ASP.NET at Microsoft. The project itself is independent of Microsoft, but a lot of Steve’s work is with web technologies so it is clear that he has a passion and a talent for this kind of thing. You can find out more about Steve on his blog, or Twitter.

Knockout has a number of key features:

Declarative bindings - DOM elements can be associated with model data

  • Automatic UI refresh - UI updates when model state changes
  • Dependency tracking - Set up relationships between model data
  • Templates - Create nested UIs as a function of model data

The whole point of this library is to help developers who are trying to create rich responsible user interfaces on the web (the kind of thing people are expecting more and more these days). Specifically, it is useful for those trying to create dynamically updating interfaces.

Everything is written in pure JavaScript, which should mean you can add it into your project with minimum rework. For the same reasons the code works in any major browser, and the whole library is only 13kb.

Steve has written some really nice tutorials and guides, and they really are the best way to learn more. We recommend:

NetTuts is also a really good guide for those just starting out.

There are now quite a few big sites out there using Knockout in the wild. These include dotnetnuke.com, jsfiddle.net, and thetrainline.com. A further list can be found here.

Check out the Knockout homepage for more information, or download it here.