small medium large xlarge

Backbone Marionette


Cover image for Backbone Marionette

Backbone Marionette


Leverage Backbone.js while increasing your productivity! This is a great resource for learning Marionette the “right” way, even for total beginners. In this book, you’ll develop a complete Marionette.js application, and you’ll become comfortable with the library. You’ll learn how to structure and refactor your code so it stays manageable even for large applications. Whether you’re new to web apps, or an experienced developer looking to quickly master yet another framework, you’ll get there in no time. All you need is a basic understanding of JavaScript and the DOM.

Now updated for Marionette 2.3

This work was written and produced entirely by the author. We are proud to be distributing it.

About this Title

Pages: 244
Published: 2013-11-13
Release: P8.0 (2015-05-14)
ISBN: pending

Backbone.js has become a popular library for developing modern web applications as their complexity and size increase. With Marionette.js, boilerplate code is handled by the library, letting you focus on your application’s specifics. You’ll discover Marionette components, along with when and why to use them. After you’ve made it through the book, you’ll be comfortable writing a Marionette application on your own.

Exercises covering the basic concepts are included (with solutions), so you can check for yourself if you’ve properly understood the functionality that was covered in a given chapter.

You’ll learn how to build the application at davidsulc step by step, including:

  • Structuring your large apps with modules to manage complexity
  • Using regions and layouts to segment your displays and make them manageable
  • Managing forms, along with error display
  • Handling data latency and displaying loading views
  • Filtering collections and updating views, matching URL fragments to filtering criteria
  • Extending the Marionette framework to clean up your code and make your life easier
  • Using mixins to add common functionality to objects
  • Defining your own view classes to extend from, sharing common behavior
  • Implementing Backbone routing properly
  • Swapping sub-applications
  • Managing menu entries with non-persisted models

And much more! All of this is covered step by step so you fully understand how and why code is being added, removed, or refactored.

What You Need

A recent browser to run the web application. All development will be local, so you won’t be required to have a running server. Code excerpts are in JavaScript, and assume a working knowledge of the language, as well as DOM manipulation. Code commits are available in a Git repository, but can also be perused on the web, or downloaded (without requiring Git).

Contents & Extracts

Foreword from Derick Bailey

  • Who This Book is For
  • Following Along with Git
    • Jumping in for Advanced Readers
  • Setting Up
    • Asset Organization
    • Getting Our Assets
  • Displaying a Static View
    • Dynamically Specifying a View Template
    • Specifying Other View Attributes
    • Exercise
  • Displaying a Model
    • Using Model Defaults
    • Introducing Events
    • Exercise
  • Displaying a Collection of Models
    • Introducing the CollectionView
    • Listing our Contacts with a CollectionView
    • Sorting a Collection
    • Exercise
  • Structuring Code with Modules
    • Extracting our App Definition
    • Moving Contacts to the Entities Module
    • Creating a Module for the ContactsApp Sub-Application
    • Moving the App Initialization Handler
    • Exercise
    • Dealing with Templates
  • Using a CompositeView
    • Exercise
    • Using Events
    • Exercise
  • Events, Bubbling, and TriggerMethod
    • Communicating via Events
    • Animating the Removed ItemView
    • Exercise
    • Introducing TriggerMethod
  • Displaying Contacts in Dedicated Views
    • Wiring up the Show Event
    • The ContactsApp.Show Sub-Module
  • Implementing Routing
    • How to Think About Routing
    • Adding a Router to ContactsApp
    • Routing Helpers
    • DRYing up Routing with Events
    • Adding a Show Route
    • Exercise
  • Implementing a View for Nonexistent Contacts
  • Dealing with Persisted Data
    • Adding a Location to our Entities
    • Configuring our Entities to use Web Storage
    • Loading our Contacts Collection
    • Loading a Single Contact
    • Deleting a Contact
  • Handling Data Latency
    • Delaying our Contact Fetch
    • Using jQuery Deferreds
    • Displaying a Loading View
    • Exercise
    • Passing Parameters to Views and SerializeData
  • Managing Forms: Editing a Contact
    • Saving the Modified Contact
    • Validating Data
  • Displaying a Modal Window
    • Using jQuery UI
    • Adding the Edit Link
    • Implementing Modal Functionality
    • Handling the Modal Form Data
  • Subdividing Complex Views with Layouts
    • Regions vs Layouts
  • Extending from Base Views
  • Managing Dialogs with a Dedicated Region
    • Customizing onRender
  • Filtering Contacts
    • Implementing an Empty View
    • Optional Routes and Query Strings
  • The “About” Sub-Application
    • Coding the Sub-App
  • The “Header” Sub-Application
    • Setting up the Models
    • Adding Templates and Views
    • Implementing the Controller and Sub-Application
    • Navigating with the Brand
    • Highlighting the Active Header
    • Handling Menu Clicks
  • Closing Thoughts
    • Keeping in Touch
  • Other Books I’ve Written
  • Module Architecture
  • Exercise Solutions
    • Displaying a Single-Item List
    • Displaying a Contact With No Phone Number
    • Sorting a Collection
    • Declaring a Template Sub-Module
    • Building your own CompositeView
    • Displaying the Contents of a Clicked Table Cell
    • Event Bubbling from Child Views
    • Getting Back to the Contacts List
  • Overriding Marionette’s Template Loader
    • Declaring a Template Sub-Module
    • Tackling the Template Loader
    • Specifying our new Template
  • Extending Marionette
  • Using Web Storage for Persistence
    • Implementation Strategy
    • Adding to the Entities Module
    • Using a Mixin with Underscore
    • Determining the Storage Key
  • Creating a FilteredCollection


I spend most of my time applying technologies to business problems and like many, I acquire new technology skills in a self-taught manner. What I really enjoy is understanding subjects well enough to be able to teach others about them in a straightforward “this makes complete sense” style.