Marionette: the Backbone framework
4 likes2,184 views
Marionette.js is a JavaScript framework that builds upon Backbone.js to provide additional structure and functionality. It fills gaps in Backbone by implementing common patterns for views like ItemView, CollectionView, CompositeView, and LayoutView. These views provide functionality for rendering individual models, collections of models, composite views that combine a collection within a template, and complex nested layouts with multiple regions respectively. The framework is actively maintained by a core team and large community and used by many large applications for its flexibility, separation of concerns, and ability to build complex UIs through nesting of views and regions.
![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();](https://image.slidesharecdn.com/marionettethebackboneframework-150511162834-lva1-app6891/85/Marionette-the-Backbone-framework-25-320.jpg)
![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();](https://image.slidesharecdn.com/marionettethebackboneframework-150511162834-lva1-app6891/85/Marionette-the-Backbone-framework-27-320.jpg)
![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();](https://image.slidesharecdn.com/marionettethebackboneframework-150511162834-lva1-app6891/85/Marionette-the-Backbone-framework-30-320.jpg)
Marionette: 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();
- 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();
- 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();
- 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