Marionette: Explained was a series of posts I wrote in winter 2014-2015 explaining the whats, whys and hows of Marionette, the Backbone Framework. Marionette is a powerful set of patterns and components built on top of Backbone.js, a minimalist JavaScript MV framework. It is widely used in the Backbone community, but since most of the resources I found about it were written prior to it’s 2.0 version, and the framework had continued to evolve significantly since then, I felt there was a need for a detailed resource on using it. This was my attempt at creating that resource. Note that since I published this, Marionette has released a 3rd major version, Marionette 3. Most of the concepts here still apply, but some specific syntax may be out of date.*

  1. The Case For Marionette.js - A quick overview of what Marionette is and why it’s useful.

  2. Connecting Data To Your Views - A look at Marionette’s approach to Views and data-binding

  3. Building Complex Layouts with Marionette.js - A post to explain Marionette’s Regions and layout system, with a focus on complex nested layouts.

  4. The Life of a Marionette View - A rundown of the various stages of a Marionette View’s life cycle

  5. Building Modular Web Apps with Backbone.Radio - This post examines how to use Backbone.Radio to improve the maintainability of your Marionette projects.

  6. Staying DRY with Marionette Behaviors - A look at Behaviors and how they help you avoid repetition in your Backbone code.


I’ve had the opportunity to learn a lot from the Marionette team and community through their gitter room. These posts have been much more accurate as a result. I also originally began to understand Marionette after reading Building Backbone Plugins by Derick Bailey, the creator of Marionette. I highly recommend both of those resources to anyone interested in Marionette or Backbone development.