Developing Backbone.js Applications

Developing Backbone.js Applications

by Addy Osmani
Released May 2013
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449328559

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

If you want to build your site’s frontend with the single-page application (SPA) model, this hands-on book shows you how to get the job done with Backbone.js. You’ll learn how to create structured JavaScript applications, using Backbone’s own flavor of model-view-controller (MVC) architecture.

Start with the basics of MVC, SPA, and Backbone, then get your hands dirty building sample applications—a simple Todo list app, a RESTful book library app, and a modular app with Backbone and RequireJS. Author Addy Osmani, an engineer for Google’s Chrome team, also demonstrates advanced uses of the framework.

  • Learn how Backbone.js brings MVC benefits to the client-side
  • Write code that can be easily read, structured, and extended
  • Work with the Backbone.Marionette and Thorax extension frameworks
  • Solve common problems you’ll encounter when using Backbone.js
  • Organize your code into modules with AMD and RequireJS
  • Paginate data for your Collections with the Backbone.Paginator plugin
  • Bootstrap a new Backbone.js application with boilerplate code
  • Use Backbone with jQuery Mobile and resolve routing problems between the two
  • Unit-test your Backbone apps with Jasmine, QUnit, and SinonJS

Publisher resources

View/Submit Errata

Table of contents

  1. Developing Backbone.js Applications
  2. Preface
    1. Target Audience
    2. Credits
    3. Reading
    4. Conventions Used in This Book
    5. Using Code Examples
    6. Safari® Books Online
    7. How to Contact Us
    8. Acknowledgments
  3. 1. Introduction
    1. What Is MVC?
    2. What Is Backbone.js?
    3. When Do I Need a JavaScript MVC Framework?
    4. Why Consider Backbone.js?
    5. Setting Expectations
  4. 2. Fundamentals
    1. MVC
      1. Smalltalk-80 MVC
      2. MVC Applied to the Web
      3. Client-Side MVC and Single-Page Apps
      4. Client-Side MVC: Backbone Style
      5. Implementation Specifics
        1. Models
        2. Views
        3. Templating
        4. Handlebars.js
        5. Underscore.js microtemplates
        6. Controllers
    2. What Does MVC Give Us?
      1. Delving Deeper into MVC
      2. Summary
      3. Further Reading
    3. Fast Facts
      1. Backbone.js
      2. Used by
  5. 3. Backbone Basics
    1. Getting Set Up
    2. Models
      1. Initialization
        1. Default values
      2. Getters and Setters
        1. Model.get()
        2. Model.set()
        3. Direct access
      3. Listening for Changes to Your Model
      4. Validation
    3. Views
      1. Creating New Views
      2. What Is el?
        1. $el and $()
        2. setElement
        3. Understanding render()
        4. The events hash
    4. Collections
      1. Adding and Removing Models
      2. Retrieving Models
      3. Listening for Events
      4. Resetting/Refreshing Collections
      5. Underscore Utility Functions
        1. forEach: Iterate over collections
        2. sortBy(): Sort a collection on a specific attribute
        3. map(): Create a new collection by mapping each value in a list through a transformation function
        4. min()/max(): Retrieve item with the min or max value of an attribute
        5. pluck(): Extract a specific attribute
        6. filter(): Filter a collection
        7. indexOf(): Return the item at a particular index within a collection
        8. any() : Confirm if any of the values in a collection pass an iterator truth test
        9. size(): Return the size of a collection
        10. isEmpty(): Determine whether a collection is empty
        11. groupBy(): Group a collection into groups like items
        12. pick(): Extract a set of attributes from a model
        13. omit(): Extract all attributes from a model except those listed
        14. keys() and values(): Get lists of attribute names and values
        15. pairs(): Get list of attributes as [key, value] pairs
        16. invert(): Create object in which the values are keys and the attributes are values
      6. Chainable API
    5. RESTful Persistence
      1. Fetching Models from the Server
      2. Saving Models to the Server
      3. Deleting Models from the Server
      4. Options
    6. Events
      1. on(), off(), and trigger()
      2. listenTo() and stopListening()
      3. Events and Views
    7. Routers
      1. Backbone.history
    8. Backbone’s Sync API
      1. Overriding Backbone.sync
    9. Dependencies
    10. Summary
  6. 4. Exercise 1: Todos—Your First Backbone.js App
    1. Static HTML
      1. Header and Scripts
      2. Application HTML
      3. Templates
    2. Todo Model
    3. Todo Collection
    4. Application View
    5. Individual TodoView
    6. Startup
    7. In Action
    8. Completing and Deleting Todos
    9. Todo Routing
    10. Summary
  7. 5. Exercise 2: Book Library—Your First RESTful Backbone.js App
    1. Setting Up
      1. Creating the Model, Collection, Views, and App
    2. Wiring in the Interface
      1. Adding Models
      2. Removing Models
    3. Creating the Backend
      1. Install Node.js, npm, and MongoDB
      2. Install Node Modules
      3. Create a Simple Web Server
      4. Connect to the Database
    4. Talking to the Server
    5. Summary
  8. 6. Backbone Extensions
    1. MarionetteJS (Backbone.Marionette)
      1. Boilerplate Rendering Code
      2. Reducing Boilerplate with Marionette.ItemView
      3. Memory Management
      4. Region Management
      5. Marionette Todo App
        1. TodoMVC.js
        2. TodoMVC.Layout.js
        3. TodoMVC.TodoList.js
        4. Controllers
        5. CompositeView
        6. TodoMVC.TodoList.Views.js
        7. Todos.js
      6. Is the Marionette Implementation of the Todo App More Maintainable?
      7. Marionette and Flexibility
      8. And So Much More
    2. Thorax
      1. Hello World
      2. Embedding Child Views
      3. View Helpers
      4. collection Helper
      5. Custom HTML Data Attributes
      6. Thorax Resources
    3. Summary
  9. 7. Common Problems and Solutions
    1. Working with Nested Views
      1. Problem
      2. Solution 1
      3. Solution 2
      4. Solution 3
      5. Solution 4
    2. Managing Models in Nested Views
      1. Problem
      2. Solution
    3. Rendering a Parent View from a Child View
      1. Problem
      2. Solution
    4. Disposing View Hierarchies
      1. Problem
      2. Solution
    5. Rendering View Hierarchies
      1. Problem
      2. Solution
    6. Working with Nested Models or Collections
      1. Problem
      2. Solution
    7. Better Model Property Validation
      1. Problem
      2. Solution
      3. Backbone.validateAll
      4. Backbone.Validation
      5. Form-Specific Validation Classes
    8. Avoiding Conflicts with Multiple Backbone Versions
      1. Problem
      2. Solution
    9. Building Model and View Hierarchies
      1. Problem
      2. Solution
      3. Calling Overridden Methods
      4. Backbone-Super
    10. Event Aggregators and Mediators
      1. Problem
      2. Solution
      3. Event Aggregator
        1. Backbone’s event aggregator
        2. jQuery’s event aggregator
      4. Mediator
        1. A mediator for Backbone
      5. Similarities and Differences
        1. Events
        2. Third-party objects
      6. Relationships: When to Use Which
        1. Event aggregator use
        2. Mediator use
      7. Event Aggregator and Mediator Together
      8. Pattern Language: Semantics
  10. 8. Modular Development
    1. Organizing Modules with RequireJS and AMD
      1. Maintainability Problems with Multiple Script Files
      2. Need for Better Dependency Management
      3. Asynchronous Module Definition (AMD)
      4. Writing AMD Modules with RequireJS
        1. Alternate syntax
      5. Getting Started with RequireJS
        1. RequireJS configuration
          1. RequireJS Shims
        2. Custom paths
      6. Require.js and Backbone Examples
        1. Wrapping models, views, and other components with AMD
      7. Keeping Your Templates External Using RequireJS and the Text Plug-in
      8. Optimizing Backbone Apps for Production with the RequireJS Optimizer
    2. Summary
  11. 9. Exercise 3: Your First Modular Backbone and RequireJS App
    1. Overview
    2. Markup
    3. Configuration Options
    4. Modularizing Our Models, Views, and Collections
    5. Route-Based Module Loading
      1. JSON-Based Module Configuration
      2. Module Loader Router
      3. Using NodeJS to Handle pushState
    6. An Asset Package Alternative for Dependency Management
  12. 10. Paginating Backbone.js Requests and Collections
    1. Backbone.Paginator
      1. Live Examples
    2. Paginator.requestPager
      1. Convenience Methods
    3. Paginator.clientPager
      1. Convenience Methods
      2. Implementation Notes
      3. Plug-ins
      4. Bootstrapping
      5. Styling
      6. Summary
  13. 11. Backbone Boilerplate and Grunt-BBB
    1. Getting Started
    2. Creating a New Project
      1. index.html
      2. config.js
      3. main.js
      4. app.js
      5. Creating Backbone Boilerplate Modules
      6. router.js
    3. Other Useful Tools and Projects
      1. Yeoman
      2. Backbone DevTools
    4. Summary
  14. 12. Backbone and jQuery Mobile
    1. Mobile App Development with jQuery Mobile
      1. The Principle of Progressive Widget Enhancement by jQMobile
      2. Understanding jQuery Mobile Navigation
    2. Basic Backbone App Setup for jQuery Mobile
    3. Workflow with Backbone and jQueryMobile
      1. Routing to a Concrete View Page, Inheriting from BasicView
      2. Management of Mobile Page Templates
      3. DOM Management and $.mobile.changePage
    4. Applying Advanced jQM Techniques to Backbone
      1. Dynamic DOM Scripting
      2. Intercepting jQuery Mobile Events
      3. Performance
      4. Clever Multiplatform Support Management
  15. 13. Jasmine
    1. Behavior-Driven Development
    2. Suites, Specs, and Spies
    3. beforeEach() and afterEach()
    4. Shared Scope
    5. Getting Set Up
    6. TDD with Backbone
    7. Models
    8. Collections
    9. Views
      1. View Testing
        1. Initial setup
        2. View rendering
        3. Rendering with a templating system
    10. Exercise
    11. Further Reading
    12. Summary
  16. 14. QUnit
    1. Getting Set Up
      1. Sample HTML with QUnit-Compatible Markup
    2. Assertions
      1. Basic Test Case Using test( name, callback )
      2. Comparing the Actual Output of a Function Against the Expected Output
    3. Adding Structure to Assertions
      1. Basic QUnit Modules
      2. Using setup() and teardown()
      3. Using setup() and teardown() for Instantiation and Clean Up
    4. Assertion Examples
    5. Fixtures
      1. Fixtures Example
    6. Asynchronous Code
  17. 15. SinonJS
    1. What Is SinonJS?
      1. Basic Spies
      2. Spying on Existing Functions
      3. Inspection Interface
        1. Matching arguments: Test that a spy was called with a specific set of arguments
        2. Stricter argument matching: Test that a spy was called at least once with specific arguments and no others
        3. Testing call order: Test that a spy was called before or after another spy
        4. Match execution counts: Test that a spy was called a specific number of times
    2. Stubs and Mocks
      1. Stubs
      2. Mocks
    3. Exercise
      1. Models
      2. Collections
      3. Views
      4. App
    4. Further Reading and Resources
  18. 16. Conclusions
  19. A. Further Learning
    1. A Simple JavaScript MVC Implementation
      1. Event System
      2. Models
      3. Views
      4. Controllers
      5. Practical Usage
    2. MVP
      1. Models, Views, and Presenters
    3. MVP or MVC?
    4. MVC, MVP, and Backbone.js
    5. Namespacing
      1. What Is Namespacing?
        1. Single global variables
        2. Object literals
        3. Nested namespacing
      2. What Does DocumentCloud Use?
      3. Recommendation
    6. Backbone Dependency Details
      1. DOM Manipulation
      2. Utilities
      3. RESTful Persistence
      4. Routing
    7. Backbone Versus Other Libraries and Frameworks
  20. B. Resources
    1. Books and Courses
    2. Extensions/Libraries
  21. Index
  22. About the Author
  23. Colophon
  24. Copyright

Product information

  • Title: Developing Backbone.js Applications
  • Author(s): Addy Osmani
  • Release date: May 2013
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449328559