SlideShare une entreprise Scribd logo
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

Contenu connexe

En vedette

Be api - Web Mobile
Be api - Web MobileBe api - Web Mobile
Be api - Web Mobile
Nowhere-Entreprise
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
hugomallet
 
Mobile Inception - Web API Security
Mobile Inception - Web API SecurityMobile Inception - Web API Security
Mobile Inception - Web API Security
MobileInception
 
Web APIs in Action (in French)
Web APIs in Action (in French)Web APIs in Action (in French)
Web APIs in Action (in French)
Restlet
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2
Microsoft
 
ID連携入門 (実習編) - Security Camp 2016
ID連携入門 (実習編) - Security Camp 2016ID連携入門 (実習編) - Security Camp 2016
ID連携入門 (実習編) - Security Camp 2016
Nov Matake
 
London Adapt or Die: Opening Keynote with Chet Kapoor
London Adapt or Die: Opening Keynote with Chet KapoorLondon Adapt or Die: Opening Keynote with Chet Kapoor
London Adapt or Die: Opening Keynote with Chet Kapoor
Apigee | Google Cloud
 
Paris JUG - Backbone.js en environnement Java - Laurent DUTHEIL et Frederic M...
Paris JUG - Backbone.js en environnement Java - Laurent DUTHEIL et Frederic M...Paris JUG - Backbone.js en environnement Java - Laurent DUTHEIL et Frederic M...
Paris JUG - Backbone.js en environnement Java - Laurent DUTHEIL et Frederic M...
Frederic Merizen
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
Renaud Dumont
 
Armadilllo SimeSitem
Armadilllo SimeSitemArmadilllo SimeSitem
Armadilllo SimeSitem
yasmineajzoul
 

En vedette (10)

Be api - Web Mobile
Be api - Web MobileBe api - Web Mobile
Be api - Web Mobile
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Mobile Inception - Web API Security
Mobile Inception - Web API SecurityMobile Inception - Web API Security
Mobile Inception - Web API Security
 
Web APIs in Action (in French)
Web APIs in Action (in French)Web APIs in Action (in French)
Web APIs in Action (in French)
 
ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2ASP.NET MVC 5 et Web API 2
ASP.NET MVC 5 et Web API 2
 
ID連携入門 (実習編) - Security Camp 2016
ID連携入門 (実習編) - Security Camp 2016ID連携入門 (実習編) - Security Camp 2016
ID連携入門 (実習編) - Security Camp 2016
 
London Adapt or Die: Opening Keynote with Chet Kapoor
London Adapt or Die: Opening Keynote with Chet KapoorLondon Adapt or Die: Opening Keynote with Chet Kapoor
London Adapt or Die: Opening Keynote with Chet Kapoor
 
Paris JUG - Backbone.js en environnement Java - Laurent DUTHEIL et Frederic M...
Paris JUG - Backbone.js en environnement Java - Laurent DUTHEIL et Frederic M...Paris JUG - Backbone.js en environnement Java - Laurent DUTHEIL et Frederic M...
Paris JUG - Backbone.js en environnement Java - Laurent DUTHEIL et Frederic M...
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Armadilllo SimeSitem
Armadilllo SimeSitemArmadilllo SimeSitem
Armadilllo SimeSitem
 

Similaire à Backbonejs presentation

MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
Microsoft
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
Adyax
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
Vincent Composieux
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
Abdelhakim Bachar
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013
Xavier NOPRE
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
Philippe Sfeir
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
Sylvain Wallez
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Tarik Zakaria Benmerar
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
Aymen Sellaouti
 
L'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJSL'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJS
David Bottiau
 
Developpement_dun_site_web_Developpement.pdf
Developpement_dun_site_web_Developpement.pdfDeveloppement_dun_site_web_Developpement.pdf
Developpement_dun_site_web_Developpement.pdf
SofianeHassine2
 
Developpement dun site_web_developpement
Developpement dun site_web_developpementDeveloppement dun site_web_developpement
Developpement dun site_web_developpement
mosalah38
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
Publicis Sapient Engineering
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
VISEO
 

Similaire à Backbonejs presentation (20)

MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013
 
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
Café Numérique Arlon S03#02: Je code mon blog (EU code week Arlon)
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
L'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJSL'architecture MVVM avec KnockoutJS
L'architecture MVVM avec KnockoutJS
 
Developpement_dun_site_web_Developpement.pdf
Developpement_dun_site_web_Developpement.pdfDeveloppement_dun_site_web_Developpement.pdf
Developpement_dun_site_web_Developpement.pdf
 
Developpement dun site_web_developpement
Developpement dun site_web_developpementDeveloppement dun site_web_developpement
Developpement dun site_web_developpement
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 

Backbonejs presentation

  • 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