small medium large xlarge

Hands-on Backbone.js


Cover image for Hands-on Backbone.js

Hands-on Backbone.js


With a nearly endless stream of success stories, blog posts, add-ons and frameworks built on top of Backbone.js, you don’t need another set of marketing materials to tell you why you should be working with Backbone.js. What you need is a way to get started quickly – to get up to speed with Backbone’s components, learning how to orchestrate them to create rich, interactive applications in a browser. This series of screencasts from Backbone.js expert Derick Bailey, will teach you what you need to know in a straight-to-the-point, hands-on way to building single page applications for today’s modern web.

About this Title

Available in: DRM-free Quicktime Video, iPad/iPhone 4 Video, and Theora Ogg
Download and watch when and where you want

Backbone.js is a hot topic these days, and with good reason. It powers some of the web’s most well-known applications including the LinkedIn mobile app, the Wal-Mart mobile app, rdio’s music player for both the web and their desktop clients, the Disqus commenting widget and much, much more. This little library of simple abstractions has helped to create a new generation of interactive and rich applications for the web, and it’s time for you to learn it.

But this isn’t marketing material to try and sell you on why you should use Backbone instead of Ember, Angular, Batman (yes, there’s a JavaScript MVC framework called Batman) or anything else. This is a hands-on, down and dirty, straight-to-the point walkthrough of all of the core components of Backbone. It will show you the fundamentals of creating single page applications in one of today’s most powerful JavaScript libraries. It will get you up to speed on how to use all of the components of Backbone, alongside your own JavaScript code, to create a rich and interactive image gallery application. And it will show you many of the common pitfalls and errors that you’ll run into, and how to avoid and correct for those problems.

In this 4 part screencast series, Backbone.js expert Derick Bailey will walk you through a hands-on introduction to building an image gallery application with Backbone, from the ground up. You’ll learn how to take an existing HTML form and jQuery code base, and migrate that into a Backbone view. You’ll use models and collections to store the image information entered into the form, and display a list of images to choose from and view. You’ll build an image viewer from a list, and see how to take advantage of the browser’s forward and back buttons with routers. Server persistence of image data will let the application reload from where the user left off, and common error scenarios will be handled.

Check out the preview (3 min):


Contents & Extracts

1. From jQuery To Backbone: Getting Started

  • Introduction and a brief discussion of Backbone’s components
  • Starting with a jQuery based form
  • Migrating from jQuery to a Backbone view
  • Introducing models for collecting data
  • Storing models in a collection
  • Displaying a list of images as thumbnails

2. A Single Page App: Routing And Navigation

  • Some basic house cleaning (code cleanup)
  • Preloading image data
  • Clicking an image preview
  • Displaying the selected image
  • Code cleanup: a collection view and item view
  • Routers: navigating between add and view image
  • Visually tracking the selected image
  • Navigating with the left and right arrows

3. A Better Structure: Application Initializers And Data Bootstrapping

  • Managing visual regions
  • Reducing boilerplate code with Backbone.Marionette
  • Application initializers
  • Bootstrapping data from the server

4. Saving And Loading: Server Side Persistent And Handling Common Errors

  • A RESTful API for image data
  • Fetching image data from the server
  • Adding a new image (data persistence)
  • Editing an image (data persistence)
  • Updating the image list after editing an image
  • Canceling edits
  • Deleting an image
  • Handling navigation errors


In addition to the usual code archive you can get the complete code for all four episodes from


Derick Bailey is an independent consultant, developer, trainer, speaker and author, living in Waco, TX. He’s been slinging code since the late 80’s and doing it professionally since the mid 90’s. These days Derick spends his time primarily writing JavaScript with some Ruby and .NET thrown in for good measure, while dabbling in other bits on occasion. He blogs at, produces independent screencasts at, provides consulting and training services at, and spends a great deal of time working on and contributing to open source projects at