Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Présentation de BackBone.JS

800 views

Published on

Published in: Technology
  • Be the first to comment

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

×