Unsuck your backbone

Transcript

1. unsuck
   your
   backbone
   

   View Slide

2. who am i
   just super quick
   

   View Slide

3. @ammeep
   aint he handsome?
   

   View Slide

4. we have
   evolved
   from static html
   

   View Slide

5. jQuery
   soup
   

   View Slide

6. we n d
   structure
   

   View Slide

7. then came the
   re olution
   

   View Slide

8. {❴ mv✯ }❵
   

   View Slide

9. view
   model
   controller
   

   View Slide

10. view
    model
    Presenter
    

    View Slide

11. view
    model
    View model
    

    View Slide

12. view
    model
    arse banana
    oh dear!
    

    View Slide

13. data concerns
    view concerns
    SEPARATE
    

    View Slide

14. {❴ mv✯ libraries }❵
    {❴ mv✯ frameworks }❵
    

    View Slide

15. whats the
    difference?
    

    View Slide

16. {❴
    frameworks
    }❵
    are generally
    prescriptive
    and sometimes
    restrictive
    :
    

    View Slide

17. {❴
    libraries
    }❵
    are generally
    focused
    and
    specific
    :
    

    View Slide

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
    

    View Slide

19. backbone.js is
    SJEJDVMPVTMZ
    unopinionated
    

    View Slide

20. Models
    Views
    Events
    Router
    data & associated functions
    

    View Slide

21. Models
    Views
    Events
    Router
    data & associated functions
    ui backed by a model
    

    View Slide

22. Models
    Views
    Events
    Router
    data & associated functions
    ui backed by a model
    bind & trigger custom events
    

    View Slide

23. Models
    Views
    Events
    Router
    data & associated functions
    ui backed by a model
    bind & trigger custom events
    linkable URLs
    

    View Slide

24. refactoring
    1st
    step
    

    View Slide

25. everywhere
    state stored
    
    The Grinch.
    meanest grinch of all.
    
    function sayHello(){
    var name = $('.name').text();
    var desc = $('.desc').text();
    return'Hello I’m '+ name +'The ' + desc;
    }
    sayHello();
    

    View Slide

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
    

    View Slide

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
    }
    });
    

    View Slide

28. focused
    Backbone keeps it small
    encapsulated
    Backbone keeps it
    Backbone keeps it
    

    View Slide

29. View Slide

30. No
    Strength
    Instructions
    

    View Slide

31. No
    Weakne
    Instructions
    

    View Slide

32. all it gives you is a base
    to help you into the world of
    well structured javascript
    

    View Slide

33. one thousand models
    impossible to extend
    one thousand views
    what the hell
    is going on
    

    View Slide

34. backbone
    soup
    

    View Slide

35. wait...
    shouldn’t mv
    prevent the soup?
    ✯
    WHAT
    

    View Slide

36. Presentation
    Pa ern
    ONLY
    mv stars are
    

    View Slide

37. {❴ mv✯ can’t save us now }❵
    

    View Slide

38. unsuck
    my backbone
    Do I
    how
    

    View Slide

39. can we build
    scalable backbone
    applications
    

    View Slide

40. how do people build
    desktop applications
    can we learn anything
    

    View Slide

41. composite
    applications
    

    View Slide

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
    

    View Slide

43. Round u
    Views
    Models
    into
    Modules
    Round u
    

    View Slide

44. How do you spot modules in a
    crowded room?
    

    View Slide

45. MODULE㽉
    

    View Slide

46. MODULE
    

    View Slide

47. View Slide

48. Module
    a small piece of functionality
    

    View Slide

49. Module
    are decoupled from each other
    

    View Slide

50. Module
    ask never take
    

    View Slide

51. Module
    don't pollute the global scope
    

    View Slide

52. A change to this module:
    Doesn't impact other modules
    

    View Slide

53. Put this module on a new page:
    and it still works!
    

    View Slide

54. still play a part ...
    presentation pa ern
    

    View Slide

55. ⬌
    How do these
    modules work
    together?
    

    View Slide

