Developing Backbone.js Applications

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