Fancy working with a small team remotely? SupportBee is hiring developers!
Take a look at our jobs page

Chapter 2

Introduction to Backbone.js

The single page ecosystem has exploded in the last couple of years. There are dozens of frameworks available to build single page apps. Apart from Backbone.js, Ember.js, Knockout.js and AngularJS by Google are some of the other popular alternatives. If you are still deciding on which framework to use, you have a tough job ahead! Every framework has it's pros and cons and there are many comparisons available on the internet.

Why we picked Backbone.js

When starting work on SupportBee's frontend, we started exploring client side MVC frameworks and started exploring the choices available back then (late 2010). On one end, there were big frameworks like ExtJS and SproutCore that offered the MVC structure, widgets and many other components. On the other end were simple MVC frameworks like Backbone.js and Knockout.js that provided just enough structure to your application and got out of the way. Coming from a jQuery background and having witnessed the jQuery plugin ecosystem, we decided to opt for the simpler MVC frameworks for structuring code and sticking with jQuery plugins for additional functionality. This way we could avoid any kind of lock in and pick and choose the components we needed based on the functionality and quality of documentation.

A quick walkthrough of the framework

If you are new to Backbone.js, there are some really great tutorials and books out there.Backbone.js Wiki has a page full on tutorials and books and serves as a great starting point. If you have any favorites, please leave the links in the comments.

If you have looked at Backbone.js before, this short introduction should suffice for you. Let's get started!

In their own words,

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Let's go over the main components of Backbone.js (in the order that they are introduced in, in the official documentation)

Events

Events are at the heart of Backbone.js and any well designed single page app. By mixing in the Events module, almost any object can dispatch and listen to events. Out of the box Models, Views and Controllers can dispatch and listen to events. There are several pre-defined events in Backbone.js and you can (and you should, as we will see later) define and dispatch custom events. Let's look at a quick example (taken from the Backbone.js documentation)

In this simple example, every time object wants to alert someobject, it can dispatch the alert event. Other objects can bind to this event and respond however they want. The object does not need to know who is listening to this event and what they are doing with that information.

Backbone.Model

Backbone Models offer you a way to organize your domain specific code. Just like models in other MVC frameworks like Ruby on Rails, models in Backbone.js manage the domain data, validations etc. Using Backbone.Sync, they also take care of saving and fetching data from the server.

However, unlike Rails' models, Backbone.js models can help you manage change too. Every time an attribute changes, the model will fire a change event that other objects in your app can listen to. This happens whether you fire the change (by calling the set method) or you do a fetch and an updated value for the attribute is returned by the server. Continuing our product update example from the last chapter, we will create a Product model and bind to the change:price event to update the price on the page.

As you will see in subsequent chapters, this is very powerful and helps you build interactive apps much more easily.

Backbone.Collection

Backbone Collections are ordered set of Models. Most single page applications need atleast one (and often more) collections. For example, a simple To-Do application would model each To-Do item as a model and the entire list as a To-Do collection. A more complex application like Gmail might have an Email model but many collections (one each for Inbox, Sent, Starred etc).

Just like models, collections fire events whenever things change. Everytime a new model is added to the collection or a model is removed, a change event is fired. This helps you update the UI or do other interesting things. For example, in the product listing example from the previous page, we will create a Products collection. We will also bind to the add and remove events so we can render a new product or remove a product from the page whenever a product is added or removed from the catalog.

Backbone.Router

Backbone.Router provides methods for routing client-side pages, and connecting them to actions and events. A simple example can illustrate this very well

The Workspace router will setup routes such as /help (or #help if you are on an older browser that does not support HTML5 history API). Whenever a route is matched, the corresponding handler (function) will be invoked. The Backbone.js documentation on Router gives a good overview of all the features. While the docs don't explicitly state it, you can create routes on the fly. This is a powerful feature that we use a lot in SupportBee. We'll talk about it and a few other patterns in a subsequent chapter.

Backbone.Sync

Sync is responsible for all the server integrations. Whenever you save a model or fetch a collection, Backbone.Sync is involved. The Backbone documentation gives a great overview and if you are building a typical web-app that talks to a RESTful API, you will hardly have to fiddle with Backbone.Sync.

Backbone.View

Even though it is called a View, I like to think of Backbone.View as more of a controller (much like Rails Controller). Views by themselves don't really render any HTML or CSS (just like Rails controller don't render html - the template does).

In a Backbone.js app, views are responsible for initializing the right models or collections, binding to the right events and making sure different components can work together. When handling the right events, they can render templates and attach the rendered HTML to the DOM. Backbone does not force you into using a specific templating language (since it does not really render anything). Some of this may sound very abstract. Don't worry! We will explain these ideas as the book progresses.

The Backbone.js Ecosystem

Even though Backbone.js is fairly simple and does a few things (and does them well), over the last few years, the Backbone ecosystem has exploded with dozens of libraries. The Backbone.js Wiki has a good list of plugins and other resources that you may find useful.

Before you go crazy with the extensions, I encourage you to build an app without too many dependencies. As your app grows and you find inefficient or time consuming tasks, start looking for plugins.

Recommended Reading

While I was compiling the recommended reading list, I realized that If you have any specific books or tutorials that you found useful, leave them as a comment and I will slowly compile a list in this section.

Tell Me What You Think!

What else would you like to see? What do you think is missing or not needed?

comments powered by
Disqus