Unsuck your backbone

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

B83d5b590577969ee79a5ad845411a7d?s=128

Amy Palamountain

April 12, 2013
Tweet

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