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? mauvis@pathbrite.com @krunkosaurus

24

Last year: Don’t Break the Chain

25

Sample responsive Backbone app.

hKp://dontbreak.me/