Backbone.js  Framework client
Moi ?—    1996 :  - <Blink>Hello World</blink>  - « WebMaster »  - PHP  - Starcaft—    2005 :  - C#, .Net / Forms  - Rub...
Backbone.js                          is—  Model/View/Controller Javascript framework—  RESTful JSON Connector—  Hash-Ro...
Backone.js                    n’est pas—  Un outil d’animation—  DOM accessor
Qu’est que c’est—  Un framework pour le rendu des applications, pour  favoriser l’expérience utilisateur.
Qu’est que c’est—  Si tu fais du Javascript, tu penses que ça devient  très sale!—  Backbone permet d’organiser votre co...
Le modèleclass App.Picture extends Backbone.Model model: App.Picture defaults:  picture_file_name: "no_image" url: ->  bas...
Le modèle—  Peut se connecter à une URL du serveur—  Actions possibles du modèle : - Obtenir un élément (get) - Sauvegar...
La collectionclass App.Collections.Pictures extends Backbone.Collectionmodel: App.Pictureurl: -> "/items/#{@item_id}/conta...
La collection—  Pour afficher une liste d’informations—  Peut connecter une URL au serveur—  Permettre de demander une ...
La vueclass App.Views.Pictures.AddPictures extends Backbone.View template: JST["kukariri_backbonejs/templates/pictures"] e...
La vue—  Modifier le DOM—  Associer des évènements au DOM—  Traiter les informations issues des modèles afin  des les a...
Le routeur ou le contrôleurclass App.Routers.Items extends Backbone.Router routes:  "/items/new": "new »  "/items/:id/edit...
Le routeur ou le contrôleur—  Utile pour initialiser les états d’une application—  Permet d’accéder aux différentes page...
Et encore ?—  Faire beaucoup de petits fichiers Javascript pour les  meilleurs développeurs et les grosses équipes de  dé...
Prochain SlideShare
Chargement dans…5
×

Backbonejs presentation

596 vues

Publié le

2 commentaires
0 j’aime
Statistiques
Remarques
  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
596
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
6
Commentaires
2
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Backbonejs presentation

  1. 1. Backbone.js Framework client
  2. 2. Moi ?—  1996 : - <Blink>Hello World</blink> - « WebMaster » - PHP - Starcaft—  2005 : - C#, .Net / Forms - Ruby - ASP MVC—  2010 : - Javascript
  3. 3. Backbone.js is—  Model/View/Controller Javascript framework—  RESTful JSON Connector—  Hash-Routing Engine
  4. 4. Backone.js n’est pas—  Un outil d’animation—  DOM accessor
  5. 5. Qu’est que c’est—  Un framework pour le rendu des applications, pour favoriser l’expérience utilisateur.
  6. 6. Qu’est que c’est—  Si tu fais du Javascript, tu penses que ça devient très sale!—  Backbone permet d’organiser votre code, grâce au MVC.—  On peut accéder au DOM uniquement à partir des vues (avec jQuery, Prototype, etc.)
  7. 7. Le modèleclass App.Picture extends Backbone.Model model: App.Picture defaults: picture_file_name: "no_image" url: -> base = "/items/#{@item_id}/contacts/#{@contact_id}/types/#{@type_id}/pictures" return base if @isNew() base + (if base.charAt(base.length - 1) is "/" then "" else "/") + @id validate: (attributes) -> "Error!" unless attributes
  8. 8. Le modèle—  Peut se connecter à une URL du serveur—  Actions possibles du modèle : - Obtenir un élément (get) - Sauvegarder un élément (save) - Détruire un élément (destroy) - Attribuer des valeurs par défaut (defaults)
  9. 9. La collectionclass App.Collections.Pictures extends Backbone.Collectionmodel: App.Pictureurl: -> "/items/#{@item_id}/contacts/#{@contact_id}/types/#{@type_id}/pictures"
  10. 10. La collection—  Pour afficher une liste d’informations—  Peut connecter une URL au serveur—  Permettre de demander une multitude de requêtes au serveur.
  11. 11. La vueclass App.Views.Pictures.AddPictures extends Backbone.View template: JST["kukariri_backbonejs/templates/pictures"] el: ".modal" initialize: (options) -> @item = options.item @pictures = options.pictures @render()render: -> $(@el).html(Haml.render(@template(), { locals: {item: @item, pictures: @pictures}})
  12. 12. La vue—  Modifier le DOM—  Associer des évènements au DOM—  Traiter les informations issues des modèles afin des les afficher
  13. 13. Le routeur ou le contrôleurclass App.Routers.Items extends Backbone.Router routes: "/items/new": "new » "/items/:id/edit" : "edit » initialize: -> @item = new App.Item() edit: (id) -> @item = new App.Item(id: id) @item.fetch success: (model, response) -> @ViewsItemsEdit = new App.Views.Items.Edit(item: model)
  14. 14. Le routeur ou le contrôleur—  Utile pour initialiser les états d’une application—  Permet d’accéder aux différentes pages de l’application
  15. 15. Et encore ?—  Faire beaucoup de petits fichiers Javascript pour les meilleurs développeurs et les grosses équipes de développement—  Commenter votre code (exemple : yDoc compatible)—  Travailler en étant dans les derniers standards de HTML5

×