Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Marionette: the Backbone framework

2.031 visualizaciones

Publicado el

Marionette: the Backbone framework

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

Marionette: the Backbone framework

  1. 1. Marionette.jsMarionette.js The Backbone Framework
  2. 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. 3. The Path to JavaScript MV*The Path to JavaScript MV* Server side rendering Adding JavaScript. jQuery. It's MV* Time!!
  4. 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. 5. Adding JavaScriptAdding JavaScript Create dynamic content. Animations. Asynchronous loading. Better page load performance.
  6. 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. 7. This should be much easier!
  8. 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. 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. 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. 11. This get very messy very quick!This get very messy very quick!
  12. 12. Which way now?Which way now?
  13. 13. Why Backbone?Why Backbone? Flexible. Un-opinionated. Models. Collections. Separates data from your view.
  14. 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. 15. What gaps does it fill?What gaps does it fill?
  16. 16. Who uses Marionette?Who uses Marionette?
  17. 17. Who maintains?Who maintains? The core team. The community.
  18. 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. 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. 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. 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. 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. 23. <div>Henry Ford</div>
  24. 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. 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. 26. <div>Henry Ford</div> <div>John Smith</div> <div>Henry Hoover</div> Is that it???? Add sorting. Add filtering.
  27. 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. 28. <div>Henry Hoover</div> <div>Henry Ford</div>
  29. 29. CompositeViewCompositeView Renders a collection within a template. Ideal for tabular data. Nested lists/Tree views Time to see it in action...
  30. 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. 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. 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. 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. 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. 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. 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. 37. Questions???Questions???

×