Backbonejs presentation
1 j'aime816 vues
Ce document présente le framework Backbone.js, un outil JavaScript basé sur le modèle MVC qui facilite l'organisation du code et l'interaction avec les serveurs via des connexions RESTful. Il décrit les composants principaux tels que les modèles, les collections et les vues, ainsi que leur utilisation pour gérer le DOM et les événements. Enfin, il aborde l'importance de la structuration du code pour les développeurs et les équipes de développement.
![La vue
class 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}})](https://image.slidesharecdn.com/backbonejspresentation-130109070614-phpapp02/85/Backbonejs-presentation-11-320.jpg)
Backbonejs presentation
- 1. Backbone.js Framework client
- 2. Moi ? — 1996 : - <Blink>Hello World</blink> - « WebMaster » - PHP - Starcaft — 2005 : - C#, .Net / Forms - Ruby - ASP MVC — 2010 : - Javascript
- 3. Backbone.js is — Model/View/Controller Javascript framework — RESTful JSON Connector — Hash-Routing Engine
- 4. Backone.js n’est pas — Un outil d’animation — DOM accessor
- 5. Qu’est que c’est — Un framework pour le rendu des applications, pour favoriser l’expérience utilisateur.
- 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. Le modèle class 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. 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. La collection class App.Collections.Pictures extends Backbone.Collection model: App.Picture url: -> "/items/#{@item_id}/contacts/#{@contact_id}/types/#{@type_id}/pictures"
- 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. La vue class 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. La vue — Modifier le DOM — Associer des évènements au DOM — Traiter les informations issues des modèles afin des les afficher
- 13. Le routeur ou le contrôleur class 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. 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. 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