Marionette: the Backbone framework

Marionette: the Backbone framework

Transcript

1. Marionette.js Marionette.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 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....
5. Adding JavaScript Adding 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 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
9. The jQuery Hole The 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 Community The 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 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.
20. 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....
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. 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();
23. <div>Henry Ford</div>
24. CollectionView CollectionView 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. CompositeView CompositeView 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. 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...
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.0 v3.0.0 View CollectionView
37. Questions??? Questions???