deep dive into backbone.js internals + underscore.js
DESCRIPTION
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.TRANSCRIPT
![Page 1: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/1.jpg)
Deep Dive Into Backbone.js Internals + Underscore.js. Mauvis Ledford CTO, Pathbrite
![Page 2: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/2.jpg)
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+, …
![Page 3: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/3.jpg)
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
![Page 4: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/4.jpg)
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)
![Page 5: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/5.jpg)
How to build a good framework?
Taken from the PunyMCE framework. 5
Starts with these 3.
![Page 6: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/6.jpg)
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
![Page 7: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/7.jpg)
_.extend({},{},…)
7
Backbone source uses this heavily.
![Page 8: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/8.jpg)
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.
![Page 9: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/9.jpg)
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”.
…
…
![Page 10: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/10.jpg)
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.
…
…
![Page 11: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/11.jpg)
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! …
…
![Page 12: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/12.jpg)
Diving into the code: top down
12
Mixing Event class in to custom class.
…
…
![Page 13: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/13.jpg)
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.
![Page 14: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/14.jpg)
Diving into the code: top down
14
Model class
…
…
Notice that `Events` class extends `Model.prototype` which
is then extended by an anonymous object.
![Page 15: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/15.jpg)
Diving into the code: top down
15
Collection class
…
…
If `comparator` function is passed new models are sorted in order.
![Page 16: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/16.jpg)
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.
![Page 17: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/17.jpg)
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' });
![Page 18: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/18.jpg)
Diving into the code: top down
18
Router class.
…
…
Show sample routes.
![Page 19: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/19.jpg)
Diving into the code: top down
19
History class
…
… Backbone.history.navigate('/portfolios', { trigger: true });
![Page 20: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/20.jpg)
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();
![Page 21: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/21.jpg)
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);
};
![Page 22: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/22.jpg)
Diving into the code: top down
22
Giving all classes extend ability
…
…
Notice `_.extend` != `Collection.extend`!!!
![Page 23: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/23.jpg)
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
![Page 25: Deep Dive into Backbone.js Internals + Underscore.js](https://reader034.vdocuments.us/reader034/viewer/2022042614/559c1bb81a28ab14158b4590/html5/thumbnails/25.jpg)
Last year: Don’t Break the Chain
25
Sample responsive Backbone app.
hKp://dontbreak.me/