56. self organise
    ⬌
    ⬌
    ⬌
    ⬌
    ⬌
    ⬌
    ⬌
    ⬌
    ⬌
    ⬌
    ⬌
    ⬌
    ⬌
    they could
    

    View Slide

57. ⬌
    ⬌
    ⬌
    BUGs!
    I’m taking you all
    down with me!
    

    View Slide

58. planes don't rule the runway
    

    View Slide

59. does
    air traffic
    control
    no flips!
    

    View Slide

60. air traffic
    ⬌
    control
    

    View Slide

61. Placement
    Eventing
    Start Up Lifecycle
    A lication
    

    View Slide

62. Placement
    Eventing
    Start Up Lifecycle
    A lication
    

    View Slide

63. Placement
    Eventing
    Start Up Lifecycle
    A lication
    

    View Slide

64. Placement
    Eventing
    Start Up Lifecycle
    A lication
    fire up the engines
    

    View Slide

65. Placement
    Eventing
    Start Up Lifecycle
    A lication
    initial global setup
    

    View Slide

66. Placement
    Eventing
    Start Up Lifecycle
    A lication
    

    View Slide

67. Placement
    Eventing
    Start Up Lifecycle
    A lication
    do we have permission to land? go ahead
    

    View Slide

68. Placement
    Eventing
    Start Up Lifecycle
    A lication
    publish & subscribe
    to events
    

    View Slide

69. Placement
    Eventing
    Start Up Lifecycle
    A lication
    

    View Slide

70. Placement
    Eventing
    Start Up Lifecycle
    A lication
    time to take off?
    Not yet!
    

    View Slide

71. Placement
    Eventing
    Start Up Lifecycle
    A lication
    when is it safe for a
    module to start
    

    View Slide

72. Placement
    Eventing
    Start Up Lifecycle
    A lication
    

    View Slide

73. Placement
    Eventing
    Start Up Lifecycle
    A lication
    which runway?
    that
    runway
    

    View Slide

74. Placement
    Eventing
    Start Up Lifecycle
    A lication
    places modules inside
    the application shell
    

    View Slide

75. Placement
    Eventing
    Start Up Lifecycle
    A lication
    

    View Slide

76. focused modules
    round up your features into
    

    View Slide

77. pub & sub
    fire and forget
    

    View Slide

78. compose yourself
    regain control
    

    View Slide

79. built this way
    are flexible enough to
    applications
    accept change
    

    View Slide

80. can we build
    backbone.js
    this way?
    applications
    

    View Slide

81. View Slide

82. into two parts
    can be split
    marionette
    

    View Slide

83. to backbone.js
    mv✯
    extensions
    

    View Slide

84. ItemView
    CollectionView
    Layout
    mv✯ extensions
    1
    

    View Slide

85. ItemView
    CollectionView
    Layout
    mv✯ extensions
    1
    

    View Slide

86. mv✯ extensions
    1 ItemView
    MyView = Backbone.Marionette.ItemView.extend({
    template: "#some-template"
    });
    var view = new MyView({model: new FakeModel()});
    view.render();
    

    View Slide

87. ItemView
    CollectionView
    Layout
    mv✯ extensions
    1
    

    View Slide

88. mv✯ extensions
    1 CollectionView
    MyItemView = Backbone.Marionette.ItemView.extend({});
    MyColView = Backbone.Marionette.CollectionView.extend({
    itemView: MyItemView
    });
    

    View Slide

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();
    

    View Slide

90. ItemView
    CollectionView
    Layout
    mv✯ extensions
    1
    

    View Slide

91. mv✯ extensions
    1 Layouts
    AppLayout = Backbone.Marionette.Layout.extend({
    template: "#layout-template",
    regions: {
    menu: "#menu", // template elements
    content: "#content" // template elements
    }
    });
    

    View Slide

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());
    

    View Slide

93. N more
    Boilerplate code
    

    View Slide

94. architecture
    composite
    event driven
    

    View Slide

95. Application
    Eventing
    Modules
    Composite Apps
    2
    

    View Slide

96. Application
    Eventing
    Modules
    Composite Apps
    2
    

    View Slide

97. Composite Apps
    2 Eventing
    Backbone.Wreqr
    

    View Slide

