The Backbone Framework

Marionette Features

Layouts

Organize your app in terms of small Views. Marionette makes it easy to compose rich layouts out of small components

Lists

Show a sorted filtered list without breaking a sweat. Have a massive collection? Want to add or remove an item? No worries!

Utilities

Learn to love the details. We've added tons of features from templateHelpers, to a declarative UI hash, that will keep you from ever wanting to go back.

Behaviors

Share complex UI interactions across views. Behaviors are like mixins, without all of the pain associated with property collision.

Radio

Decoupled communication between your application components with a powerful messaging system

Objects

Write classes with the same API as your views. Marionette Objects support features like extend, events, initialize, and more.

Why Marionette?

Approachable

Confused about how something works? Read the annotated source code. Think of Marionette as the code you would have written if you had the time and a thousand sets of eyes.

Community

Marionette community is home to the most welcoming and vibrant discussions in the Backbone ecosystem.

Iterative

Have a large unruly code base that you can not simply rewrite? Marionette can be added in pieces.

Flexible

Stop spending more time thinking about your framework than your app. Marionette will never get in the way of you and your code.

Code Samples

Define view classes

var SingleLink = Marionette.ItemView.extend({
  tagName: "li",
  template: _.template("<a href='<%-path%>'><%-path%></a>")
});

var ListView = Marionette.CollectionView.extend({
  tagName: 'ul',
  childView: SingleLink
});

Pass in data

var list = new Backbone.Collection([
  {path: 'http://google.com'},
  {path: 'http://mojotech.com'},
]);

(new ListView({
  collection: list,
  el: '.link-area'
})).render();

Example Apps

Marionette Wires

An opinionated Marionette starter app.

Requirements: modern web browsers

Browserify
Babel (ES6)
Handlebars
Gulp
Mocha + Chai
Sinon
Pioneer

View Source

Gistbook

An app to write about technical subjects

Requirements: modern web browsers

Webpack
Babel (ES6)
Handlebars
Grunt

View Source

Edit

A collaborative tool to share photographs.

Requirements: modern web browsers

CoffeeScript
Parse
Roots

View Source

Streamus

A YouTube video player Chrome extension.

Requirements: modern web browsers

Jspm
Babel (ES6)
Handlebars
Grunt
Mocha + Chai
Sinon

View Source

Videos

Previous video

James Smith - Marionette The Backbone Framework

Marionette - The Backbone Framework

Building Beautiful Apps with Marionette

Jason Laster, a core contributor to Marionette, gives us a quick intro to Marionette / Backbone.

Marionette 101

Nesting Your Views in Marionette

Sam Saccone explains how to deal with nested views in Marionette. Slides: http://mbx.cm/t/jsbVb Sponsored by: http://www.infor.com Marionette.js: http://marionettejs.com Dancing with Marionette Meet...

Nesting Your Views in Marionette

Marionette Behaviors

Jason Laster explains how to use Marionette Behaviors. Slides: http://mbx.cm/t/9GBSw Sponsored by: http://www.infor.com Marionette.js: http://marionettejs.com Dancing with Marionette Meetup: http://...

Marionette Behaviors

Backbone.Wreqr

James Smith explains how you can use Backbone.Wreqr. Slides: http://mbx.cm/t/TtNgU Sponsored by: http://www.infor.com Marionette.js: http://marionettejs.com Dancing with Marionette Meetup: http://ww...

Backbone.Wreqr

Jason Laster - Backbone under the Magnifying Glass Tools for Exploring and Debugging Your Apps

Backbone Under the Magnifying Glass (Marionette Inspector)

Browserify + Marionette = Better Apps

Kurt Kemple, frontend architect at ServiceChannel, shows how Browserify can help you develop Backbone + Marionette applications more efficiently. Slides: http://kkemple.github.io/slides.browserify-marionette/ Marionette presentation app with Browserify: https://github.com/kkemple/talks.browserify-marionette Sponsored by: http://www.infor.com Marionette.js: http://marionettejs.com Dancing with Marionette Meetup: http://www.meetup.com/Dancing-with-Marionette-js Marionette Chat Room: https://gitter.im/marionettejs/backbone.marionette Kurt Kemple: http://twitter.com/kurtiskemple Kurt’s Anti-Bio: When not coding, you can find Kurt longboarding in the mountains in upstate NY.

Browserify + Marionette = Better Apps (slides)

Using DevTools for Marionette Debugging

Jason is a Software Engineer at Etsy and a core contributor to Marionette. In this talk, he shows us all of his tricks for debugging a Marionette app. Sponsored by: http://www.infor.com Marionette.js...

Using DevTools for Marionette Debugging

Routing Made Better

The Betterment team have a need to load data from their APIs before they render a "page" in their Marionette app. They used to do this with the Marionette.Async plugin, but when that project died off, they decided to try a different approach. They ended up building a more powerful router; this is that story (told by their lead engineer, Sam Moore). Slides: http://goo.gl/rkWcb2 Backbone.Blazer: https://github.com/Betterment/backbone.blazer Sponsored by: http://www.betterment.com Marionette.js: http://marionettejs.com Dancing with Marionette Meetup: http://www.meetup.com/Dancing-with-Marionette-js Marionette Chat Room: https://gitter.im/marionettejs/backbone.marionette Sam Moore: https://twitter.com/samandmoore Sam's Anti-Bio: I love woodworking, but I hardly ever do it anymore. I have an obsession with garden gnomes. I think that Ruby can save the world.

