Deep Dive into Backbone.js Internals + Underscore.js


Published on

Never has so much been made out of so little. In this session we take a deep dive into all 800 lines of the Backbone.js framework—the platform used to power some of the most popular sites and mobile sites today. We analyze line-by-line the code that forms the building blocks of the framework and how they interact with underscore.js, Backbone's helper library, throwing in some tips and tricks on the way. Suitable for new and advanced Backbone users.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Deep Dive into Backbone.js Internals + Underscore.js

  1. 1. Deep Dive Into Backbone.js Internals +Underscore.js.Mauvis LedfordCTO, Pathbrite
  2. 2. Backbone.js: Quick Facts•  0.1.0 released Oct 13, 2010, latest stable 0.9.2 – 7 months ago•  Used in dozens of popular web and mobile web sites out there:•  Soundcloud, Stripe, Grooveshark, Do, BitTorrent, Nike+, …2
  3. 3. Backbone.js: Source Code AnalysisLines of code•  1432 lines w/ comments.•  856 lines without.Size•  52kb raw w/ comments•  30k without•  5.6kb packed and gzippedUnderscore•  4kb packed and gzipped3
  4. 4. Backbone.js: 856 line breakdown•  Model (234) inheritance, 2%•  Collection (218) misc, .sync, 3%•  View (75) 8% Model,•  Router (46) 29%•  History (116) History, 15%•  Event (65)•  Sync (29) Router, 6%•  Inherit (17) View, Collection,•  Misc (55) 10% 27%4
  5. 5. How to build a good framework?Starts with these 3.5 Taken from the PunyMCE framework.
  6. 6. Same three functions in other librariesjQuery•  jQuery.each•  jQuery.extend•  jQuery.isFunction, jQuery.isArray, jQuery.isEmptyObject, jQuery.isNumericUnderscore•  _.each•  _.extend•  _.isFunction, _.isArray, _.isEmpty, _.has, _.isEqual6
  7. 7. _.extend({},{},…)Backbone source uses this heavily.7
  8. 8. Diving into the code: top downEnvironment setup. Anonymous function to encapsulate framework setup.   Calling anonymous function in the context of global object. Node:  global  DOM:  window  8
  9. 9. Diving into the code: top downTwo checks: “exports” and “require”. Preparing for jQuery-…   like “noConflict”   Checks for existence of global “exports” variable. If exists, assume we are serverside.  …   Similarily, if underscore isn’t loaded and global “require” exists include underscore lib.  9 Let your knowledge shine
  10. 10. Diving into the code: top down Supports jQuery,NoConflict and optional DOM library. Zepto, or Ender  …   Allows you to restore Backbone namespace to previous Backbone.  …   Used with Backbone.sync method.  10
  11. 11. Diving into the code: top downEvent class, so important!…   All of Backbone’s classes inherit this class and now have these methods.  …   Backwards compatibility  11
  12. 12. Diving into the code: top downMixing Event class in to custom class.…  …  12
  13. 13. Diving into the code: top downModel class…   Every new model gets a unique id.   Attributes are set silently on model creation.   Last step, call the models init.  …  13
  14. 14. Diving into the code: top downModel class…   Notice that `Events` class extends `Model.prototype` which is then extended by an anonymous object.  …  14
  15. 15. Diving into the code: top downCollection class If `comparator` function is passed new models are sorted in order.  …  …  15
  16. 16. Diving into the code: top downCollection class…   Notice that `Events` class is mixed in again.   Additional underscore methods are added directly to `Collection.prototype`.  …  16
  17. 17. Diving into the code: top downDemonstrating models and collections on // Count portfolios; // Get collection JSON list.; // Get model JSON list.; // Add new portfolio item.{ title : Watermelon });17
  18. 18. Diving into the code: top downRouter class.…  …   Show  sample  routes.  18
  19. 19. Diving into the code: top downHistory class…  …   Backbone.history.navigate(/portfolios, { trigger: true });19
  20. 20. Diving into the code: top downView class…   `ensureElement` sets `this.el` to a detached div if no el or tagName specified.   Arguments passed with these keys are applied directly to the instantiated view during `this._configure`, the rest can be found in `view.options`.  …   Show:  rp.classes.views.popup  in  editor.   var  view  =  new  rrripple.classes.views.par>als.Se?ngsPopup();  20
  21. 21. Diving into the code: top downInherits functionality… = function(attrs) { // modify attrs code, arguments); }; Shh! Saved referenced to parents prototype. Let’s you access parents method you could have overwritten on the child.  …  21
  22. 22. Diving into the code: top downGiving all classes extend ability…  …   Notice `_.extend` != `Collection.extend`!!!  22
  23. 23. Live DemosFrontend and backend Backbone examples Pathbrite:  Backbone  as   a  frontend  plaGorm.   Kbot:  Turntable  robot  built     on  Node  and  Backbone.    23  
  24. 24. Thanks!Feedback?
  25. 25. Last year: Don’t Break the ChainSample responsive Backbone app. hKp://    25