98. Composite Apps
    2 Eventing
    Backbone.Wreqr
    Event Aggregator
    Requests
    Commands
    

    View Slide

99. Composite Apps
    2 Eventing
    Backbone.Wreqr
    Event Aggregator
    Requests
    Commands
    

    View Slide

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");
     

     View Slide

101. Composite Apps
     2 Eventing
     Backbone.Wreqr
     Event Aggregator
     Requests
     Commands
     

     View Slide

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);
     

     View Slide

103. Composite Apps
     2 Eventing
     Backbone.Wreqr
     Event Aggregator
     Requests
     Commands
     

     View Slide

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");
     

     View Slide

105. Composite Apps
     2 Eventing
     Backbone.Wreqr
     Event Aggregator
     Requests
     Commands
     

     View Slide

106. Application
     Eventing
     Modules
     Composite Apps
     2
     

     View Slide

107. Composite apps
     2
     

     View Slide

108. StartUp
     Eventing
     Lifecycle
     composite apps
     2
     Placement
     

     View Slide

109. StartUp
     Eventing
     Lifecycle
     composite apps
     2
     Placement
     

     View Slide

110. Composite Apps
     2 Start Up
     MyApp = new Backbone.Marionette.Application();
     MyApp.start();
     

     View Slide

111. Composite Apps
     2 Start Up
     MyApp.onInitializeBefore = function(options){
     //stuff
     });
     MyApp.onInitializeAfter = function(options){
     if (Backbone.history){
     Backbone.history.start();
     }
     });
     MyApp.start();
     

     View Slide

112. StartUp
     Eventing
     Lifecycle
     Composite Apps
     2
     Placement
     

     View Slide

113. Composite Apps
     2 Eventing
     MyApp = new Backbone.Marionette.Application();
     MyApp.vent.on("foo", function(){
     alert("bar");
     });
     MyApp.vent.trigger("foo"); // => alert box "bar"
     

     View Slide

114. StartUp
     Eventing
     Lifecycle
     composite apps
     2
     Placement
     

     View Slide

115. Composite Apps
     2 Lifecycle
     // start the app
     MyApp.start();
     // later, start the module
     MyApp.FooModule.start();
     

     View Slide

116. StartUp
     Eventing
     Lifecycle
     composite apps
     2
     Placement
     

     View Slide

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'
     });
     

     View Slide

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'
     });
     

     View Slide

119. Application
     Eventing
     Modules
     Composite Apps
     2
     

     View Slide

120. Composite Apps
     2 Modules
     ap lica ion
     hang off the
     p t
     

     View Slide

121. Composite Apps
     2 Modules
     MyApp.module("MyModule", function(MyModule, MyApp, Backbone)
     {
     /// insert module functionality here
     });
     

     View Slide

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()}));
     };
     });
     

     View Slide

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;
     });
     });
     

     View Slide

124. Application
     Eventing
     Modules
     Composite Apps
     2
     

     View Slide

125. plumbing code
     say goodbye to crappy
     

     View Slide

126. to your events
     add semantic meaning
     

     View Slide

127. composite design
     accept the winds of change with
     

     View Slide

128. marionette.js
     unsuck our backbone using
     

     View Slide

129. only
     scratched
     the
     Surface
     

     View Slide

130. tl;dr
     backbone.js is
     awesome
     

     View Slide

131. tl;dr
     but scaling it is
     ridiculouslyhard
     

     View Slide

132. tl;dr
     mv help us create
     structure
     ✯
     

     View Slide

133. tl;dr
     they don’t help us write
     scaleable
     JavaScript a lication
     

     View Slide

134. tl;dr
     we need to think beyond mv✯
     

     View Slide

135. tl;dr
     large JavaScript applications
     composed
     from smaller parts
     

     View Slide

136. tl;dr
     make your application dance
     marionette.js
     

     View Slide

137. That it!
     @ammeep
     amy.palamounta.in
     internet related activities:
     greenbutton.com
     backbonejs.org
     marionettejs.com
     lostechies.com/derickbailey
     addyosmani.com/blog
     

     View Slide