Deep Dive Into Backbone.js Internals + Underscore.js. Mauvis Ledford CTO, Pathbrite 

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+, … 

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 

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) 

How to build a good framework? Taken from the PunyMCE framework. 5 Starts with these 3. 

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 

_.extend({},{},…) 7 Backbone source uses this heavily. 

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. 

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”. …   …   

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

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! …   …   

Diving into the code: top down 12 Mixing Event class in to custom class. …   …   

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.   

Diving into the code: top down 14 Model class …   …   Notice that `Events` class extends `Model.prototype` which is then extended by an anonymous object.   

Diving into the code: top down 15 Collection class …   …   If `comparator` function is passed new models are sorted in order.   

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.   

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

Diving into the code: top down 18 Router class. …   …   Show  sample  routes.   

Diving into the code: top down 19 History class …   …   Backbone.history.navigate('/portfolios', { trigger: true }); 

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

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

Diving into the code: top down 22 Giving all classes extend ability …   …   Notice `_.extend` != `Collection.extend`!!!   

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       

Thanks! Feedback? [email protected] @krunkosaurus 24 

Last year: Don’t Break the Chain 25 Sample responsive Backbone app. hKp://dontbreak.me/