News Archive
PhpRiot Newsletter
Your Email Address:

More information

14.12. Backbone VS Knockout VS JavaScriptMVC

Note: This article was originally published at Planet PHP on 14 December 2011.
Planet PHP

In this article IA'd like to compare Backbone, Knockout and JavaScriptMVC under the following points:

  • documentation
  • installation
  • understanding
  • complexity
  • for what kind of project

So letA's 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 youA'll 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 A"viewA" because it represents a logical chunk of UI, responsible for the contents of a single DOM element. BackboneA's 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:

In this piece of code we extend Backbone.Model with our domain-specific method A"promptNameA". The A"this.setA" function sets a hash of attributes on the model and triggers a A"changeA" event. ItA's one of the base functions in Backbone.Model and really handy for updating your view if something changed. You easily bind a 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. LetA's have a look at an example.

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, ...).

In the example we overwrite the function A"initialize" which is the constructor of the view class. It is always invoked if an instance is created. Within this constructor we bind the A"change:nameA" 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 A"changeA" 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.

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 A"/pageA" instead of A"#pageA". Backbone provides a graceful fallback for browsers without support of the history API.

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:

Truncated by Planet PHP, read more at the original (another 10790 bytes)