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

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

So let’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 you’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 “view” because it represents a logical chunk of UI, responsible for the contents of a single DOM element. Backbone’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 “promptName”. The “this.set” function sets a hash of attributes on the model and triggers a “change” event. It’s 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. Let’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 “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.

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.

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:

Backbone is very flexible in the way you want to use it. The view as kind of controller keeps your code small and avoids useless overhead (in JavaScript). Backbone is really easy to understand and with the functions of underscore.js it’s very powerful as well. To use a proper template engine is always a good idea and eases the developing process. Backbone is well known, so you find lots of code examples or solutions for problems in the Internet. Initially you have to write more code as you probably would write normally. But this code is easy to maintain and extend. If you have the base structure of your application it’s much faster to work with Backbone. I am using Backbone for a while now and I absolutely recommend it. It’s best used in medium to large projects. For small projects it’s probably sufficient to “just” use a library like jQuery.

KnockoutJS

The website of Knockout is well organized and the key concepts are visible at first sight. It teasers “Declarative Bindings”, “Automatic UI Refresh”, “Dependency Tracking” and “Templating”. The documentation is well written and easy to read. It’s pretty short and lots of code examples are provided. The best way to get through the documentation is to read and try the examples. With only reading the documentation it could be difficult to understand Knockout. Have a look at the impressive 20-minute demo video from Steve Sanderson. It gives you a good roundup of knockout. After reading and testing a little while you are able to start programming applications. Awesome.

Knockout is a JavaScript library and not a framework like Backbone or JavaScriptMVC. It doesn’t provide classes to extend or inherit from. Anyway it helps to create rich user interfaces with an underlaying data model. It has features like “Observables and dependency tracking” which automatically updates the UI whenever your data model changes. “Declarative bindings” to connect parts of your UI to your data model. With “Templating” you can build complex, dynamic UIs with nested templates. Knockout is written in pure JavaScript and works with any server or client-side technology. It’s light weight as well with 29KB (minified). Like Backbone you just have to download knockout.js and include it in your application.

Knockout is related to the Model-View-View-Model (MVVM) design pattern to build rich user interfaces. The “model” is independent of any UI and stores the data of your application. The “view model” is the representation layer of the data and operates on a UI. Its important to understand that the view model is not the UI itself. It’s a pure JavaScript object without knowledge of any HTML. It just holds the unsaved data the user is currently working with.
The view represents the state of the view model. It displays information from the view model, delegates commands (i.e. click events) to the view model and updates itself if the state of the view model changes. A short example will demonstrate that.

In the view (HTML) the “text” binding clause will associate the DOM element with our view model parameter “personName”. After Knockout is activated via “ko.applyBindings(viewModel)” the view reads the content of this parameter and renders the text between the span tags. So the result of executing this code looks like:

You’ve seen how to create a basic view model and how to display its property via binding. But more interesting is how to update the view automatically. It’s pretty simple and achieved with so called observables. Just change the previous code into this:

That’s it. Try it in the JavaScript console of your browser and you will see the view being updated automatically.

Now I’d like to demonstrate Knockout with the same wish list example like I used in Backbone. So it could look like this:

It’s awesome to see the same example application as written in backbone earlier with much less JavaScript code. But we have to think about readable and understandable code and how hard it is to explain the code to new developers. I think the declarative binding in the HTML is probably hard to read and understand because you don’t really know where it belongs to. Some developers just won’t like mixing JavaScript and HTML together. If you bring your knockout code into good shape, use namespaces in your HTML bindings and create conventions how to use knockout in your application it could be easier to understand and maintain. Because knockout is “just“ a library and not a framework you don’t have the benefits of classes, inheritance, fixtures and so on. You have to implement that all by yourself. For huge projects you have to look closer into Knockout to check performance issues.
I think knockoutJS is absolutely worth a try. It’s a good decision if you have to implement rich user interfaces. If you organize your code well, it’s possible to build bigger applications. But I think the best use case is in small to medium projects.

JavaScriptMVC

The documentation on the website of JavaScriptMVC (JMVC) seems to be complicated and could be overstraining. It’s not that well structured like the previous ones and it is not really clear where to start. The installation process looks really complicated and could keep some developers from using JMVC. You have to download Java JRE and the full download size of JMVC with 27MB will probably surprising you. I can assure you it’s not that bad as it seems. A little bit more description why we have to do all these things could help to understand it easier. Anyway the whole installation process runs without problems and it works like described.

JavaScriptMVC is a really powerful framework. It consists of standalone components like StealJS, FuncUnit, jQueryMX and DocumentJS which are well tested and loved by many developers. This powerful stack provides everything you need to build well organized, tested and documented applications. Let’s have a look how everything fits together.

jQueryMX

With this component you have a collection of useful jQuery libraries to implement and organize large-scaled applications. It puts the Model-View-Controller pattern in JavaScript. It comes along with other useful things like an observable system, a DOM extension and special events as well as a browser history routing.

StealJS

This awesome component is a “code manager” to keep your code beautiful and well organized. It’s a collection of command line and browser based utilities to do things like:

• load JavaScript, CSS, LESS and CoffeeScript files
• build all files into a single production file
• generate a file and folder structure with tests and documentation scripts
• install third party dependencies
• check your code with JSLint and beautify it with steal’s clean
• make your AJAX application crawlable
• log messages in development mode

To generate an application simply execute the following command:

This will generate your application structure with everything you need.

The scaffold generator helps you to create a model quickly. It creates fixtures to simulate a service, widgets with basic actions and all dependencies are automatically included. You can just start editing the widgets for your purpose. All you have to do is to execute the following command:

There are lots of awesome commands to simplify the developing process.

FuncUnit

FuncUnit is a web application testing framework. It provides automated unit and functional testing. You can run these tests practically on every browser or system.
You can start your tests easily within the browser with:

or run your tests in Envjs with the command:

DocumentJS

This component generates a documentation application of your application. The only thing you have to do is to run the following command:

JMVC is so modular you can easily install all the components or just the ones you need.

I like JMVC! It’s easy to structure your code, generate everything you like, check your code all the time and with a single command your application is ready to go. Of course it’s a heavy framework and for the shown example absolutely oversized. It’s not that easy to understand like the previous ones but definitive worth to try it anyway. We use JavaScriptMVC for big projects where unit tests and an API documentations are essential. The framework has proven its power over a “long” time so you will find lots of code examples and solutions for your problems. I would recommend JMVC for big projects or projects with the need of high code quality and well documented API.

The following code demonstrates the wish list example implemented with the help of JavaScriptMVC. I put the code into one single file to improve readability here.

In summery I would say Backbone, Knockout and JavaScriptMVC are all pretty good libraries. I would prefer KnockoutJS for smaller projects to create user interfaces in a short amount of time. For bigger projects I would use BackboneJS. It’s easy to implement and well organized. I would choose JavaScriptMVC for large projects where high quality and long term support is expected.

Links/Sources

• BackboneJS
• KnockoutJS
• JavaScriptMVC
• Book: JavaScript Web Applications – Alex MacCaw