Get practical, hands-on experience building real features with Backbone.js. Edit and run code right in the book!

You can't learn to build killer modern Web applications in Backbone.js and CoffeeScript by reading alone. It is crucial to experience the living, working code. To experiment, tweak, break, and succeed. To discover the character of the framework and language at the same time that you master the high-level concepts and structure.

This online book provides the methodical, in-depth coverage you expect from a traditional programming text, but was conceived from its inception to be an interactive experience. Backbone, Underscore, Mocha, and other libraries are live in the text. The code examples are available for download, but they are also editable and runnable right in the page. You will be prompted and encouraged into active learning.

I believe the environment I've built will help you learn Backbone.js faster and more conveniently than you would from a traditional programming book. If I'm wrong, you can keep access to the book, and have your money back.

Author Chris Smith

( @quartzmo , coffeescriptlove.com)

"I knew I needed to learn Backbone, but I just couldn't wrap my head around it. I found ScriptyBooks and it all clicked! I went full-speed ahead on Flinto and it launched today to rave reviews." -- Nathan Manousos

A Short Sample

Do you like the power of functional programming? Backbone collections proxy over two dozen functions from the Underscore utility library, including map, reduce, find, reject, min, max, and shuffle. Let's use filter on a collection to extract only the models containing an even-numbered pos value.

collection-filter
collection = new Backbone.Collection(
  [{pos: 1, token: 'k'}, {pos: 2, token: 'm'}, {pos: 3, token: 'l'},
   {pos: 4, token: 'v'}, {pos: 5, token: 'c'}, {pos: 6, token: '*'}]
)

evens = collection.filter (model) ->
  model.get('pos') % 2 is 0

result = _.map(evens, (model) -> model.get('pos'))

result.should.eql [2, 4, 6]
         

Since filter returns an array rather than a new collection, we can't use pluck for our assertion. Fortunately, Underscore's map function lets us create a result array to compare with our expected value.

For practice, let's build a string from the token values in the even-numbered models. First, do it the easy way: Edit the map callback to return token values, then call join('') on the result. Next, try a more functional solution: Use reduce instead of filter, adding each model's token value to the collecting parameter when the filter condition is true. Did you get it? Check the docs for reduce if you need help.


"Dang this is cool. I have to say you have done a bang up job with inlining the test environment right into the book. Very cool." -- Michael Natkin

Table of Contents

Backbone version: 1.0.0
CoffeeScript version: 1.6.1

Introduction

Read Published August 29, 2012 Updated February 02, 2013 3107 words

The introduction is oriented around two pressing questions: Why should you choose Backbone for your project? Why should you choose CoffeeScript? Despite our bias for this charming pair, we'll discuss the pros and cons of each, and mention some alternatives. Also, we'll explain a bit about the book: for whom it is intended, and how it should be read.

Quick Tour

Read Published May 09, 2012 Updated December 19, 2012 3275 words

Backbone is just a small layer built on top of old friends like jQuery, which makes it easy to get started building rich client-side features of virtually any size. In this chapter we do just that, taking a whirlwind tour through Models, Views, Events, Collections, and Routers. When we're done, we'll have a working feature that we can run right in the chapter.

Setup and Structure

View Published August 15, 2012 Updated December 19, 2012 4189 words

The goal of this chapter is to provide a guide to using Backbone in the real world. After covering the basics of getting started with both Backbone and CoffeeScript, we will then discuss the more advanced topics of how to organize your application and package it for delivery to the client.

Models and Domain Logic

View Published May 22, 2012 Updated February 24, 2013 4063 words

Backbone Models are not difficult to understand, but by mixing in sync, validation, and events, they are powerful despite the apparent simplicity. Best of all, they give you a place to put your domain logic away from the DOM, where it can easily be understood, maintained, and tested.

Collections and Sync

View Published June 06, 2012 Updated March 23, 2013 4733 words

Managing Models in a group is easy with Collections. The Collections api offers an extremely rich set of functions from Underscore, including map, pluck, reject, and shuffle. Also, just like Models, Collections provide a set of helpful Events that Views can observe. We will also take a look at backend integration.

Views and Events

View Published June 19, 2012 Updated March 30, 2013 3498 words

Views bring your Backbone application to life. Building upon the Events infrastructure mentioned in the previous chapter, we can now 'wire up' our Views to respond to changes to the data in our Models. We will build an interactive feature that accepts user input, and demonstrates both nested and dispersed Views.

Eco Templates

View Published July 04, 2012 Updated November 21, 2012 3329 words

To remain manageable, templates must keep programming code to a minimum, and Eco kindly ushers in all of CoffeeScript's clean, readable power. In this chapter we'll get into more advanced templating topics with Eco, such as helper functions, localization, and nesting.

Routers and History

View Published July 18, 2012 Updated January 24, 2013 3909 words

The Web is all about links, but until recently, most rich client-side Web applications lived at a single URL, making it impossible to share or bookmark links to important resources. Backbone's Router and History make it easy to develop a modern application that uses pushState (or hashtags) to keep the browser's address bar and history in the loop.

RESTful JSON APIs with Rails

View Published July 31, 2012 Updated January 24, 2013 3744 words

Backbone can work with any Web server, but it was initially developed with Ruby on Rails, so Rails will be the subject of our in-depth look at integration. The approach is largely the same for any RESTful JSON API server, however, so no matter which platform you use, the material in this chapter will be relevant.