Slide 1
Slide 1 text
Marionette.js
Marionette.js
The Backbone Framework
Slide 2
Slide 2 text
ahumphreys87
ahumphreys87
Days
JavaScript Architect at Bede Gaming.
JavaScript Game Framework that powers cross
platform Bingo client and Slots games.
Node.js Slots Engine, Chat Server.
Node.js API facade.
Evenings
Core contributor to Marionette.js
Issue triaging, Pull Request reviews.
Bug fixing.
New features!
Slide 3
Slide 3 text
The Path to JavaScript MV*
The Path to JavaScript MV*
Server side rendering
Adding JavaScript.
jQuery.
It's MV* Time!!
Slide 4
Slide 4 text
Server Side Rendering
Server Side Rendering
Markup generated server side.
Styled with CSS.
No animation, fancy image
image sliders or interactivity.
It's all pretty bland.
Something is missing....
Slide 5
Slide 5 text
Adding JavaScript
Adding JavaScript
Create dynamic content.
Animations.
Asynchronous loading.
Better page load performance.
Slide 6
Slide 6 text
Example...
Example...
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open('POST', 'example.com', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.send('fname=Henry&lname=Ford');
Slide 7
Slide 7 text
This should be much easier!
Slide 8
Slide 8 text
Along came jQuery
Along came jQuery
$.ajax({
method: "POST",
url: "http://www.example.com",
data: { fname: "Henry", lname: "Ford" }
})
.done(function(data) {
$("#myDiv").html(data);
});
jQuery saved JavaScript and Front End Development
Slide 10
Slide 10 text
Play
And then you need data...
And then you need data...
$(document).on('click', '#playGame', function() {
var playButton = $(this);
$.ajax({
method: "POST",
url: "http://www.example.com",
data: {
gameId: playButton.data('gameid'),
gameName: playButton.data('gamename'),
players: playButton.data('players')
}
})
.done(function(data) {
console.log('Game Playing');
});
});
Slide 11
Slide 11 text
This get very messy very quick!
This get very messy very quick!
Slide 12
Slide 12 text
Which way now?
Which way now?
Slide 13
Slide 13 text
Why Backbone?
Why Backbone?
Flexible.
Un-opinionated.
Models.
Collections.
Separates data from your view.
Slide 14
Slide 14 text
Why Marionette?
Why Marionette?
Fills Backbone's gaps.
Battle tested in large applications.
Actively maintained.
Vibrant community.
Implements render on some useful
pre defined views.
Slide 15
Slide 15 text
What gaps does it fill?
What gaps does it fill?
Slide 16
Slide 16 text
Who uses Marionette?
Who uses Marionette?
Slide 17
Slide 17 text
Who maintains?
Who maintains?
The core team.
The community.
Slide 18
Slide 18 text
The Community
The Community
Number 1 room in Gitter.
Over 5000 members.
Lots of code examples and help!
https://gitter.im/marionettejs/backbone.marionette
Slide 19
Slide 19 text
Enough of the fluff - lets go
Enough of the fluff - lets go
deep!
deep!
Application.
Router.
Modules.
Events (Wreqr/Radio).
Object.
Architecture Layer View Layer
Region.
ItemView.
CollectionView.
CompositeView.
LayoutView.
Slide 20
Slide 20 text
The View Layer
The View Layer
All views have Backbone.Event baked
in.
This allows us to:
Listen for view events.
Show nested views.
Capture and manipulate during view
lifecycle.
Example time....
Slide 21
Slide 21 text
var MyView = Marionette.View.extend({
template: '
test
',
events: {
'click #myButton': 'doSomething'
},
doSomething: function() {
console.log('button clicked');
},
onRender: function() {
console.log('did some data change?');
},
onShow: function() {
console.log('BOOM, I am in the DOM');
},
onDestroy: function() {
console.log('Clean me up');
},
onSwapOut: function() {
console.log('If I gotta leave, I wanna go in style');
},
onSwap: function() {
console.log('Now thats what I call an entrance');
}
});
Slide 22
Slide 22 text
ItemView
ItemView
Extends from the base View.
Ideal for rendering a Backbone.Model.
modelEvents.
var person = new Backbone.Model({
fname: 'Henry',
lname: 'Ford'
});
var MyView = Marionette.ItemView.extend({
template: '{{fname}} {{lname}}',
modelEvents: {
change: 'render'
}
});
myView = new MyView({
model: person
});
myView.render();
Slide 23
Slide 23 text
Henry Ford
Slide 24
Slide 24 text
CollectionView
CollectionView
Render a Collection.
Renders a list of ItemViews.
collectionEvents.
childEvents.
Auto update on add/remove/update.
Sorting and Filtering.
Pagination.
Another example...
Slide 25
Slide 25 text
var Person = Backbone.Model.extend({
defaults: {
fname: 'Andrew',
lname: 'Humphreys'
}
});
var People = Backbone.Collection.extend({
model: Person
});
var people = new People([
{fname: 'Henry', lname: 'Ford', age: 67},
{fname: 'John', lname: 'Smith', age: 25},
{fname: 'Henry', lname: 'Hoover', age: 42}
]);
var MyCollectionView = Marionette.CollectionView.extend({
childView: MyView,
onChildviewDoSomething: function() {
console.log('a childs button was clicked');
}
});
var myCollectionView = new MyCollectionView({
collection: people
});
myCollectionView.render();
Slide 26
Slide 26 text
Henry Ford
John Smith
Henry Hoover
Is that it????
Add sorting.
Add filtering.
Slide 27
Slide 27 text
var People = Backbone.Collection.extend({
model: Person,
comparator: 'age'
});
var people = new People([
{fname: 'Henry', lname: 'Ford', age: 67},
{fname: 'John', lname: 'Smith', age: 25},
{fname: 'Henry', lname: 'Hoover', age: 42}
]);
var MyView = Marionette.ItemView.extend({
template: '{{fname}} {{lname}}'
});
var MyCollectionView = Marionette.CollectionView.extend({
childView: MyView,
filter: function (child, index, collection) {
return child.get('fname') === 'Henry';
}
});
var myCollectionView = new MyCollectionView({
collection: people
});
myCollectionView.render();
Slide 28
Slide 28 text
Henry Hoover
Henry Ford
Slide 29
Slide 29 text
CompositeView
CompositeView
Renders a collection within a template.
Ideal for tabular data.
Nested lists/Tree views
Time to see it in action...
Slide 30
Slide 30 text
var People = Backbone.Collection.extend({
model: Person,
comparator: 'age'
});
var people = new People([
{fname: 'Henry', lname: 'Ford', age: 67},
{fname: 'John', lname: 'Smith', age: 25},
{fname: 'Henry', lname: 'Hoover', age: 42}
]);
var MyView = Marionette.ItemView.extend({
tagName: 'tr',
template: '{{fname}}{{lname}}'
});
var MyCompositeView = Marionette.CompositeView.extend({
template: 'ForenameSurname',
childView: MyView,
childViewContainer: 'tbody'
filter: function (child, index, collection) {
return child.get('fname') === 'Henry';
}
});
var myCompositeView = new MyCompositeView({
collection: people
});
myCompositeView.render();
Slide 31
Slide 31 text
ForenameSurname
HenryHoover
HenryFord
Slide 32
Slide 32 text
LayoutView
LayoutView
The big daddy of all views.
Create complex nested layouts.
Render all in 1 call.
A view with regions.
Yeah, you guessed it - example time...
Slide 33
Slide 33 text
var MyLayoutView = Marionette.LayoutView.extend({
template: "#layout-template",
regions: {
myRegion: "#some-div",
anotherRegion: ".another-element"
}
});
var MyLayoutView2 = Marionette.LayoutView.extend({
template: "#layout-template2",
regions: {
myRegion: "#some-div2",
anotherRegion: ".another-element"
}
});
var myLayoutView = new MyLayoutView(
onShow: function(){
this.showChildView('myRegion', new MyLayoutView2());
this.showChildView('anotherRegion', new Marionette.View());
}
);
MyApp.getRegion('someRegion').show(myLayoutView);
Slide 34
Slide 34 text
Slide 35
Slide 35 text
Whats so great?
Whats so great?
Using this pattern we can infinitely
nest views.
The event bindings on subviews
ensure only views that need to re-
render actually do.
Similar to a CollectionView's children
we can listen for childEvents.
Use as an "app root" view.
Or something smaller!
Slide 36
Slide 36 text
What does the future hold?
What does the future hold?
v3.0.0
LayoutView => ItemView => View.
Views replacing a regions element.
Backbone.Radio.
Backbone.Metal.
Improved Router.
Application lifecycle.
Modules => Sub-apps.
Simple decision making - 2 views:
v3.0.0
v3.0.0
View
CollectionView
Slide 37
Slide 37 text
Questions???
Questions???