Introduction àBackbone.JS@sylzys sylzysSylvain Zyssman29/05/2013mardi 21 mai 13
Backbone,  c’est  quoi  ?• Framework Javascript:M (Modèle)V (Vue)C (Collection)+ Router• Une seule dépendance ferme (Under...
Backbone,  pourquoi  ?• Principalement pour les Single Page Application• Navigation, formulaires ... gèrés en javascript• ...
Comment  ?Un modèle simplevar Todo = Backbone.Model.extend({defaults: {title:"backbone",language:"javascript"},initialize:...
Backbone Methodsextendconstructor / initializegetsetescapehasunsetclearididAttributecidattributeschangeddefaultstoJSONsync...
Comment  ?Une vue simplevar ListView = Backbone.View.extend({el: $(body),initialize: function(){_.bindAll(this, render);th...
Backbone Methodsextendconstructor / initializeel$elsetElementattributes$ (jQuery)renderremovedelegateEventsundelegateEvent...
Comment  ?Une collection simplevar List = Backbone.Collection.extend({model: Todo});On apporte les modifications à la vue :...
Backbone Methodsextendmodelconstructor / initializemodelstoJSONsyncUnderscore Methodsaddremoveresetsetgetatpushpopunshifts...
Backbone.JSLa démomardi 21 mai 13
Backbone,  et  après  ?Construits sur Backbone.js• Chaplin.js• Marionette.jsD’autres frameworks Javascript• Angular.js• Em...
Backbone,  des  liens  u9les•http://backbonejs.org/•http://documentcloud.github.io/backbone/docs/backbone.html•http://bard...
Backbone.JSDes questions ?mardi 21 mai 13
Upcoming SlideShare
Loading in …5
×

Présentation de BackBone.JS

686 views
626 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
686
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Présentation de BackBone.JS

  1. 1. Introduction àBackbone.JS@sylzys sylzysSylvain Zyssman29/05/2013mardi 21 mai 13
  2. 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 templatemardi 21 mai 13
  3. 3. Backbone,  pourquoi  ?• Principalement pour les Single Page Application• Navigation, formulaires ... gèrés en javascript• Evénements sur des changements de valeurs denos modèles => rafraichissementautomatiquement des vues•Possède son propre routeurmardi 21 mai 13
  4. 4. Comment  ?Un modèle simplevar 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. 5. Backbone Methodsextendconstructor / initializegetsetescapehasunsetclearididAttributecidattributeschangeddefaultstoJSONsyncfetchsavedestroyUnderscore MethodsvalidatevalidationErrorisValidurlurlRootparsecloneisNewhasChangedchangedAttributespreviouspreviousAttributesmardi 21 mai 13
  6. 6. Comment  ?Une vue simplevar 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. 7. Backbone Methodsextendconstructor / initializeel$elsetElementattributes$ (jQuery)renderremovedelegateEventsundelegateEventsmardi 21 mai 13
  8. 8. Comment  ?Une collection simplevar 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. 9. Backbone Methodsextendmodelconstructor / initializemodelstoJSONsyncUnderscore MethodsaddremoveresetsetgetatpushpopunshiftshiftslicelengthcomparatorsortpluckwherefindWhereurlparseclonefetchcreatemardi 21 mai 13
  10. 10. Backbone.JSLa démomardi 21 mai 13
  11. 11. Backbone,  et  après  ?Construits sur Backbone.js• Chaplin.js• Marionette.jsD’autres frameworks Javascript• Angular.js• Ember.js• Batman.js• Knockout.js• ...mardi 21 mai 13
  12. 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. 13. Backbone.JSDes questions ?mardi 21 mai 13

×