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