Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Templating en JavaScript

Vous avez encore des concaténations de chaines partout dans votre code Javascript dès que vous insérez un élément dans le DOM ?

Découvrez rapidement comment mieux gérer tout ça et faciliter la maintenance du code avec une présentation rapide de frameworks de Mathieu Parisot vous permettant de mettre en place facilement du templating dans vos sites webs.

  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

Templating en JavaScript

  1. 1. Mathieu PARISOT – Développeur Java @matparisot +Parisot Mathieu2012-12-12 Templating JavaScript 1
  2. 2. Pourquoi ce talk ?test.js : test.json :$.ajax({ { url: test.json, name : world success: function(data) { } var html = hello + data.name; $(#myElem).html(html);}}):2012-12-12 Templating JavaScript 2
  3. 3. Dans la vraie vie{ { users: [ lastname:Dupont, { firstname:Jean, lastname:Parisot, address:{ firstname:Mathieu, street:4 rue machin, address:{ zipcode:75000, street:4 rue secrète, city:Paris zipcode:75000, } city:Paris }, } … }, ]}2012-12-12 Templating JavaScript 3
  4. 4. Et donc on obtient…var html = ;for(var i=0;i<data.users.length;i++) { var user = data.users[i]; html += <div>Hello <span>; html += user.lastname + + user.firstname; html += </span></div>; if(user.address) { html + <div>You live in :; html += <div> + user.address.street + </div>; html += <div> + user.address.zipcode + + user.address.city + </div>; html + </div>; }}$(#myElem).insert(html);2012-12-12 Templating JavaScript 4
  5. 5. Un beau jour… Good news everyone ! Le JSON a changé !2012-12-12 Templating JavaScript 5
  6. 6. En voyant le JavaScript2012-12-12 Templating JavaScript 6
  7. 7. 5 minutes plus tard !2012-12-12 Templating JavaScript 7
  8. 8. Une recherche simpose !2012-12-12 Templating JavaScript 8
  9. 9. Stackoverflow var html = []; for(var i=0; i < data.users.length; i++) { var user = data.users[i]; html.push(<div>); html.push(Hello ); html.push(<span>); html.push(user.lastname); html.push( ); html.push(user.firstname); html.push(</span>); html.push(</div>); } $(#myElem).insert(html.join());2012-12-12 Templating JavaScript 9
  10. 10. Pas convaincu ? Moi non plus..2012-12-12 Templating JavaScript 10
  11. 11. Et si on passait au templating ?{{#each users}} <div> Hello <span>{{lastname}} {{firstname}}</span> </div> {{#if address}} <div>You live in : <div>{{street}}</div><div>{{zipcode}} {{city}}</div> </div> {{/if}}{{/each}}2012-12-12 Templating JavaScript 11
  12. 12. Quen pense notre développeur ? Plus maintenable Japprouve ! Plus simple Début de MVC2012-12-12 Templating JavaScript 12
  13. 13. 2012-12-12 Templating JavaScript 13
  14. 14. Directement dans le JavaScriptvar myTemplate = Hello {{name}};…var result = applyTemplate(myTemplate, data);$(#myElem).html(result); Simple Pas maintenable Pas réutilisable2012-12-12 Templating JavaScript 14
  15. 15. Directement dans le html<script type="text/template" id="tpl"> Hello {{name}}</script>var result = applyTemplate($(#tpl).text(), data);$(#myElem).html(result); Simple Pas réutilisable Maintenable2012-12-12 Templating JavaScript 15
  16. 16. Directement un fichier séparé$.get(template.html, function(template){ var result = applyTemplate(template, data); $(#myElem).html(result);}); Maintenable Requête en plus Réutilisable Asynchrone2012-12-12 Templating JavaScript 16
  17. 17. 2012-12-12 Templating JavaScript 17
  18. 18. Mustache.js http://mustache.github.com/ Multi-langage Lent Très répandu Syntaxe Bien documenté2012-12-12 Templating JavaScript 18
  19. 19. La syntaxe{{#users}} <div> Hello <span>{{lastname}} {{firstname}}</span> </div> {{#address}} <div>You live in : <div>{{street}}</div><div>{{zipcode}} {{city}}</div> </div> {{/address}}{{/users}}2012-12-12 Templating JavaScript 19
  20. 20. handlebars.js http://handlebarsjs.com/ Syntaxe Assez répandu Très bien documenté Compatible Mustache2012-12-12 Templating JavaScript 20
  21. 21. La syntaxe{{#each users}} <div> Hello <span>{{lastname}} {{firstname}}</span> </div> {{#if address}} <div>You live in : <div>{{street}}</div><div>{{zipcode}} {{city}}</div> </div> {{/if}}{{/each}}2012-12-12 Templating JavaScript 21
  22. 22. doT.js http://olado.github.com/doT/ Syntaxe Minimaliste Simple Peu répandu Concis et léger Rapide2012-12-12 Templating JavaScript 22
  23. 23. La syntaxe{{~ it.users}} <div> Hello <span>{{= lastname}} {{= firstname}}</span> </div> {{? address}} <div>You live in : <div>{{=street}}</div><div>{{=zipcode}} {{=city}}</div> </div> {{?}}{{~}}2012-12-12 Templating JavaScript 23
  24. 24. Mais aussi… http://underscorejs.org/ http://code.google.com/p/kite/ https://github.com/aefxx/jQote2 Et plein dautres…2012-12-12 Templating JavaScript 24
  25. 25. En conclusionLe templating cest bon mangez-en ! 2012-12-12 Templating JavaScript 25
  26. 26. Des questions ?2012-12-12 Templating JavaScript 26

×