Mathieu PARISOT – Développeur Java                         @matparisot                       +Parisot Mathieu2012-12-12   ...
Pourquoi ce talk ?test.js :                                         test.json :$.ajax({                                   ...
Dans la vraie vie{                                                 {    users: [                                     lastn...
Et donc on obtient…var html = ;for(var i=0;i<data.users.length;i++) {  var user = data.users[i];  html += <div>Hello <span...
Un beau jour… Good news everyone !  Le JSON a changé !2012-12-12              Templating JavaScript   5
En voyant le JavaScript2012-12-12               Templating JavaScript   6
5 minutes plus tard !2012-12-12               Templating JavaScript   7
Une recherche simpose !2012-12-12              Templating JavaScript   8
Stackoverflow                 var html = [];                 for(var i=0; i < data.users.length; i++) {                   ...
Pas convaincu ?             Moi non              plus..2012-12-12               Templating JavaScript   10
Et si on passait au templating ?{{#each users}} <div>   Hello <span>{{lastname}} {{firstname}}</span> </div> {{#if address...
Quen pense notre développeur ?         Plus maintenable                                                Japprouve !        ...
2012-12-12   Templating JavaScript   13
Directement dans le JavaScriptvar myTemplate = Hello {{name}};…var result = applyTemplate(myTemplate, data);$(#myElem).htm...
Directement dans le html<script type="text/template" id="tpl"> Hello {{name}}</script>var result = applyTemplate($(#tpl).t...
Directement un fichier séparé$.get(template.html, function(template){ var result = applyTemplate(template, data); $(#myEle...
2012-12-12   Templating JavaScript   17
Mustache.js                http://mustache.github.com/             Multi-langage                      Lent             Trè...
La syntaxe{{#users}} <div>   Hello <span>{{lastname}} {{firstname}}</span> </div> {{#address}} <div>You live in :   <div>{...
handlebars.js                 http://handlebarsjs.com/             Syntaxe             Assez répandu             Très bien...
La syntaxe{{#each users}} <div>   Hello <span>{{lastname}} {{firstname}}</span> </div> {{#if address}} <div>You live in : ...
doT.js                http://olado.github.com/doT/             Syntaxe                             Minimaliste            ...
La syntaxe{{~ it.users}} <div>  Hello <span>{{= lastname}} {{= firstname}}</span> </div> {{? address}} <div>You live in : ...
Mais aussi…                          http://underscorejs.org/                          http://code.google.com/p/kite/     ...
En conclusionLe templating cest bon mangez-en ! 2012-12-12              Templating JavaScript   25
Des questions ?2012-12-12       Templating JavaScript   26
Upcoming SlideShare
Loading in …5
×

Templating en JavaScript

1,470 views
1,381 views

Published on

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.

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

  • Be the first to like this

No Downloads
Views
Total views
1,470
On SlideShare
0
From Embeds
0
Number of Embeds
281
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×