The document discusses the components and utilities of the Backbone.js framework. It describes the key components of Backbone - Models, Collections, Views - and how they work together. Models contain interactive data and bind attributes to the DOM. Collections provide methods to manage ordered sets of models. Views handle templating and user interactions. The document also covers utilities like routing and events that help connect components.

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