This is the fourth in a series of articles dedicated to useful libraries that all web developers should have in their toolbox. The intent is to show you what those libraries can do and help you to use them at their best. This fourth article is dedicated to the Backbone library.
Backbone is made of 4 core objects that will be used to drive your application:
Router. To make things a little clearer here is a quick schema of their interaction:
Those kind of objects are the heart of your application. They will contain the whole logic of your application and they will dispatch events each time they are updated. That way, you can easily bind a View object to a model in order to react to any change. Those objects are actually wrappers around your own application business logic (Functions, Objects, Libraries, whatever).
As stated by its name, this type of object is a collection of
Model objects with their own logic to sort them, filter them, etc. This object is a convenient way to make the glue between the model and the view because it is some sort of a super Model object. Any change send by a Model object in a collection is also sent by the collection so it makes easy to bind a view to several Model objects.
change” event — and thanks to that everywhere that model data is displayed in the UI, it’s immediately updated.
Those objects provides methods for routing URLs, and connecting them to actions and events on Model objects. It relies on the History API to nicely handle the URLs. For browsers which don’t yet support the History API, it handles graceful fallback and transparent translation to a hash fragments’ URL.
So as you can see it’s not necessarily a canonical implementation of the MVC design pattern but it allows you to work that way with high flexibility.
Getting started or Digging into it
Digging into Backbone is not that simple. As you can see, I haven’t tried to provide some code sample in this article. Even if the documentation is well written it’s sometimes a bit difficult to understand how to use the full API. Fortunately, there is some very good tutorials and projects out there and I recommend the following:
- The famous Backbone Tutorial by Thomas Davis
- The Hello Backbone tutorial by Artur Adib, which is a very thoughtful progressive list of commented code samples and examples
If you know some other good resources, feel free to add it through the comments ;)
Limits and precautions
Another point you should take care of is that backbone remains a very low level library that can be hard to deploy and to use easily. This is mainly due to the fact that it’s just a library rather than a full framework with coding conventions. Some aside projects try to make it more user friendly. One of the best known is the Chaplin project.
Backbone is one of the best libraries to help you build powerful applications. Even if its MVC implementation is somewhat unconventional, it’s a very good way to structure your code and being able to make your code base grow without too much trouble. Of course there are other libraries that do similar things such as Ember or Knockout. If you plan to work on a large application, you really should consider using one of them.
About Jeremie Patonnier
Jeremie is a Mozilla contributor to MDN and personally dedicated to the promotion of the Open Web. He has been working since 2000 with Front End development for the web in France. He also blogs in French at http://jeremie.patonnier.net or http://typographisme.net, tweets as @JeremiePat and loves to share his knowledge with everybody.