Backbone.js Framework client

Moi ? �  1996 :

- <Blink>Hello World</blink>

- « WebMaster »

- PHP

- Starcaft

�  2005 :

- C#, .Net / Forms

- Ruby

- ASP MVC

�  2010 :

- Javascript

Backbone.js is

�  Model/View/Controller Javascript framework

�  RESTful JSON Connector

�  Hash-Routing Engine

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 code, grâce au MVC.

�  On peut accéder au DOM uniquement à partir des vues (avec jQuery, Prototype, etc.)

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

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)

La collection class App.Collections.Pictures extends Backbone.Collection

model: App.Picture

url: ->

"/items/#{@item_id}/contacts/#{@contact_id}/types/#{@type_id}/pictures"

La collection �  Pour afficher une liste d’informations

�  Peut connecter une URL au serveur

�  Permettre de demander une multitude de requêtes au serveur.

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}})

La vue �  Modifier le DOM

�  Associer des évènements au DOM

�  Traiter les informations issues des modèles afin des les afficher

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)

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

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