Deep Dive Into Backbone.js Internals + Underscore.js.

HTML5 Dev Conf Oct, 2012 — Never has so much been made out of so little. In this session we take a deep dive into the 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.

Transcript

1. Deep Dive Into Backbone.js Internals + Underscore.js. Mauvis Ledford CTO, Pathbrite
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: 2 •  Soundcloud, Stripe, Grooveshark, Do, BitTorrent, Nike+, …
3. Backbone.js: Source Code Analysis Lines of code •  1432 lines w/ comments. •  856 lines without. Size •  52kb raw w/ comments •  30k without •  5.6kb packed and gzipped Underscore •  4kb packed and gzipped 3
4. Backbone.js: 856 line breakdown 4 Model, 29% Collection, 27% View, 10% Router, 6% History, 15% .sync, 3% inheritance, 2% misc, 8% •  Model (234) •  Collection (218) •  View (75) •  Router (46) •  History (116) •  Event (65) •  Sync (29) •  Inherit (17) •  Misc (55)
5. How to build a good framework? Taken from the PunyMCE framework. 5 Starts with these 3.
6. Same three functions in other libraries jQuery •  jQuery.each •  jQuery.extend •  jQuery.isFunction, jQuery.isArray, jQuery.isEmptyObject, jQuery.isNumeric Underscore •  _.each •  _.extend •  _.isFunction, _.isArray, _.isEmpty, _.has, _.isEqual 6
7. _.extend({},{},…) 7 Backbone source uses this heavily.
8. Diving into the code: top down 8 Anonymous function to encapsulate framework setup.   Calling anonymous function in the context of global object. Node:  global  DOM:  window   Environment setup.
9. Diving into the code: top down Let your knowledge shine 9 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.   Two checks: “exports” and “require”. …   …  
10. Diving into the code: top down 10 Supports jQuery, Zepto, or Ender   Allows you to restore Backbone namespace to previous Backbone.   Used with Backbone.sync method.   NoConflict and optional DOM library. …   …  
11. Diving into the code: top down 11 All of Backbone’s classes inherit this class and now have these methods.   Backwards compatibility   Event class, so important! …   …  
12. Diving into the code: top down 12 Mixing Event class in to custom class. …   …  
13. Diving into the code: top down 13 Model class …   …   Every new model gets a unique id.   Attributes are set silently on model creation.   Last step, call the models init.  
14. Diving into the code: top down 14 Model class …   …   Notice that `Events` class extends `Model.prototype` which is then extended by an anonymous object.  
15. Diving into the code: top down 15 Collection class …   …   If `comparator` function is passed new models are sorted in order.  
16. Diving into the code: top down 16 Collection class …   …   Additional underscore methods are added directly to `Collection.prototype`.   Notice that `Events` class is mixed in again.  
17. Diving into the code: top down 17 Demonstrating models and collections on https://pathbrite.com/portfolios . // Count portfolios rrripple.data.portfolios.length; // Get collection JSON list. rrripple.data.portfolios.toJSON(); // Get model JSON list. rrripple.data.portfolios.first().toJSON(); // Add new portfolio item. rrripple.data.portfolios.add({ title : 'Watermelon' });
18. Diving into the code: top down 18 Router class. …   …   Show  sample  routes.  
19. Diving into the code: top down 19 History class …   …   Backbone.history.navigate('/portfolios', { trigger: true });
20. Diving into the code: top down 20 View class …   …   Arguments passed with these keys are applied directly to the instantiated view during `this._configure`, the rest can be found in `view.options`.   `ensureElement` sets `this.el` to a detached div if no el or tagName specified.   Show:  rp.classes.views.popup  in  editor.   var  view  =  new  rrripple.classes.views.par>als.Se?ngsPopup();  
21. Diving into the code: top down 21 Inherits functionality …   …   Shh! Saved referenced to parents prototype. Let’s you access parents method you could have overwritten on the child.   User.prototype.save = function(attrs) { // modify attrs code User.__super__.save.apply(this, arguments); };
22. Diving into the code: top down 22 Giving all classes extend ability …   …   Notice `_.extend` != `Collection.extend`!!!  
23. Live Demos 23 Frontend and backend Backbone examples Pathbrite:  Backbone  as   a  frontend  plaGorm.     pathbrite.com   Kbot:  Turntable  robot  built     on  Node  and  Backbone.     github.com/krunkosaurus/kbot      
24. Thanks! Feedback? mauvis@pathbrite.com @krunkosaurus 24
25. Last year: Don’t Break the Chain 25 Sample responsive Backbone app. hKp://dontbreak.me/