Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher

1,035 views

Published on

Backbone.js est un framework javascript léger basé sur une architecture Modèle-Vue-Controlleur. Il permet de créer des application web exécutées côté client avec une communication serveur RESTful en JSON. Retour d'expérience sur son utilisation dans la conception de l'interface front de Plixee.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,035
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher

  1. 1. Build spaghetti-proof web apps
  2. 2. JAVASCRIPT ?
  3. 3. JAVASCRIPT ?
  4. 4. JAVASCRIPT ?
  5. 5. LA PHILOSOPHIE
  6. 6. LA PHILOSOPHIE• Application web monopage
  7. 7. LA PHILOSOPHIE• Application web monopage• Architecture MV(C?)
  8. 8. LA PHILOSOPHIE• Application web monopage• Architecture MV(C?)• Framework léger
  9. 9. LA PHILOSOPHIE• Application web monopage• Architecture MV(C?)• Framework léger• Agnostique
  10. 10. LA PHILOSOPHIE• Application web monopage• Architecture MV(C?)• Framework léger• Agnostique• Communication RESTful
  11. 11. LA PHILOSOPHIE• Application web monopage• Architecture MV(C?)• Framework léger• Agnostique• Communication RESTful• Dépendance Underscore.js et jQuery
  12. 12. LA WEB-APP CLASSIQUEServeur Client HTML• Logique business • Requête• Gestion des données • Parsing HTML et• Templating affichage• i18n
  13. 13. LA WEB-APP CLASSIQUEServeur Client HTML• Logique business • Requête• Gestion des données • Parsing HTML et• Templating affichage• i18n x nClients
  14. 14. LA WEB-APP CLASSIQUEServeur Client HTML• Logique business • Requête• Gestion des données • Parsing HTML et• Templating affichage• i18n x nClients
  15. 15. LA WEB-APP CLASSIQUEServeur Client HTML• Logique business • Requête• Gestion des données • Parsing HTML et• Templating affichage• i18n x nClients
  16. 16. LA WEB-APP CLASSIQUEServeur Client HTML• Logique business • Requête• Gestion des données • Parsing HTML et• Templating affichage• i18n x nClients + Templating complet à chaque changement de page
  17. 17. LA WEB-APP CLASSIQUEServeur Client HTML• Logique business • Requête• Gestion des données • Parsing HTML et• Templating affichage• i18n x nClients + Templating complet à chaque changement de page
  18. 18. LA WEB-APP BACKBONEServeur Client JSON • Requête • Templating• Logique business • i18n• Gestion des données • Récupération des données
  19. 19. LA WEB-APP BACKBONEServeur Client JSON • Requête • Templating• Logique business • i18n• Gestion des données • Récupération des donnéesRequêtes légères
  20. 20. LA WEB-APP BACKBONEServeur Client JSON • Requête • Templating• Logique business • i18n• Gestion des données • Récupération des donnéesRequêtes légères Travaille pour nous
  21. 21. L’EXEMPLE
  22. 22. LES MODÈLES# Création de la classe dun TweetTweet = Backbone.Model.extend    urlRoot: "/api/tweets"    validate: (attributes)->        if attributes.author == "" then return "Invalid author"        if attributes.text == "" or attributes.text.length > 140 then return "Invalid tweet" # Instanciation dun nouveau TweetaTweet = new Tweet(    author: "Hugoch"    text: "Hey, Im presenting #Backbonejs at #NWXTech5 conference.")   
  23. 23. LES MODÈLES# Création de la classe dun TweetTweet = Backbone.Model.extend    urlRoot: "/api/tweets"    validate: (attributes)->        if attributes.author == "" then return "Invalid author"        if attributes.text == "" or attributes.text.length > 140 then return "Invalid tweet" # Instanciation dun nouveau TweetaTweet = new Tweet(    author: "Hugoch"    text: "Hey, Im presenting #Backbonejs at #NWXTech5 conference.") aTweet.save()  POST /api/tweets 
  24. 24. LES MODÈLES# Création de la classe dun TweetTweet = Backbone.Model.extend    urlRoot: "/api/tweets"    validate: (attributes)->        if attributes.author == "" then return "Invalid author"        if attributes.text == "" or attributes.text.length > 140 then return "Invalid tweet" # Instanciation dun nouveau TweetaTweet = new Tweet(    author: "Hugoch"    text: "Hey, Im presenting #Backbonejs at #NWXTech5 conference.") aTweet.save()  POST /api/tweetsaTweet.save(    author: "Chuck Norris" PUT /api/tweets/42) 
  25. 25. LES MODÈLES# Création de la classe dun TweetTweet = Backbone.Model.extend    urlRoot: "/api/tweets"    validate: (attributes)->        if attributes.author == "" then return "Invalid author"        if attributes.text == "" or attributes.text.length > 140 then return "Invalid tweet" # Instanciation dun nouveau TweetaTweet = new Tweet(    author: "Hugoch"    text: "Hey, Im presenting #Backbonejs at #NWXTech5 conference.") aTweet.save()  POST /api/tweetsaTweet.save(    author: "Chuck Norris" PUT /api/tweets/42) aTweet.destroy() DELETE /api/tweets/42
  26. 26. LES COLLECTIONS [# Création dune collection de tweets     {Tweets = Backbone.Collection.extend         "id": 544102,    model: Tweet         "author": "N_W_X",    url: "/api/tweets"         "text": "Conférence #nwxtech5 du 24   janvier, avec @GrieuL @nautilebl# Instanciation de la collection eu @romainlouvet @zigazou @hugocsomeTweets = new Tweets() h et @moebius_eye : amiando.com/ nwxtech5"# Récupération des Tweets sur le serveur     },someTweets.fetch()     {         "id": 24454,          "author": "N_W_X",         "text": "Conférence dédiée aux tech nos web #nwxtech5 à Rouen le 24  janvier :  amiando.com/nwxtech5"     } ]
  27. 27. LES VUES• Une vue = un élément du DOM # Création dune vue de tweet TweetView = Backbone.View.extend• Une vue représente un modèle     tagName: "li"     className: "tweet"• Possibilité de mettre à jour une     render: ()->         tpl = _.template("""<h2><%-author%></h2>         <p><%-text%></p>""") portion de page         @$el.append(tpl(@model.toJSON()))         return @ # Instanciation de la collection someTweets = new Tweets()   # Affichage des tweets lorsquils sont ajoutés à ma collection someTweets.on("add",(tweet)->     view = new TweetView(         model: tweet     )     $("#tweet-list").append(view.render().el) )
  28. 28. LES ROUTEURS # On crée la classe de routeur• Gèrent la navigation au sein de la TweetApp = Backbone.Router.extend     routes:         "last/:num":    "showLast" web-app avec des URL         "*path":        "home"   transparentes (History API des     showLast: (num)->     # Récupération des nums derniers Tweets sur le serveur navigateurs)         someTweets.fetch(             update: true• Permettent aux utilisateurs de             data:                 limit: num         ) bookmarker des vues de       home: ()-> l’application         someTweets.fetch(             update: true         ) # Instanciation du routeur app = new TweetApp() # Démarrage de lapp Backbone.history.start({pushState: true})
  29. 29. L’APPLICATION<html><head>    <script src="jquery.js"></script>    <script src="underscore.js"></script>    <script src="backbone.js"></script>    <script src="examples.js"></script>    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /></head><body>    <div id="container">        <h1>Ecrire un tweet</h1>        <div class="form-row">            <label for="new-tweet">Votre message</label>        </div>        <div class="form-row">            <textarea id="new-tweet"></textarea>        </div>        <div class="form-row right">            <button id="send-tweet">Envoyer</button>        </div>         <h1>Derniers tweets</h1>            <ul id="tweet-list">            </ul> Insertion des vues de tweets    </div></body></html>
  30. 30. L’APPLICATION # On écoute le clic sur le bouton de création de tweet# Création de la classe dun Tweet $(()->Tweet = Backbone.Model.extend     $("#send-tweet").click(()->    urlRoot: "/api/tweets"         tweet = new Tweet()    validate: (attributes)->         if tweet.save(        if attributes.author == "" then return "Invalid author"             author: $("#author").val()        if attributes.text == "" or attributes.text.length > 14             text: $("#new-tweet").val()0 then return "Invalid tweet"         )               someTweets.add(tweet)# Création dune collection de tweets             $("#new-tweet").val("").focus()Tweets = Backbone.Collection.extend     )    model: Tweet )    url: "/api/tweets"    # On crée la classe de routeur# Instanciation de la collection TweetApp = Backbone.Router.extendsomeTweets = new Tweets()     routes:          "last/:num":    "showLast"# Affichage des tweets lorsquils sont ajoutés à ma collection         "*path":        "home"someTweets.on("add",(tweet)->      view = new TweetView(     showLast: (num)->        model: tweet         # Récupération des Tweets sur le serveur    )         someTweets.fetch(    $("#tweet-list").prepend(view.render().el)             update: true)             data:                  limit: num# Création dune vue de tweet         )TweetView = Backbone.View.extend      tagName: "li"     home: ()->    className: "tweet"         someTweets.fetch(    render: ()->             update: true        tpl = _.template("""<h2><%-author%></h2>         )        <p><%-text%></p>""")        @$el.append(tpl(@model.toJSON())) # Instanciation du routeur        return @ app = new TweetApp()  # Démarrage de lapp Backbone.history.start({pushState: true})
  31. 31. EXEMPLEnwxtech.herokuapp.com
  32. 32. CONVAINCU ?• 117 lignes de code (serveur + javascript)• Temps réel• 1 chargement des ressources (serveur statique), puis 300 octets par tweet• Plugins : Backbone.Relational, LocalStorageUtilisé par :
  33. 33. SIGINTPlus d’infos • Backbone.js ➔ backbonejs.org • GitHub ➔ github.com/documentcloud/backbone • Exemple ➔ github.com/Plixee/backbone-nwx-exampleContact hugo@plixee.com @hugoch www.plixee.com

×