Introduction

Created by Dmytro Yarmak

About Marionette

• Backbone.js framework
• Reduce boilerplate code
• Better Zombie management
• View management
• Modules
• Messaging bus

Short overview

• Developed by Derick Bailey
• First release at 2011
• Current version: 1.6.1
• ~4500 Stars at GitGub
• ~1800 commits
• ~160 contributors

Build-in dependencies

• Backbone.Wreqr
• Backbone.BabySitter

DEMO: Step 0 - Initialization of project

DEMO: Step 1 - Install Marionette.js

It's not All-Or-Nothing

You're not required to use all of Marionette.

You can pick what you need.

Marionette's Pieces

• Views
• View Management
• Application Infrastructure
• Object-Messaging Infrastructure
• Other

Views

• Marionette.View
• Marionette.ItemView
• Marionette.CollectionView
• Marionette.CompositeView
• Marionette.Layout

To read: Use cases for the different views

Marionette.View

The base View type that other Marionette views extend from (not intended to be used directly)

Marionette.ItemView

This is the most basic of view types.

Use to render one model or collection.

MyView = Marionette.ItemView.extend({
  template: "#my-template"
});

myView = new MyView();
myView.render();
					

DEMO: Step 2 - Use ItemView

Marionette.CollectionView

Render ItemView instances for each model

MyItemView = Marionette.ItemView.extend({
  template: "#item-template"
});

MyCollectionView = Marionette.CollectionView.extend({
  itemView: MyItemView
});
					

Marionette.CompositeView

A CompositeView is a collection view that knows how to render a template to wrap around the individual items.

Composite views can also be used to build hierarchical and recursive structures.

MyItemView = Marionette.ItemView.extend({
	template: "#item-template"
});

MyCompositeView = Marionette.CompositeView.extend({
	templare: '#composite-template',
	itemView: MyItemView,
	itemViewContainer: '.list-of-items'
});
					

DEMO: Step 3 - Use CompositeView

Marionette.Layout

A view that renders a layout and creates region managers to manage areas within it

AppLayout = Backbone.Marionette.Layout.extend({
  template: "#layout-template",

  regions: {
    menu: "#menu",
    content: "#content"
  }
});

var layout = new AppLayout();
layout.render();
					

layout.menu.show(new MenuView());

layout.content.show(new MainContentView());
					

View Management

• Marionette.Region
• Marionette.RegionManager
• Marionette.Renderer
• Marionette.TemplateCache
• Backbone.BabySitter

Marionette.Region

var myRegion = new Marionette.Region({
  el: "#someElement"
});

					

Show the first view.

var myView = new MyView();
myRegion.show(myView);
					

Replace the view with another. The `close` method is called for you

var anotherView = new AnotherView();
myRegion.show(anotherView);
					

DEMO: Step 4 - Use Region

Application Infrastructure

• Marionette.Application
• Marionette.Module
• Marionette.Controller

Marionette.Application

An application object that starts your app via initializers, and more

MyApp = new Marionette.Application();

MyApp.addInitializer(function(options){
  // do useful stuff here
});

MyApp.addRegions({
  someRegion: "#some-div",
  anotherRegion: "#another-div"
});

MyApp.start(options);
					

DEMO: Step 5 - Use Application

Mediastream.Module

MyApp.module("MyModule", function(MyModule, MyApp, Backbone, Marionette, $, _){

  // Private Data And Functions
  // --------------------------

  var myData = "this is private data";

  var myFunction = function(){
    console.log(myData);
  }


  // Public Data And Functions
  // -------------------------

  MyModule.someData = "public data";

  MyModule.someFunction = function(){
    console.log(MyModule.someData);
  }
});

console.log(MyApp.MyModule.someData); //=> public data
MyApp.MyModule.someFunction(); //=> public data
					

Backbone.Marionette.js: A Gentle Introduction

Marionette.Controller

Very generic, multi-purpose object that can serve many different roles

var MyController = Marionette.Controller.extend({

  initialize: function(options){
    this.stuff = options.stuff;
  },

  doStuff: function(){
    this.trigger("stuff:done", this.stuff);
  },

  onClose: function(){
  	/* ... */
  }

});
					

DEMO: Step 6 - Use Controller

Marionette.AppRouter

MyRouter = Marionette.AppRouter.extend({
  // "someMethod" must exist at controller.someMethod
  appRoutes: {
    "some/route": "someMethod"
  },

  /* standard routes can be mixed with appRoutes/Controllers above */
  routes : {
    "some/otherRoute" : "someOtherMethod"
  },
  someOtherMethod : function(){
    // do something here.
  }

});
					

myObj = {
  someMethod: function(){ /*...*/ }
};

new MyRouter({
  controller: myObj
});
					

DEMO: Step 7 - Use AppRouter

DEMO: Step 8 - Remove dependency to router

DEMO: Step 9 - Store data in localStorage

DEMO: Step 10 - Store data in RESTful backend

Backbone.Wreqr

Implement messaging bus for build application form decoupled modules

• Event Aggregator
• Commands
• Request / Response

Event Aggregator

MyApp.vent.on("foo", function(){
  console.log("foo event");
});

MyApp.vent.trigger("foo");
					

Commands

MyApp.commands.setHandler("foo", function(){
  console.log("the foo command was executed");
});

MyApp.commands.execute("foo");
					

Request / Response

MyApp.reqres = new Backbone.Wreqr.RequestResponse();

MyApp.reqres.setHandler("foo", function(){
  return "foo requested. this is the response";
});

var result = MyApp.reqres.request("foo");
console.log(result);
					

Resources

• Annotated source code
• Documentation
• Books, Articles, Screencasts, and Presentations

THE END

github.com/dmytroyarmak

dmytroyarmak@gmail.com