Marionette.js

Contents

  • Why have a front-end MVC framework?
  • What is Backbone.js?
  • What is Marionette.js?
  • Where does Backbone end & Marionette begin?
  • Why should we use Marionette?
  • Code Examples
  • Questions?

Why have a front-end MVC framework?

  • Provides design patterns
  • Code quality improves
  • Improved browser support
  • Community backed support

What is Backbone.js?

  • Front-end MVC framework
  • Consists of models, collections, and view
  • Easily extendable to add features
  • Flexible to meet most designs
  • Lightweight and open source

What is Marionette.js?

  • A framework built on top of Backbone
  • Expands Backbone into full framework
  • Expands View types
  • Provides more defined project structure

Where does Backbone end...

Backbone provides:

  • model
  • collection
  • view
  • router

...and Marionette begin?

Marionette mostly expands on views but provides additional helpful features

  • Expanded views:
    • CollectionView
    • ItemView
    • CompositeView
  • Structural objects
    • Regions
    • LayoutView

Why should we use Marionette?

  • Improves Backbone's flexibility
  • Improved dev productivity
  • Easy to learn
  • Largest Backbone framework community
  • EWE adopting Backbone already

Example 1 – Backbone Collection View


jsFiddle

Example 1 – Code

									
//Define model/collection
var Model = Backbone.Model.extend({
	id: undefined
});
var Collection = Backbone.Collection.extend({model: Model});

//Build views
var ChildView = Backbone.View.extend({
	className: 'childView',
	template: _.template("id <%= id %>"),
	render: function() {
		return this.$el.html(this.template(this.model.attributes));
	}
});

var CollectionView = Backbone.View.extend({
	className: 'collectionView',
	initialize: function() {this.views= [];},
	render: function() {
		if (this.collection) {
			var self = this,
					view;
			this.collection.each(function(model) {
				view = new ChildView({model: model});
				self.$el.append(view.render());
				self.views.push(view);
			});
		}
	}
});

var exampleCollection = new Collection();

for (var i = 0; i < 5; i++) {
	exampleCollection.add(new Model({id: i}));
}

// create view object
var collectionViewInstance = new CollectionView({collection: exampleCollection});

// render view and add to page
collectionViewInstance.render();
$('#backboneContainer').append(collectionViewInstance.$el);

Example 1 – Marionette Collection View


jsFiddle

Example 1 – Code

												
//Define model/collection
var Model = Backbone.Model.extend({
	id: undefined
});
var Collection = Backbone.Collection.extend({model: Model});

//Build views
var ChildView = Marionette.ItemView.extend({
		className: 'childView',
		template: _.template("id <%= id %>"),
		model: Model
});


var CollectionView = Marionette.CollectionView.extend({
	className: 'collectionView',
	childView: ChildView
});

// build collection for collection view
var exampleCollection = new Collection();

for (var i = 0; i < 5; i++) {
	exampleCollection.add(new Model({id: i}));
}

// create view object
var collectionViewInstance = new CollectionView({collection: exampleCollection});

// render view and add to page
collectionViewInstance.render();
// add to page
$('#marionetteContainer').append(collectionViewInstance.$el);

Testing

Testing Backbone/Marionette is the same as testing other JS objects.

JSFiddle Example

Questions?

Comments?