In this article Id like to compare Backbone, Knockout and JavaScriptMVC under the following points:
- documentation
- installation
- understanding
- complexity
- for what kind of project
So lets start with Backbone. The documentation of Backbone is available under the following link. The complete documentation is written on a single page. Its very easy to search for topics you are interested in. After a short introduction youll find one or more code examples for each topic. These examples are nicely short and well described. Some of them are testable right away. Everything is easy to understand. The only thing missing is a short demonstration how all parts of Backbone work together. But if you search for Backbone snippets on Google you will find lots of examples because it has a wide acceptance among frontend developers.
Backbone is lightweight with just 4.6KB (compressed and Gzipped). It comes along with models, views and controllers to separate the contexts of your application. The only hard dependency of Backbone is underscore.js, a library full of useful utilities and JavaScript functions. For DOM manipulation you are advised to include either jQuery (>1.4.2) or Zepto. To use Backbone just download the backbone.js and underscore.js files and include them in your application. If you include jQuery as well you have a very powerful set to implement complex applications. One thing I experienced myself and read a lot about it on the Internet is the error handling of Backbone. If something went wrong (i. e. you forgot to include underscore.js) a JavaScript error occurs with a message that has nothing to do with the real error. Compared to other implemented MVC patterns, the Backbone.View is a kind of controller. It dispatches events that originate from the UI, with the html template serving as the true view. They called it view because it represents a logical chunk of UI, responsible for the contents of a single DOM element. Backbones main structure exists of Backbone.Model, Backbone.View, Backbone.Collection and Backbone.Router.
Backbone.Model It wraps a row of data into business logic. The backbone.Model provides a basic set of functionality for managing changes. An easy model could look like this:
<script src="https://gist.github.com/1472538.js">In this piece of code we extend Backbone.Model with our domain-specific method promptName. The this.set function sets a hash of attributes on the model and triggers a change event. Its one of the base functions in Backbone.Model and really handy for updating your view if something changed. You easily bind a change" listener to the instance of your model to observe any changes. Within the callback of your binding you can place your view changes or whatever you like. Lets have a look at an example.
<script src="https://gist.github.com/1472552.js">Backbone.View The general idea of Backbone.View is to organize the interface to logical views. Backed by models each view can be updated independently when the model changes. As well as the model, the view comes along with basic methods like (initialize, render, remove, ...).
<script src="https://gist.github.com/1472559.js">In the example we overwrite the function initialize" which is the constructor of the view class. It is always invoked if an instance is created. Within this constructor we bind the change:name listener to the instance of the PersonModel and bind a callback. This callback would be invoked if the name in the model changes. If this happens the new name would be rendered between the body tags.
Backbone.Collection Backbone.Collections are ordered sets of models. Like the model you can bind change events as well, so the collection get notified if any model changes. It provides a full suite of underscore.js methods to improve the collection handling.
<script src="https://gist.github.com/1472565.js">Backbone.Router Backbone.Router maps URLs to functions and connects them to actions and events. For history routing it uses the history API. So you can use standard URLs like /page instead of #page. Backbone provides a graceful fallback for browsers without support of the history API.
<script src="https://gist.github.com/1472568.js">To compare the complexity of each library I built a simple wish list application. This application should be able to add wishes, remove them and count all added wishes. An implementation with Backbone could look like this:
<script src="https://gist.github.com/1472571.js">Truncated by Planet PHP, read more at the original (another 10790 bytes)