Release notes: http://blog.stevensanderson.com/2011/12/21/…
Now with release 2 the Knockout.js gets even better. I tried and studied some JS framework in the last year an KO was the one which convinced me most. It delivers a nice design concept by applying the MVVM pattern. Integration of templating and the excellent data binding makes creating HTML frontenend application fun and incredibly efficient.
I would see knockout.js as a macro-framework. It's not a replacement for a swiss-army-knife library like jQuery on which KO is built, btw. Rather it is concerned about the general structure of a browser application. This is one of the key pain-points of the browser as an application platform. While doing little things quickly is easy and done quickly, an app often tangles up into a chaos of interweaved functions while growing larger. KO help to overcome this by delivering a clean and easy design (MVVM) which can be applied on application and widget/component scope and helps keeping up maintainability.
Key points I like:
- introduces clean application design
- helps to solve the biggest web application development problem: structure and know your application
- no constraint on the view side - everthing goes
- powerful observable model with dependency tracking
- great data binding to synch model and view automatically
- great template integration re-rendering templates automatically on model change
Note: ko is not a component library with standard widgets; do-it-yourself or use the component library of your choice,
MVVM
The application is based on a view model with contains an observable data model and the activities to access and manipulate these data. Based on Observables a model can be put together quickly by enforcing a clean design. Once the model is defined the UI can be attached to and synched with that model out-of-the box.
Observable model
Great approach as known from other stuff out there (e.g. backbone.js, spine.js, JavaScript MVC). An observable model triggering change events. Observable can even be chained to other obsrevables (dependentObservables in v1 or computedObervables in v2)
Data binding
An excellent data binding is key for a efficient web development experience. Knockout.js has it and it's great! The observable model can be bound to DOM elements with 'data-bind' attributes. This makes it easy to render JavaScript data into DOM elements. On a model change the templates are re-rendered automatically. This way an application developer has only to be concerned about the business functionality manipulating the model while the view updates automatically.
When doing UI development having data and UI in synch is a big share of work- mostyl trivial but time consuming. Having this done by the framework saves time to make the UI incredible and awesome (or, sadly, simply cheaper ;-) Knockout.js makes
button.attr("disabled", "disabled")never clutter your js code again as you quickly bind such stuff to an observable model value and make the framework synch the UI on model change:
<button data-bind="enable: myItems().count < 5">Add</button>
Templating
Knockout.js is based on jQuery and integrates with the templating engine of Boris Moore (Microsoft) nicely. Templates in the page can be attached to DOM elements by data binding and are executed by KO automatically. It's and deep and efficient integration. Changes on an data item of a collection make only render again these view elements belonging to that particular item and not the entire collection.
With 2.0.0 templates integrate even nicer. A template can now simply be part of the DOM (as of version 1.x templates are included in a script element with type text/tmpl or similar). That way the markup code is very clean. I guess it's the approach which delivers the least ugly markup template code I've ever seen. No other template language I know is cleaner. This might be a detail, but knowing that there is no template language which is not ugly for advanced templates, this can be a real plus regarding maintanability. Beside that, having the template markup parsed by the browser while page loading is an appreciated perfomance boost for large apps.
So now, if you ever have to do web application development for desktop you definitly should check out knockout.js. It's not only great but supports browsers back to the stone edge (IE6). Documentation is extensive and the framework is easy to use, helps you keep things together and greatly supports the knitty-gritty, boring house-keeping web dev work browser developers have to tackle.
