Unsuck your backbone

Video here : http://bit.ly/13D8tNZ

Backbone.js is a popular, super lightweight JavaScript framework which helps you structure your code MVC style. If you're building JavaScript applications of any reasonable size, you might have heard of it and you might have even given it a try. But if you have used it in anger, then you may have found that a backbone only gets you so far. As your application gets bigger, so does the complexity of your boilerplate code and structure. Let's kick this complexity to the curb, and string up our backbone on a marionette(.js).

Transcript

1. unsuck your backbone
2. who am i just super quick
3. @ammeep aint he handsome?
4. we have evolved from static html
5. jQuery soup
6. we n d structure
7. then came the re olution
8. {❴ mv✯ }❵
9. view model controller
10. view model Presenter
11. view model View model
12. view model arse banana oh dear!
13. data concerns view concerns SEPARATE
14. {❴ mv✯ libraries }❵ {❴ mv✯ frameworks }❵
15. whats the difference?
16. {❴ frameworks }❵ are generally prescriptive and sometimes restrictive :
17. {❴ libraries }❵ are generally focused and specific :
18. backbone (13,619) knockout (3,532) meteor (8,144) angular (8,449) ember (6,610) batman (1,321) spine (2,336) according to frameworks libraries canJS (569) ⤻ star count
19. backbone.js is SJEJDVMPVTMZ unopinionated
20. Models Views Events Router data & associated functions
21. Models Views Events Router data & associated functions ui backed by a model
22. Models Views Events Router data & associated functions ui backed by a model bind & trigger custom events
23. Models Views Events Router data & associated functions ui backed by a model bind & trigger custom events linkable URLs
24. refactoring 1st step
25. everywhere state stored <div id=”animal”> <h2 class="name">The Grinch.<h2> <h2 class="desc">meanest grinch of all.</h2> </div> function sayHello(){ var name = $('.name').text(); var desc = $('.desc').text(); return'Hello I’m '+ name +'The ' + desc; } sayHello();
26. backbone.js var Animal = Backbone.Model.extend({ sayHello: function () { var name = this.get('name'); return 'Hello, I am ' + name; } }); var animal = new Animal({name:'cat'}); animal.sayHello(); refactored to
27. Backbone Views var MyView = Backbone.View.extend({ template:_.template($('#animal_template').html()), initialize: function() { this.listenTo(this.model, "change", this.render); } render: function() { $(this.el).html(this.template(this.model.toJSON())); return this } });
28. focused Backbone keeps it small encapsulated Backbone keeps it Backbone keeps it
30. No Strength Instructions
31. No Weakne Instructions
32. all it gives you is a base to help you into the world of well structured javascript
33. one thousand models impossible to extend one thousand views what the hell is going on
34. backbone soup
35. wait... shouldn’t mv prevent the soup? ✯ WHAT
36. Presentation Pa ern ONLY mv stars are
37. {❴ mv✯ can’t save us now }❵
38. unsuck my backbone Do I how
39. can we build scalable backbone applications
40. how do people build desktop applications can we learn anything
41. composite applications
42. The secret to building large apps is never build large apps. Break your application into small pieces. Then, assemble those testable, bite-sized pieces into your big application ” “ Justin Meyer, author JavaScriptMVC
43. Round u Views Models into Modules Round u
44. How do you spot modules in a crowded room?
45. MODULE㽉
46. MODULE
48. Module a small piece of functionality
49. Module are decoupled from each other
50. Module ask never take
51. Module don't pollute the global scope
52. A change to this module: Doesn't impact other modules
53. Put this module on a new page: and it still works!
54. still play a part ... presentation pa ern
55. ⬌ How do these modules work together?
56. self organise ⬌ ⬌ ⬌ ⬌ ⬌ ⬌ ⬌ ⬌ ⬌ ⬌ ⬌ ⬌ ⬌ they could
57. ⬌ ⬌ ⬌ BUGs! I’m taking you all down with me!
58. planes don't rule the runway
59. does air traffic control no flips!
60. air traffic ⬌ control
61. Placement Eventing Start Up Lifecycle A lication
62. Placement Eventing Start Up Lifecycle A lication
63. Placement Eventing Start Up Lifecycle A lication
64. Placement Eventing Start Up Lifecycle A lication fire up the engines
65. Placement Eventing Start Up Lifecycle A lication initial global setup
66. Placement Eventing Start Up Lifecycle A lication
67. Placement Eventing Start Up Lifecycle A lication do we have permission to land? go ahead
68. Placement Eventing Start Up Lifecycle A lication publish & subscribe to events
69. Placement Eventing Start Up Lifecycle A lication
70. Placement Eventing Start Up Lifecycle A lication time to take off? Not yet!
71. Placement Eventing Start Up Lifecycle A lication when is it safe for a module to start
72. Placement Eventing Start Up Lifecycle A lication
73. Placement Eventing Start Up Lifecycle A lication which runway? that runway
74. Placement Eventing Start Up Lifecycle A lication places modules inside the application shell
75. Placement Eventing Start Up Lifecycle A lication
76. focused modules round up your features into
77. pub & sub fire and forget
78. compose yourself regain control
79. built this way are flexible enough to applications accept change
80. can we build backbone.js this way? applications
82. into two parts can be split marionette
83. to backbone.js mv✯ extensions
84. ItemView CollectionView Layout mv✯ extensions 1
85. ItemView CollectionView Layout mv✯ extensions 1
86. mv✯ extensions 1 ItemView MyView = Backbone.Marionette.ItemView.extend({ template: "#some-template" }); var view = new MyView({model: new FakeModel()}); view.render();
87. ItemView CollectionView Layout mv✯ extensions 1
88. mv✯ extensions 1 CollectionView MyItemView = Backbone.Marionette.ItemView.extend({}); MyColView = Backbone.Marionette.CollectionView.extend({ itemView: MyItemView });
89. mv✯ extensions 1 CollectionView MyItemView = Backbone.Marionette.ItemView.extend({}); MyColView = Backbone.Marionette.CollectionView.extend({ itemView: MyItemView }); var view = new MyColView({collection: stuff}); view.render();
90. ItemView CollectionView Layout mv✯ extensions 1
91. mv✯ extensions 1 Layouts AppLayout = Backbone.Marionette.Layout.extend({ template: "#layout-template", regions: { menu: "#menu", // template elements content: "#content" // template elements } });
92. mv✯ extensions 1 Layouts AppLayout = Backbone.Marionette.Layout.extend({ template: "#layout-template", regions: { menu: "#menu", // template elements content: "#content" // template elements } }); var layout = new AppLayout(); layout.render(); layout.menu.show(new MenuView()); layout.content.show(new MainContentView());
93. N more Boilerplate code
94. architecture composite event driven
95. Application Eventing Modules Composite Apps 2
96. Application Eventing Modules Composite Apps 2
97. Composite Apps 2 Eventing Backbone.Wreqr
98. Composite Apps 2 Eventing Backbone.Wreqr Event Aggregator Requests Commands
99. Composite Apps 2 Eventing Backbone.Wreqr Event Aggregator Requests Commands
100. Composite Apps 2 Eventing var vent = new Backbone.Wreqr.EventAggregator(); vent.on("foo", function(){ console.log("foo event"); }); //elsewhere in your app vent.trigger("foo");
101. Composite Apps 2 Eventing Backbone.Wreqr Event Aggregator Requests Commands
102. Composite Apps 2 Eventing var reqres = new Backbone.Wreqr.RequestResponse(); reqres.setHandler("foo", function(){ return "foo requested. this is the response"; }); //elsewhere in your app var result = reqres.request("foo"); console.log(result);
103. Composite Apps 2 Eventing Backbone.Wreqr Event Aggregator Requests Commands
104. Composite Apps 2 Eventing var commands = new Backbone.Wreqr.Commands(); commands.setHandler("foo", function(){ console.log("the foo command was executed"); }); //elsewhere in your app commands.execute("foo");
105. Composite Apps 2 Eventing Backbone.Wreqr Event Aggregator Requests Commands
106. Application Eventing Modules Composite Apps 2
107. Composite apps 2
108. StartUp Eventing Lifecycle composite apps 2 Placement
109. StartUp Eventing Lifecycle composite apps 2 Placement
110. Composite Apps 2 Start Up MyApp = new Backbone.Marionette.Application(); MyApp.start();
111. Composite Apps 2 Start Up MyApp.onInitializeBefore = function(options){ //stuff }); MyApp.onInitializeAfter = function(options){ if (Backbone.history){ Backbone.history.start(); } }); MyApp.start();
112. StartUp Eventing Lifecycle Composite Apps 2 Placement
113. Composite Apps 2 Eventing MyApp = new Backbone.Marionette.Application(); MyApp.vent.on("foo", function(){ alert("bar"); }); MyApp.vent.trigger("foo"); // => alert box "bar"
114. StartUp Eventing Lifecycle composite apps 2 Placement
115. Composite Apps 2 Lifecycle // start the app MyApp.start(); // later, start the module MyApp.FooModule.start();
116. StartUp Eventing Lifecycle composite apps 2 Placement
117. Composite Apps 2 Placement var MyApp = new Backbone.Marionette.Application(); MyApp.addRegions({ navigation : '#navigation_container', content : '#content_container', rightSidebar : '#right_sidebar_container', footer : '#footer_container' });
118. Composite Apps 2 Placement MyApp.start(); MyApp.content.show(new View()); var MyApp = new Backbone.Marionette.Application(); MyApp.addRegions({ navigation : '#navigation_container', content : '#content_container', rightSidebar : '#right_sidebar_container', footer : '#footer_container' });
119. Application Eventing Modules Composite Apps 2
120. Composite Apps 2 Modules ap lica ion hang off the p t
121. Composite Apps 2 Modules MyApp.module("MyModule", function(MyModule, MyApp, Backbone) { /// insert module functionality here });
122. Composite Apps 2 Modules MyApp.module("MyModule", function(MyModule, MyApp, Backbone){ ...define models... ImageItemView = Backbone.Marionette.ItemView.extend({ template: "#image-template" }); Library.show = function (region) { region.show(new ImageItemView({model: new MyModel()})); }; });
123. Composite Apps 2 Modules MyApp.module('ImageCatalog',function(ImageCatalog, App...){ .... module initialisation code... App.commands.addHandler('catalog:add', function(image){ allImages.add(image); }); App.reqres.addHandler('catalog:get', function(){ return allImages; }); });
124. Application Eventing Modules Composite Apps 2
125. plumbing code say goodbye to crappy
126. to your events add semantic meaning
127. composite design accept the winds of change with
128. marionette.js unsuck our backbone using
129. only scratched the Surface
130. tl;dr backbone.js is awesome
131. tl;dr but scaling it is ridiculouslyhard
132. tl;dr mv help us create structure ✯
133. tl;dr they don’t help us write scaleable JavaScript a lication
134. tl;dr we need to think beyond mv✯
135. tl;dr large JavaScript applications composed from smaller parts
136. tl;dr make your application dance marionette.js
137. That it! @ammeep amy.palamounta.in internet related activities: greenbutton.com backbonejs.org marionettejs.com lostechies.com/derickbailey addyosmani.com/blog