1. 03 Backbone
Framework Analysis
Public Code Repository
by
Sergey N. Bolshchikov
http://bolshchikov.net
sergey.bolshchikov@new-proimage.com
New ProImage, 2012

2. Outline
I. Introduction
II. Dependencies
III. Components
a. Model
b. Collection
c. View
IV. Utilities
a. Router
b. History
V. Conclusion

3. Shortly: 5 things
Backbone.js gives structure to web
applications by providing models with
key-value binding and custom events,
collections with a rich API of
enumerable functions, views with
declarative event handling, and
connects it all to your existing API over
a RESTful JSON interface.

4. Shortly: 1
Backbone.js gives structure to web
applications by providing models with
key-value binding and custom events,
collections with a rich API of
enumerable functions, views with
declarative event handling, and
connects it all to your existing API over
a RESTful JSON interface.

5. Shortly: 2
Backbone.js gives structure to web
applications by providing models with
key-value binding and custom events,
collections with a rich API of
enumerable functions, views with
declarative event handling, and
connects it all to your existing API over
a RESTful JSON interface.

6. Shortly: 3
Backbone.js gives structure to web
applications by providing models with
key-value binding and custom events,
collections with a rich API of
enumerable functions, views with
declarative event handling, and
connects it all to your existing API over
a RESTful JSON interface.

7. Shortly: 4
Backbone.js gives structure to web
applications by providing models with
key-value binding and custom events,
collections with a rich API of
enumerable functions, views with
declarative event handling, and
connects it all to your existing API over
a RESTful JSON interface.

8. Shortly: 5
Backbone.js gives structure to web
applications by providing models with
key-value binding and custom events,
collections with a rich API of
enumerable functions,views with
declarative event handling, and
connects it all to your existing API over
a RESTful JSON interface.

9. Dependencies
Backbone
Underscore json2.js [jQuery]

10. Backbone Components

11. Model
Backbone model contains interactive data. It possess different useful properties
and methods:
● id - modelID
● idAttribute - databaseID
● get(attrName) - returns attribute value
● set(attrName, attrValue) - sets the value for the named attribute
● clear() - removes all model attributes
● toJSON() - return a copy of the model's attributes for JSON stringification
● url - relative URL where the model's resource would be located on the
server
● fetch() - gets the latest version of the model from the server
● save() - saves the model to the DB
● validate() - checks the given data before set() and save()
P.S. Almost never is predefined

12. Model
var GreetingModel = Backbone.Model.extend({
// defaults specify what attributes the model should
// posses upon creation
defaults: {
text: 'hello world'
}
});
var TodoModel = Backbone.Model.extend({
defaults: {
id: 1000,
done: false,
name: 'default task',
deadline: new Date()
}
});

13. Collection
Collections are ordered sets of models. It can be fetched from the server. Any
event that is triggered on a model in a collection will also be triggered on the
collection directly, for convenience.
● add()
● remove()
Comfortable backbone built data structure over models: array and stack.
● push()
● pop()
● unshift()
● shift()
Some handy methods:
● sort()
● where() - filters collection by given attribute
● fetch()

14. Collection
// Definitions
// Todo Model
var TodoModel = Backbone.Model.extend({
defaults: {
id: 1000,
done: false,
name: 'default task',
deadline: new Date()
}
});
// Todo Collection: ordered list of Todo models
var TodoCollection = Backbone.Collection.extend({
model: TodoModel
});

15. View
The most disputable component in the Backbone framework.
Camp I: "It's NOT a controller"
Camp II: "It's a controller"
Backbone Authors: "If it helps any, in Backbone, the View class can also be
thought of as a kind of controller, dispatching events that originate from the UI,
with the HTML template serving as the true view."
What it does in life:
● renders the template and generates html
● handles user-generated events
Attributes and Methods partially of view and controller:
● tagName - html tag for the generated view
● $el - cached jQuery DOM selector
● events: {} - hash of event
● render() - rendering method

16. View
var GreetingView = Backbone.View.extend({
// every view must have a specified render method
// otherwise nothing would be seen
render: function() {
$('p').html(this.model.get('text'));
return this;
}
});
var greet = new GreetingModel();
new GreetingView({model: greet}).render()​
Hello world Example

