Unsuck your backbone

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
29. None

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

47. None

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

81. None

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