They're two very different approaches to the same problem. To put it roughly: Backbone emphasizes smart models that can be passed around and observed by views or controllers, and Knockout emphasizes smart views that have bindings and logic written into HTML attributes.
The levels of granularity are also different. With Knockout, any change to the data will update that atomic portion of the view. With Backbone, the default is to be much more coarsely grained. The good baseline approach for getting started is to simply re-render the view when the model changes:
model.bind("change", this.render);
And now, whenever any attribute in the model is updated, the view is redrawn. In most cases, that's all you ever need, but in performance critical cases, you can optimize by listening for changes to specific values, and updating just those portions of the view.
I considered both Backbone and Knockout and ended up with Knockout, although both are great! I find Knockout's simple declarative binding to be cleaner for most cases:
<span data-bind:"text: title"></span>
And Knockout allows you to put bindings in code too, where that makes sense. I also like the way Knockout keeps everything in the view model, rather than passing in the observable attributes when constructing an instance. For instance:
var Sidebar = Backbone.Model.extend({
promptColor: function() {
var cssColor = prompt("Please enter a CSS color:");
this.set({color: cssColor});
}
});
Here color doesn't exist yet. I guess this is just standard javascript style? In Knockout (+coffeescript), I'd write:
class SideBar
color: ko.observable('white')
promptColor: ->
@color(prompt('Please enter CSS color:'))
My model is self-contained. This example also shows the syntax for updating and getting values. I prefer Knockout's
@color(cssColor)
to Backbone's
@set({color: cssColor})
although this is minor and perhaps you want to allow for bulk updates.
I can't help but feel that these types of libraries are the future. I hope there is lots of cross-pollination going on. Sproutcore focuses on the 5 percent of webapps that should be desktop style. Both Knockout and Backbone give lots of the same benefits, but allow a more flexible application style.
My only wish is for a language agnostic persistence protocol, with some socket.io and REST protocols implemented for most frameworks/languages. Ideally, I could use this protocol to sync with my iPhone/Android/HTML5 app, without changing the server side. This could get very hairy (FeedSync/LiveMesh/Wave), but something simple that accomplishes 90% would be a great.
Comments
They're two very different approaches to the same problem. To put it roughly: Backbone emphasizes smart models that can be passed around and observed by views or controllers, and Knockout emphasizes smart views that have bindings and logic written into HTML attributes.
The levels of granularity are also different. With Knockout, any change to the data will update that atomic portion of the view. With Backbone, the default is to be much more coarsely grained. The good baseline approach for getting started is to simply re-render the view when the model changes:
And now, whenever any attribute in the model is updated, the view is redrawn. In most cases, that's all you ever need, but in performance critical cases, you can optimize by listening for changes to specific values, and updating just those portions of the view. It's great to see different approaches to JS Apps start to surface. I wonder how much cross-pollination there's going to be...I considered both Backbone and Knockout and ended up with Knockout, although both are great! I find Knockout's simple declarative binding to be cleaner for most cases:
And Knockout allows you to put bindings in code too, where that makes sense. I also like the way Knockout keeps everything in the view model, rather than passing in the observable attributes when constructing an instance. For instance: Here color doesn't exist yet. I guess this is just standard javascript style? In Knockout (+coffeescript), I'd write: My model is self-contained. This example also shows the syntax for updating and getting values. I prefer Knockout's to Backbone's@set({color: cssColor})
although this is minor and perhaps you want to allow for bulk updates.
I can't help but feel that these types of libraries are the future. I hope there is lots of cross-pollination going on. Sproutcore focuses on the 5 percent of webapps that should be desktop style. Both Knockout and Backbone give lots of the same benefits, but allow a more flexible application style.
My only wish is for a language agnostic persistence protocol, with some socket.io and REST protocols implemented for most frameworks/languages. Ideally, I could use this protocol to sync with my iPhone/Android/HTML5 app, without changing the server side. This could get very hairy (FeedSync/LiveMesh/Wave), but something simple that accomplishes 90% would be a great.