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