Routing Made Better (Backbone.Blazer)

Brian Mann - The tools and patterns for building large-scale Backbone applications

Brian Mann demonstrates how to build modular Backbone apps using Marionette JS instead of building your application's infrastructure from scratch. For more information on Brian or BackboneConf, visit...

Brian Mann talks about building applications with Marionette

Codemania 2013: Amy Palamountain on Backbone and Marionette

Amy Palamountain from GreenButton on Unsucking Your Backbone

Unsuck Your Backbone

Backbone.js with Derick Bailey - April 2013

This is a talk that Derick Bailey gave to the Houston Open Development User Group on April 4th 2013. http://www.meetup.com/Houston-Open-Development-User-Group/events/110571032/ The code is availble ...

From jQuery to Backbone/Marionette

Next video

Screencasts

Marionette Fundamentals by Pluralsight

This paid course provides an in-depth look at Marionette with four hours of quality content. It is one of the more recently released screencasts.

BackboneRails

Brian Mann has produced a comprehensive set of screencasts that cover just about everything you need to know to build large-scale Backbone applications on top of Ruby on Rails using CoffeeScript. Even if you are not using Ruby on Rails or CoffeeScript, the concepts are still helpful.Some syntax might be outdated, so be sure to check against the docs.

Tuts+ Introduction to Marionette

Tuts+ Premium has a good paid series on “Advanced Backbone Patterns and Techniques“ with a free 10-minute episode that introduces Marionette. This episode focuses on bringing the most value to your Backbone app, quickly, by looking at the various views that Marionette provides along with regions to display the views in the DOM. It'll give you an idea of what Marionette can do for your app without getting too in-depth.Some syntax might be outdated, so be sure to check against the docs.

Books

Better Backbone Applications with MarionetteJS

Backbone.js is a growing, popular library for building JavaScript-based web applications in a well-structured, organized and maintainable way, using patterns similar to MVC. If you already have a working knowledge of Backbone, it's now time to take your applications to the next level with MarionetteJS. The Backbone extension builds on top of Backbone's event-driven architecture and adds a myriad of tools for building larger, more complex applications.

Backbone.Marionette.js: A Gentle Introduction

Be more productive with Backbone.js: Marionette handles the boilerplate code, letting you focus on your application's specifics. Develop a complete Marionette.js app with this book, and you'll be comfortable with the library (whether you're new to web apps, or looking to quickly master yet another framework).

Structuring Backbone Code with RequireJS and Marionette Modules

Learn to use javascript AMD in your apps the easy way

Backbone.Marionette.js: A Serious Progression

Bring your applications to the next level, using these handy solutions to common application development challenges.

Getting Started with Backbone Marionette

If you know JavaScript and a little Backbone.js, this book is just what you need to move your speed and efficiency up a gear. It's a complete and practical guide to the composite application library Backbone Marionette.

Marionette Exposé

Learn to write modular Javascript applicatons using Backbone Marionette and RequireJS/AMD. Create a responsive browser based application. Decouple modules with advanced design patterns to create a fast, responsive user experience. Featuring Backbone, Marionette, RequireJS and CoffeeScript.

Building Backbone Plugins

Eliminate The Boilerplate In Backbone.js Apps. From the creator of MarionetteJS - the premiere application framework for Backbone.js - comes a book that will show you how to Eliminate the boilerplate code that plagues your Backbone apps by building the add-ons and abstractions that your app needs.

Contribute

Marionette greatly appreciates the community! We welcome your support and contributions. Please visit the GitHub repo to report bugs, suggest your ideas, help other users out, and even contribute code.

GitHub Issues

The Backbone Framework

Marionette Features

Why Marionette?

Download Information v2.4.3

Install with bower

Install with npm

Static builds

Marionette Inspector - Chrome Extension

Code Samples

Define view classes

Pass in data

Results

Example Apps

Videos

James Smith - Marionette The Backbone Framework

Building Beautiful Apps with Marionette

Nesting Your Views in Marionette

Marionette Behaviors

Backbone.Wreqr

Jason Laster - Backbone under the Magnifying Glass Tools for Exploring and Debugging Your Apps

Browserify + Marionette = Better Apps

Using DevTools for Marionette Debugging

Routing Made Better

Brian Mann - The tools and patterns for building large-scale Backbone applications

Codemania 2013: Amy Palamountain on Backbone and Marionette

Backbone.js with Derick Bailey - April 2013

Screencasts

Books

Better Backbone Applications with MarionetteJS

Backbone.Marionette.js: A Gentle Introduction

Structuring Backbone Code with RequireJS and Marionette Modules

Backbone.Marionette.js: A Serious Progression

Getting Started with Backbone Marionette

Marionette Exposé

Building Backbone Plugins

Contribute

Companies Using Marionette