1. Introduction à
Backbone.JS
@sylzys sylzys
Sylvain Zyssman
29/05/2013
mardi 21 mai 13

2. Backbone, c’est quoi ?
• Framework Javascript:
M (Modèle)
V (Vue)
C (Collection)
+ Router
• Une seule dépendance ferme (Underscore.js)
• Compatible avec plusieurs moteurs de template
mardi 21 mai 13

3. Backbone, pourquoi ?
• Principalement pour les Single Page Application
• Navigation, formulaires ... gèrés en javascript
• Evénements sur des changements de valeurs de
nos modèles => rafraichissement
automatiquement des vues
•Possède son propre routeur
mardi 21 mai 13

4. Comment ?
Un modèle simple
var Todo = Backbone.Model.extend({
defaults: {
title:"backbone",
language:"javascript"
},
initialize: function(){
console.log('model initialized');
this.on('change:title', function(){
console.log("model title has changed");
});
}
});
var my_todo = new Todo();
var my_todo_with_param({title : «Angular»});
my_todo.get(‘title’);
my_todo_with_param.set({language : «JS»});
mardi 21 mai 13

5. Backbone Methods
extend
constructor / initialize
get
set
escape
has
unset
clear
id
idAttribute
cid
attributes
changed
defaults
toJSON
sync
fetch
save
destroy
Underscore Methods
validate
validationError
isValid
url
urlRoot
parse
clone
isNew
hasChanged
changedAttributes
previous
previousAttributes
mardi 21 mai 13

6. Comment ?
Une vue simple
var ListView = Backbone.View.extend({
el: $('body'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append("<ul> <li>hello world</li> </
ul>");
}
});
var listView = new ListView();
mardi 21 mai 13

7. Backbone Methods
extend
constructor / initialize
el
$el
setElement
attributes
$ (jQuery)
render
remove
delegateEvents
undelegateEvents
mardi 21 mai 13

8. Comment ?
Une collection simple
var List = Backbone.Collection.extend({
model: Todo
});
On apporte les modifications à la vue :
• Déclaration dans la fonction «initialize»
this.collection = new List();
this.collection.bind('add',
this.appendItem);
• Liaison de la collection et de la vue
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
mardi 21 mai 13

9. Backbone Methods
extend
model
constructor / initialize
models
toJSON
sync
Underscore Methods
add
remove
reset
set
get
at
push
pop
unshift
shift
slice
length
comparator
sort
pluck
where
findWhere
url
parse
clone
fetch
create
mardi 21 mai 13

10. Backbone.JS
La démo
mardi 21 mai 13

11. Backbone, et après ?
Construits sur Backbone.js
• Chaplin.js
• Marionette.js
D’autres frameworks Javascript
• Angular.js
• Ember.js
• Batman.js
• Knockout.js
• ...
mardi 21 mai 13

12. Backbone, des liens u9les
•http://backbonejs.org/
•http://documentcloud.github.io/backbone/docs/backbone.html
•http://bardevblog.wordpress.com/2012/12/04/re-learning-backbone-
js/
•http://fr.clever-age.com/veille/blog/decouvrir-backbone-js-avec-
todomvc.html
•http://addyosmani.github.io/backbone-fundamentals/
mardi 21 mai 13

13. Backbone.JS
Des questions ?
mardi 21 mai 13