Introduction To Backbone.Marionette – おまけ

Modularized App

You can define modules as many as you want inside one app.

var KVH = new Marionette.Application();

KVH.module('Department', function (Department, KVH, Backbone, Marionette, _) {
  // Some codes here
}

// Starting module
KVH.Department.start()
						

start() and stop()

Module.start(): You have control over module start.

Module.stop(): Probably you don't use except in tests.

View

Types of Marionette Views

• Marionette.ItemView
• Marionette.CollectionView
• Marionette.CompositeView
• Marionette.LayoutView

Item and Collection View

ItemView is for a single model and Collection view is for a conllection of models.

//
// Define a module for DepartmentView
//
KVH.module('DepartmentView', function (DepartmentView, KVH, Backbone, Marionette, _) {

  // Item View. Single row of list
  DepartmentView.ItemView = Marionette.ItemView.extend({
    template: ItemViewTpl
  });

  // Collection that holds all items views
  DepartmentView.ListView = Marionette.CollectionView.extend({
		el: '#department-list',
    itemView: DepartmentView.ItemView
  });
})
						

Marionette.Compositeview

CompositeView is extended from CollectionView to use template

Example:

//
// This is slightly better looking version of ListView
//
KVH.module('DepartmentView', function (DepartmentView, KVH, Backbone, Marionette, _) {

  DepartmentView.FancyListView = Marionette.CompositeView.extend({
    childView: DepartmentView.ItemView,
    template: FancyListTpl,
    childViewContainer: "#department-lists",
  });
});
						

Marionette.LayoutView

LayoutView is simply extend from ItemView with Region manager, yet very powrful.

What is Region?

It is the abstraction over Backbone view. You can simply insert other views into Region and call show() to render.

// Define Layout View
DepartmentView.LayoutView = Marionette.LayoutView.extend({
  template: LayoutTpl,

  regions: {
    mainRegion: "#main-region"
  }
});
						

// Define CollectionView to insert to region
DepartmentView.ListView = Marionette.CollectionView.extend({
  el: 'DeptListTpl',
  itemView: DepartmentView.ItemView
});
						

// Define view for page loading spinner
DepartmentView.LoadingView = Marionette.ItemView.extend({
  template: SpinnterTpl,
});
  					

layoutView = new LayoutView()

layoutView.mainRegion.show(new LoadingView())

$(fetchingList).done(function(list){
  lauoutView.mainRegion.show(new ListView({collection: list}))
})
  					

Bonus: You can insert other LayoutView to region

Nesting view made easy!!

Marionette.Controller

Quotes from official doc

How I use Controller

Methods that "integrates" different objects

Example:

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

  Controller.Controller = Marionette.Controller.extend({
    showItem: function(){
      model = new Item()
      view = new ItemView	({model: model})

      view.on("event1", function(){
        alert("event1 is triggered!!")
      });

      MyApp.mainRegion.show(view);
    }
  })

})
						

ShowItem() is called from router for /item/{:id}

So this is MVC's Controller, isn't it?

Messaging System

Application wide messag system is built in.

Makes it easy for each sub-modules to talk.

3 kinds of messaging system

Event Aggregator

var KVH = new Backbone.Marionette.Application();

KVH.vent.on("business:fail", function(division){
  alert("Fire employees in " + division + "now!!");
});

KVH.vent.trigger("business:fail", division);
						

Request Response

var KVH = new Backbone.Marionette.Application();

KVH.reqres.setHandler("request_raise_salary", function(division){

	if (KVH.isBusinessWell()) {
		return true
	} else {
		return false
	}

});

var salaryIncreaed = MyApp.request.execute("request_raise_salary");
						

There are also "Commands"

var KVH = new Backbone.Marionette.Application();
var HR = new Backbone.Marionette.Model();

KVH.commands.setHandler("raise_salary", function(division){
	var hr = new HR()
	hr.increaseSalary();
});

MyApp.commands.execute("raise_salary");
						

Works similar trigger. Difference is commands doesn't return values.

What should I do if I stuck?

• Official doc in github
• Read "Backbone.Marionette.js: A Gentle Introduction"
• Read tests and source code of Marionette

おまけ

Do people still use Backbone?

Alternatives

Where are we heading?

People are get tired of creating SPA.

Tons of things to to do just make frontend working.

Strike back of server side rendering!!