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

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

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


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

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

THE END

github.com/dmytroyarmak

dmytroyarmak@gmail.com