Marionette: the Backbone framework

1. Marionette.jsMarionette.js
The Backbone Framework

2. 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!

3. The Path to JavaScript MV*The Path to JavaScript MV*
Server side rendering
Adding JavaScript.
jQuery.
It's MV* Time!!

4. Server Side RenderingServer 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....

5. Adding JavaScriptAdding JavaScript
Create dynamic content.
Animations.
Asynchronous loading.
Better page load performance.

6. 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');

7. This should be much easier!

8. Along came jQueryAlong 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

9. The jQuery HoleThe jQuery Hole
$('#myDiv')
.append('<div class="link"><a href="javascript:void(0)">Link 1</a></div>')
.append('<div class="link"><a href="javascript:void(0)">Link 1</a></div>')
.append('<button>Close</button>');
Creating markup strings in jQuery is a code smell!

10. <button id="playGame" data-gameid="game1" data-gamename="Demo Game" data-players="1">
Play
</button>
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');
});
});

11. This get very messy very quick!This get very messy very quick!

12. Which way now?Which way now?

13. Why Backbone?Why Backbone?
Flexible.
Un-opinionated.
Models.
Collections.
Separates data from your view.

14. 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.

15. What gaps does it fill?What gaps does it fill?

16. Who uses Marionette?Who uses Marionette?

17. Who maintains?Who maintains?
The core team.
The community.

18. The CommunityThe Community
Number 1 room in Gitter.
Over 5000 members.
Lots of code examples and help!
https://gitter.im/marionettejs/backbone.marionette

19. Enough of the fluff - lets goEnough of the fluff - lets go
deep!deep!
Application.
Router.
Modules.
Events (Wreqr/Radio).
Object.
Architecture Layer View Layer
Region.
ItemView.
CollectionView.
CompositeView.
LayoutView.

20. The View LayerThe 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....

21. var MyView = Marionette.View.extend({
template: '<div>test</div>',
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');
}
});

22. ItemViewItemView
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();

23. <div>Henry Ford</div>

24. CollectionViewCollectionView
Render a Collection.
Renders a list of ItemViews.
collectionEvents.
childEvents.
Auto update on add/remove/update.
Sorting and Filtering.
Pagination.
Another example...

25. 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();

26. <div>Henry Ford</div>
<div>John Smith</div>
<div>Henry Hoover</div>
Is that it????
Add sorting.
Add filtering.

27. 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();

28. <div>Henry Hoover</div>
<div>Henry Ford</div>

29. CompositeViewCompositeView
Renders a collection within a template.
Ideal for tabular data.
Nested lists/Tree views
Time to see it in action...

30. 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: '<td>{{fname}}</td><td>{{lname}}</td>'
});
var MyCompositeView = Marionette.CompositeView.extend({
template: '<table><thead><th>Forename</th><th>Surname</th></thead><tbody></tbody></table>',
childView: MyView,
childViewContainer: 'tbody'
filter: function (child, index, collection) {
return child.get('fname') === 'Henry';
}
});
var myCompositeView = new MyCompositeView({
collection: people
});
myCompositeView.render();

31. <table>
<thead>
<th>Forename</th><th>Surname</th>
</thead>
<tbody>
<tr>
<td>Henry</td><td>Hoover</td>
</tr>
<tr>
<td>Henry</td><td>Ford</td>
</tr>
</tbody>
</table>

32. LayoutViewLayoutView
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...

33. 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);

34. <div id="some-region">
<!-- LayoutView -->
<div>
<div id="some-div">
<!-- LayoutView 2 -->
<div>
<div id="some-div2"></div>
<div class="another-element"></div>
</div>
</div>
<div class="another-element">
<!-- ItemView -->
<div></div>
</div>
</div>
</div>

35. 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!

36. 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.0v3.0.0View
CollectionView

37. Questions???Questions???