Contents

About the Author

About the Technical Reviewer

Acknowledgments

Introduction

 Chapter 1: An Introduction to Backbone.js

What Is Backbone.js?

Mission Statement

Design Patterns for Web Applications

Model View Controller

Model View *

How Backbone Supports Model View *

Other JavaScript Model View * Frameworks

Backbone Adoption in the Real World

Companies Using Backbone

Five Reasons to Use Backbone in Your Project

Three Reasons Backbone Might Not Be Right for You

Getting Backbone Setup

Downloading Backbone

Testing Your Setup: Backbone Project Structure

Some Tips for Your Development Environment

Summary

 Chapter 2: Getting Object-Oriented

The Rise of JavaScript

JavaScript Versions

Executing JavaScript Snippets

What Is an Object Anyway?

JavaScript: The Basics

Primitive Data Types

Core Objects in JavaScript

Basic Syntax

Declaring Variables

Loops and Conditionals

Arrays

Closures

Making JavaScript Object-Oriented

Creating a Simple Object in JavaScript

Defining Constructors

Creating Methods

JavaScript Prototype

Encapsulation

Inheritance Using Prototype

Controlling Access to Methods and Properties

Providing a Namespace

Object-Oriented Frameworks for JavaScript

PrototypeJS

MooTools

Backbone.js

Summary

 Chapter 3: Backbone Models and Collections

System Setup

Backbone Models

Constructors

Model Attributes

Adding Functions to Your Model

Model Events

Model Validation

Exchanging Data with the Server

Extending Your Own Models

Backbone Collections

Constructors

Manipulating Collections

Traversing Collections

Other Utility Methods

Exchanging Data with the Server

Collection Quick Reference

Summary

 Chapter 4: Backbone View and Templating Libraries

Code Setup

Backbone Views

Creating a Backbone View

Binding to the Physical View

Rendering Content

View Events

Dealing with self and this

Backbone View Quick Reference

Templating in Backbone

Templating with Underscore

Templating with Handlebars

Using Handlebars with Backbone

A Quick Guide to Handlebars

Providing Helpers

Precompiling Templates

Templating with Mustache

Using Mustache with Backbone

A Quick Guide to Mustache

Which Templating Library to Use?

Summary

 Chapter 5: Routers and Events

Backbone Routers

Creating a Router

Backbone.History

Using pushState

Routes for All Applications

Adding Parameters to Routes

Route Events

Manually Creating Routes

Navigating Programmatically

The Router as a Controller

Backbone Events

Binding Events

Unbinding Events

Listening to an Event Once

Listen to Events on Other Objects

Triggering Events

Built-in Events

Creating Custom Events

Listening for DOM Events

Summary

 Chapter 6: From Start to Finish: A Complete App Example

Designing Your Application

CSS Styles

Application Domain

Application Code Structure

External Dependencies

Bringing It All Together

First Steps: Dealing with Authentication

Getting Set Up on Twitter

Keeping Secrets on Servers

Showing the Twitter Timeline

Adding the Profile View

Profile Data Layer

Profile View

Putting It All Together

Reusing the Profile View

Making the Profile Model Reusable

Changing the Behavior on the Timeline

Adding Events to the Timeline View

Creating a Pop-up Dialog for Profiles

Adding Search Functionality

The Data Layer

Adding the Search View

Sharing Models Between Backbone Objects

Error Handling

Summary

 Chapter 7: The Backbone Ecosystem

Code Samples

User Interface Components

LayoutManager

Backgrid

Backbone UI

Backbone.stickit

Backbone.Notifications

Models and Collection Extensions

Backbone.trackit

Backbone.memento

Backbone.localStorage

Backbone.dualStorage

Backbone.ViewModel

Backbone-Validator

Query Engine

ModelAttrs

Developer Tools and Utilities

Quick Reference

Summary

 Chapter 8: Testing Your Backbone.js Application

The Advantages of Test-Driven Development

Putting Forward the Case for Test-Driven Development

Dealing with Legacy Codebases

Test Automation

Testing with QUnit

Getting Started with QUnit

A Simple Backbone Model Test

Sinon.JS

Test Spies

Test Stubs and Mocks

Using Fake Servers

Testing with Jasmine

Getting Started with Jasmine

Expectations

Summary

 Chapter 9: Using Grunt for Your Build Process

An Introduction to Grunt

Some Reasons to Choose Grunt

Installing Grunt

Adding Grunt to Existing Projects

Task Configuration

Dealing with Files

Using Grunt for Your Project

Adding Static Analysis Tools

Minifying JavaScript Source

Minifying CSS

Automating Your Test Suite

Creating Different Task Sets

Project Scaffolding

Some Useful Grunt Plug-Ins

Summary

 Chapter 10: Extending Backbone with Marionette and Thorax

Marionette

Getting Started with Marionette

Marionette Feature Set

A Simple Marionette Application

Thorax

Thorax Feature Set

Getting Started with Thorax

An Introduction to Thorax Types

Using Thorax for the Twitter Example

Summary

 Chapter 11: Best Practices with Backbone

General Best Practices

Maintain a Clear Separation of Concerns

Add Error Handling Patterns to Your Application

Avoiding Memory Leaks

Unbind Events When Closing Views

Use listenTo for Event Handling

Use a Pattern to Close Views Correctly

Rendering Views

Render Only What You Need

Reduce Template Bloat with Partials

Precompile Templates in Handlebars

View Management

Sharing Common Code Between Views

Updating a Parent View from a Subview

Network Performance

Minimize Requests on Page Load

Perceived Performance

Optimistic Network Calls

Use Document Fragment for Rendering Collections

Use Models to Store Extra Data

Cache Objects Where Possible

Summary

 Chapter 12: Creating a Manageable JavaScript Code Base

Using RequireJS to Create Modular Applications

What Is RequireJS?

Using RequireJS

Defining and Using Modules

Including RequireJS in a Backbone Application

Using Yeoman to Get Started Quickly

Installing Yeoman

Using the Backbone Generator

Design Patterns for Backbone Applications

Leveraging the Facade Pattern

Leveraging th e Mediator Pattern

Summary

Index