Developing Backbone.js Applications

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.

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

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
   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
   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
         1. Delving Deeper into MVC
         2. Summary
         3. Further Reading
         1. Backbone.js
         2. Used by
         1. Getting Set Up
         2. Models
            1. Initialization
               1. Default values
               1. Model.get()
               2. Model.set()
               3. Direct access
               1. Creating New Views
               2. What Is el?
                  1. $el and $()
                  2. setElement
                  3. Understanding render()
                  4. The events hash
                  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
                     1. Fetching Models from the Server
                     2. Saving Models to the Server
                     3. Deleting Models from the Server
                     4. Options
                     1. on(), off(), and trigger()
                     2. listenTo() and stopListening()
                     3. Events and Views
                     1. Backbone.history
                     1. Overriding Backbone.sync
                     1. Static HTML
                        1. Header and Scripts
                        2. Application HTML
                        3. Templates
                        1. Setting Up
                           1. Creating the Model, Collection, Views, and App
                           1. Adding Models
                           2. Removing Models
                           1. Install Node.js, npm, and MongoDB
                           2. Install Node Modules
                           3. Create a Simple Web Server
                           4. Connect to the Database
                           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
                                 1. Hello World
                                 2. Embedding Child Views
                                 3. View Helpers
                                 4. collection Helper
                                 5. Custom HTML Data Attributes
                                 6. Thorax Resources
                                 1. Working with Nested Views
                                    1. Problem
                                    2. Solution 1
                                    3. Solution 2
                                    4. Solution 3
                                    5. Solution 4
                                    1. Problem
                                    2. Solution
                                    1. Problem
                                    2. Solution
                                    1. Problem
                                    2. Solution
                                    1. Problem
                                    2. Solution
                                    1. Problem
                                    2. Solution
                                    1. Problem
                                    2. Solution
                                    3. Backbone.validateAll
                                    4. Backbone.Validation
                                    5. Form-Specific Validation Classes
                                    1. Problem
                                    2. Solution
                                    1. Problem
                                    2. Solution
                                    3. Calling Overridden Methods
                                    4. Backbone-Super
                                    1. Problem
                                    2. Solution
                                    3. Event Aggregator
                                       1. Backbone’s event aggregator
                                       2. jQuery’s event aggregator
                                       1. A mediator for Backbone
                                       1. Events
                                       2. Third-party objects
                                       1. Event aggregator use
                                       2. Mediator use
                                       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
                                             1. RequireJS configuration
                                                1. RequireJS Shims
                                                1. Wrapping models, views, and other components with AMD
                                                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
                                                   1. Backbone.Paginator
                                                      1. Live Examples
                                                      1. Convenience Methods
                                                      1. Convenience Methods
                                                      2. Implementation Notes
                                                      3. Plug-ins
                                                      4. Bootstrapping
                                                      5. Styling
                                                      6. Summary
                                                      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
                                                         1. Yeoman
                                                         2. Backbone DevTools
                                                         1. Mobile App Development with jQuery Mobile
                                                            1. The Principle of Progressive Widget Enhancement by jQMobile
                                                            2. Understanding jQuery Mobile Navigation
                                                            1. Routing to a Concrete View Page, Inheriting from BasicView
                                                            2. Management of Mobile Page Templates
                                                            3. DOM Management and $.mobile.changePage
                                                            1. Dynamic DOM Scripting
                                                            2. Intercepting jQuery Mobile Events
                                                            3. Performance
                                                            4. Clever Multiplatform Support Management
                                                            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
                                                                  1. Getting Set Up
                                                                     1. Sample HTML with QUnit-Compatible Markup
                                                                     1. Basic Test Case Using test( name, callback )
                                                                     2. Comparing the Actual Output of a Function Against the Expected Output
                                                                     1. Basic QUnit Modules
                                                                     2. Using setup() and teardown()
                                                                     3. Using setup() and teardown() for Instantiation and Clean Up
                                                                     1. Fixtures Example
                                                                     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
                                                                           1. Stubs
                                                                           2. Mocks
                                                                           1. Models
                                                                           2. Collections
                                                                           3. Views
                                                                           4. App
                                                                           1. A Simple JavaScript MVC Implementation
                                                                              1. Event System
                                                                              2. Models
                                                                              3. Views
                                                                              4. Controllers
                                                                              5. Practical Usage
                                                                              1. Models, Views, and Presenters
                                                                              1. What Is Namespacing?
                                                                                 1. Single global variables
                                                                                 2. Object literals
                                                                                 3. Nested namespacing
                                                                                 1. DOM Manipulation
                                                                                 2. Utilities
                                                                                 3. RESTful Persistence
                                                                                 4. Routing
                                                                                 1. Books and Courses
                                                                                 2. Extensions/Libraries
                                                                                 Show and hide more

                                                                                 Product information

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