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
Last year: Don’t Break the Chain
25
Sample responsive Backbone app.
hKp://dontbreak.me/
