Backbone & Marionette avec @xbourguignon à SoftShake

Transcript

1. Backbone & Marionette Xavier Bourguignon Philippe Charrière
2. About Us @k33g_org Lyon Steria Golo Fan #1 @xbourguignon Genève Hortis GenevaJUG Leader
3. Backbone.js @k33g_org / Lyon / Steria “tout nu”
4. 1 librairie MVC par Jeremy Ashkenas jQuery + Underscore tous navigateurs
5. 1 librairie “extra légère” Backbone : 20 kb jQuery : 84 kb Underscore : 14 kb
6. BB = SPA Helper
7. Enorme communauté Nombreux plugins “sérieux”
8. Très simple Code facile à lire facile à “augmenter”
9. Backbone, c'est Play!> dans votre navigateur
10. BB est MVC ?
11. M♥ VC Backbone.Model Backbone.Collection
12. MVC Templates <%= something %>
13. MVC Backbone.View ?!*#!??? “la glue”
14. MVP Backbone.View model view presenter
15. Mais aussi Backbone.Sync Backbone.Router ...
16. Modèle Objet
17. Un modèle "interne"
18. Pompage var Kind = function() {}; Kind.extend = Backbone.Model.extend;
19. klass var TinyToon = Kind.extend({ constructor : function (firstName, lastName){ this.firstName = firstName; this.lastName = lastName; }, toString : function() { return this.firstName + " " +this.lastName } }); var babs = new TinyToon("Babs", "Bunny")
20. héritage var Elmyra = TinyToon.extend({ constructor : function (){ this.firstName = "Elmyra"; this.lastName = "Duff"; Elmyra.__super__.constructor.call(this); console.log("Oh, it's so cute ♥ ♥ ♥"); }, isChasing : function(toon) { //foo } });
21. static var Elmyra = TinyToon.extend({ //instance members },{ //statics members theOnlyOne : null, getInstance : function() { if(Elmyra.theOnlyOne == null) { Elmyra.theOnlyOne = new Elmyra(); } return Elmyra.theOnlyOne; } }); var elmyra = Elmyra.getInstance();
22. Backbone.Model Backbone.Collection Backbone.sync
23. var Player = Backbone.Model.extend({ urlRoot:"/players" }); var bob = new Player({ firstName : "Bob", lastName : "Morane" }) Model
24. get() / set() bob.get("firstName") bob.set("firstName","Bob") bob.set({ lastName:"Morane", twitter:"@bobby" }) bob.on( "change:lastName change:firstName", ...);
25. mais aussi save() fetch() destroy()
26. Backbone.sync Appelé à chaque lecture / écriture des modèles
27. Backbone.sync Par défaut : REST $.ajax()
28. bob.save() POST : http://domain/players save
29. var bob = new Player({ id:"001" }) bob.fetch() GET : http://domain/players/001 fetch
30. bob.set("twitter","@bobby") bob.save() PUT : http://domain/players/001 save/update
31. bob.destroy() DELETE : http://domain/players/001 destroy
32. var Players = Backbone.Collection. extend({ url :"/players", model : Player }); var players = new Players() Collection
33. players.fetch() GET : http://domain/players/ fetch : getAll
34. _.template()
35. <ol> <% _.each(players, function(player) { %> <li id="<%= player.id %>"> <%= player.firstName %> <%= player.lastName %> </li> <% }); %> </ol> Avec Underscore template
36. d'autres moteurs Mustache Handelbars TempoJS ...
37. Backbone.View Controller Presenter
38. var PlayersView = Backbone.View.extend({ el : "#players", initialize : function() { this.template = _.template($("#template").html()); }, render : function() { this.$el.html( this.template({ players:this.collection.toJSON() }) ); } });
39. var PlayersView = Backbone.View.extend({ /*...*/ events:{ "click :checkbox" : function(event) {}, "click .btn-success" : function() {} } }); var playersView = new PlayersView({collection:players})
40. Backbone.Router
41. var router = Backbone.Router.extend({ routes: { "home": "index", "products/:computer": "display", "products/:computer/:model": "display" }, index: function() { }, display: function(computer, model) { } });
42. 1 Exemple simple 1 “blog”
43. Vue
44. Vue Modèles & Collections
45. Vue Modèles & Collections Contrôleur
46. Vue Modèles & Collections Contrôleur Go!
47. \o/
48. Plus loin: -> + commentaires
55. nouvelle version
56. Donc pas mal de code en plus, et ce n’est pas fini ...
57. Memory leaks
61. Conclusion
62. BB != machine à tout faire
63. Marionette.js @xbourguigon / Genève / Hortis Make your Backbone application dance !
64. 1 librairie par Derick Bailey Pour aller encore plus loin avec Backbone
65. Marionette = SPA with BB Helper
66. ItemView
67. MyItemView = Marionette.ItemView.extend({ template:"#my-view-template" }); var myView = new MyItemView({ model: someBBModel });
68. CollectionView
69. ItemsView = Marionette.CollectionView.extend({ itemView:MyItemView }); var myCollectionView = new ItemsView({ collection: someBBCollection });
70. Region
71. var mainRegion = new Marionette.Region({ el:"#main-container" }); var view = new MyView(); mainRegion.show(view); var otherView = new AnotherView(); mainRegion.show(otherView);
72. Layout
73. (wrapper template) #someRegion #anotherRegion
74. var MyLayout = Marionette.Layout.extend({ template:"#my-layout-template", regions:{ region1:"#someRegion", region2:"#anotherRegion" } });
75. var layout = new MyLayout(); mainRegion.show(layout); layout.region1.show(new SomeView()); layout.region2.show(new OtherView());
76. Autres raffinements pour les vues
77. var itemView = new MyView({model: someModel}); itemView.render(); var collectionView = newOtherView({ collection: someCollection }); collectionView.render(); automatic render
78. mainRegion.show(layout); layout.region1.show(new SomeView()); layout.region2.show(new OtherView()); layout.region1.show(new ThirdView()); mainRegion.show(anotherLayout); zombie killing
79. var myView = Marionette.ItemView.extend({ template:"#my-view-template", ui:{ mainButton: "#mainButton" }, clickButton: function() { this.ui.mainButton.click(); } }); ui objects
80. var myView = Marionette.ItemView.extend({ template:"#my-view-template", modelEvents:{ "change:name":"doThing" }, doThing: function() { // call when the name changes ! } }); model events
81. var myView = Marionette.CollectionView.extend({ template:"#my-view-template", collectionEvents:{ "add":"itemAdded" }, itemAdded: function() { // call when the name changes ! } }); collection events
82. Marionette === scalable BB
84. App Sub-App Sub-App Sub-App
85. Découpage en modules
86. Application
87. (function(global) { var MyApp = new Marionette.Application(); MyApp.addRegions({ mainRegion:"#main" }); MyApp.on("initialize.after", function() { Backbone.history.start(); }) global.MyApp = MyApp; })(window)
88. <script src="/js/app.js" /> <script src="/js/itemView.js" /> <script> $(function(){ MyApp.start(); }); </script>
89. Module
90. MyApp.module("myModule", function(Mod, App, BB, Marionette, $, ...) { var SomeModel = Backbone.Model.extend({...}); var ItemView = Marionette.ItemView.extend ({...}); var model = new SomeModel(); ...
91. … Mod.initializer(function() { var promise = model.fetch(); $.when(promise).then(function(){ var view = new SomeView(); MyApp.mainRegion.show(view); }); }); });
92. MyApp.module("SubApp", function() { this.startWithParent = false; this.addInitializer(function() {...}) } MyApp.module("SubApp").start(); MyApp.module("myModule").stop(); start / stop
93. Controller
94. WTF ?
95. Mediator All purpose object Public API for component controller
96. var ThatThing = Marionette.Controller.extend({ doStuff: function() { ... } });
97. Blog Marionette version
98. Questions ?
99. On a plus le temps :-(
100. Merci
101. @k33g_org @xbourguignon