17. View
var RecordView = Backbone.View.extend({
tagName: 'tr',
events: {
'click': 'performed'
},
initialize : function() {
this.model.bind('change', this.render, this);
},
render: function() {
var generatedHtml = _.template(this.template, {
id: this.model.get('id'),
done: this.model.get('done'),
name: this.model.get('name'),
deadline: this.model.get('deadline' )
});
$(this.el).html(generatedHtml );
return this;
},
performed: function() {
this.model.set('done', true);
}
});
Todo Example

18. View
var RecordView = Backbone.View.extend( {
tagName: 'tr',
events: {
'click': 'performed'
},
initialize: function() {
this.model.bind('change', this.render, this);
},
render: function() {
var generatedHtml = _.template(this.template, {
id: this.model.get('id'),
done: this.model.get('done'),
name: this.model.get('name'),
deadline: this.model.get('deadline')
});
$(this.el).html(generatedHtml);
return this;
},
performed: function() {
this.model.set('done', true);
}
});

19. View
var RecordView = Backbone.View.extend( {
tagName: 'tr',
events: {
'click': 'performed'
},
initialize: function() {
this.model.bind('change', this.render, this);
},
render: function() {
var generatedHtml = _.template(this.template, {
id: this.model.get('id'),
done: this.model.get('done'),
name: this.model.get('name'),
deadline: this.model.get('deadline')
});
$(this.el).html(generatedHtml);
return this;
},
performed: function() {
this.model.set('done', true);
}
});

20. View
var RecordView = Backbone.View.extend( {
tagName: 'tr',
events: {
'click': 'performed'
},
initialize: function() {
this.model.bind('change', this.render, this);
},
render: function() {
var generatedHtml = _.template(this.template, {
id: this.model.get('id'),
done: this.model.get('done'),
name: this.model.get('name'),
deadline: this.model.get('deadline')
});
$(this.el).html(generatedHtml);
return this;
},
performed: function() {
this.model.set('done', true);
}
});

21. View
var RecordView = Backbone.View.extend( {
tagName: 'tr',
events: {
'click': 'performed'
},
initialize : function() {
this.model.bind('change', this.render, this);
},
render: function() {
var generatedHtml = _.template(this.template, {
id: this.model.get('id'),
done: this.model.get('done'),
name: this.model.get('name'),
deadline: this.model.get('deadline')
});
$(this.el).html(generatedHtml);
return this;
},
performed: function() {
this.model.set('done', true);
}
});

22. View
var RecordView = Backbone.View.extend( {
tagName: 'tr',
events: {
'click': 'performed'
},
initialize: function() {
this.model.bind('change', this.render, this);
},
render: function() {
var generatedHtml = _.template(this.template, {
id: this.model.get('id'),
done: this.model.get('done'),
name: this.model.get('name'),
deadline: this.model.get('deadline' )
});
$(this.el).html(generatedHtml );
return this;
},
performed: function() {
this.model.set('done', true);
}
});

23. Template
Underscore templating engine by default. It's possible to connect any other.
<tr>
<td><%= id %></td>
<td><%= done %></td>
<td><%= name %></td>
<td><%= deadline %></td>
</tr>​
● Mixes template with the data from a model
● Generates html
● Append is with DOM element
render: function() {
var generatedHtml = _.template(this.template, {
id: this.model.get('id'),
done: this.model.get('done'),
name: this.model.get('name'),
deadline: this.model.get('deadline')
});
$(this.el).html(generatedHtml);
return this;
}, Todo Example

24. Event
Events is a module that can be mixed in to any object, giving the object the
ability to bind and trigger custom named events.
var object = {};
_.extend(object, Backbone.Events);
object.on("alert", function(msg) {
alert("Triggered " + msg);
});
object.trigger("alert", "an event");​
Event Example

25. Router & History
Backbone.Router provides methods for routing client-side pages, and
connecting them to actions and events.
window.Router = Backbone.Router.extend({
routes: {
'': 'tree',
'folder/:name' : 'list'
},
initialize : function() {
this.headerView = new HeaderView ();
$('.header').html(this.headerView .render().el);
...
},
tree: function() {
...
},
list: function(name) {
...
}
});​

26. Performance
● All modern browsers support, IE 8+
● Framework size: Backbone + Underscore = 89KB
● Application size: 330KB

27. Conclusion
● Lightweight
● Great momentum: many project, community support
● Good documentation
● Binds to any JS library