Mathieu PARISOT – Développeur Java                         @matparisot                       +Parisot Mathieu2013-02-28   ...
Pourquoi ce talk ?test.js :                                                 test.json :$.ajax({                           ...
Dans la vraie vie{                                                    {    users: [                                       ...
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é !2013-02-28             Templating JavaScript - doT.js   5
En voyant le JavaScript2013-02-28              Templating JavaScript - doT.js   6
5 minutes plus tard !2013-02-28              Templating JavaScript - doT.js   7
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 ...
2013-02-28   Templating JavaScript - doT.js   10
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...
2013-02-28   Templating JavaScript - doT.js   14
Mustache.js                http://mustache.github.com/             Multi-langage                           Lent           ...
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 : ...
2013-02-28   Templating JavaScript - doT.js   19
doT.js                http://olado.github.com/doT/             Simple                                   Minimaliste       ...
La syntaxe{{~ it.users:u}} <div>  Hello <span>{{= u.lastname}} {{= u.firstname}}</span> </div> {{? address}} <div>You live...
Un peu de contexte2013-02-28             Templating JavaScript - doT.js   22
Léger                     530 lignes de code                     15ko non minifié                     2200 lignes de code ...
Benchmarkons             Création dune liste de 100 éléments2013-02-28                Templating JavaScript - doT.js   24
Rapide2013-02-28            Templating JavaScript - doT.js   25
Rapide                            doT.js2013-02-28            Templating JavaScript - doT.js   26
Rapide                      Concaténation2013-02-28            Templating JavaScript - doT.js   27
Rapide                            Array.join2013-02-28            Templating JavaScript - doT.js   28
Rapide                            JQuote22013-02-28            Templating JavaScript - doT.js   29
Rapide                        Handlebars2013-02-28            Templating JavaScript - doT.js   30
Rapide                            kite.js2013-02-28            Templating JavaScript - doT.js   31
Rapide                            Mustache2013-02-28            Templating JavaScript - doT.js   32
Rapide                            underscore2013-02-28            Templating JavaScript - doT.js   33
Rapide sur mobile2013-02-28             Templating JavaScript - doT.js   34
Pour vérifier par vous même             http://jsperf.com/test-perf-templating/72013-02-28                   Templating Ja...
Lintégration<script type="text/javascript" src="doT.js"></script>  2013-02-28              Templating JavaScript - doT.js ...
Un exemple simplevar tplCompile = doT.template(<div>{{=it.txt}}</div>);var result = tplCompile({txt:hello world});        ...
La pré-compilation             function anonymous(it) {               var out = <div> + (it.txt) + </div>;               r...
Lobjet it                    <div>{{=it.txt}}</div>             function anonymous(it) {               var out = <div> + (...
Objets complexes<div>  Hello <span>{{= it.name}}</span></div><div>You live in :  <div>{{=it.address.street}}</div>  <div>{...
Objets complexesfunction anonymous(it) {  var out = <div>Hello <span>         + (it.name)         + </span></div><div>You ...
Conditions{{? it.address.country == france}} Cocorico!{{?? it.address.country != }} {{=it.address.country}}{{??}} Pays Inc...
Conditionsfunction anonymous(it) { var out = ; if(it.address.country == france) {      out += Cocorico!;    } else if(it.a...
Itérations{{~ it.users:user}} <div>  Hello {{= user.lastname}} {{= user.firstname}} </div>{{~}}2013-02-28                T...
Itérations{{~ it.users:user:index}} <div>  Hello {{= user.lastname}} {{= user.firstname}} </div>{{~}}2013-02-28           ...
Itérationsfunction anonymous(it) {  var out = ;  var arr1 = it.users;  if (arr1) {    var user, i1=-1, l1=arr1.length-1;  ...
Encoder le HTML                 <div>{{! it.code}}</div>function anonymous(it) {  var out = <div>          + encodeHTML( i...
Encoder le HTMLfunction encodeHTML() {  var encodeHTMLRules = {   "&": "&", "<": "<",   ">": ">", ": ",   "": ', "/": /  }...
Appel de fonctionsfunction formatDate (date) {  return date.getDay() + /       + (date.getMonth()+1) + /       + date.getY...
Appel de fonctionsfunction anonymous(it) {  var out = <div>          + (formatDate(it.creationDate) )          + </div>;  ...
Javascript dans les templates<div> {{var toto = hello;}} {{toto += item.maValeur;}} <span>{{=toto}}</span></div>2013-02-28...
Javascript dans les templatesfunction anonymous(it) {  var out = <div>;  var toto = hello;  toto += it.maValeur;  out += <...
LogicLess vs LogicFull             LogicLess                                    LogicFull⦿ Templates plus       ⦿ Plus de ...
Fragments{{##def.snippet: <div>{{=it.name}}</div>{{#def.joke}}#}}{{#def.snippet}}doT.template(  template,  { joke : "<div>...
Fragmentsfunction anonymous(it) {  var out = <div> + (it.name) + </div><div>          + (it.name) +  who?</div>;  return o...
La configurationtemplateSettings: {                                      varname: it,   evaluate: [regexp],               ...
Pour allez plus loin⦿ http://olado.github.com/doT/index.html⦿ https://github.com/olado/doT⦿ Blog So@t : http://goo.gl/COcl...
En conclusionLe templating cest bon mangez-en ! 2013-02-28             Templating JavaScript - doT.js   58
Bien choisir son vaisseau2013-02-28              Templating JavaScript - doT.js   59
Des questions ?2013-02-28      Templating JavaScript - doT.js   60
Upcoming SlideShare
Loading in...5
×

doT.js le templating à la vitesse de la lumière

1,685

Published on

Et si on passait au templating en javascript ?
Mathieu Parisot vous livre ses recettes avec les meilleurs frameworks disponibles.
Conférence réalisée au ParisJS le 27/02/2013

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

No Downloads
Views
Total Views
1,685
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

doT.js le templating à la vitesse de la lumière

  1. 1. Mathieu PARISOT – Développeur Java @matparisot +Parisot Mathieu2013-02-28 Templating JavaScript - doT.js 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);}}):2013-02-28 Templating JavaScript - doT.js 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 }, } … }, ]}2013-02-28 Templating JavaScript - doT.js 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);2013-02-28 Templating JavaScript - doT.js 4
  5. 5. Un beau jour… Good news everyone ! Le JSON a changé !2013-02-28 Templating JavaScript - doT.js 5
  6. 6. En voyant le JavaScript2013-02-28 Templating JavaScript - doT.js 6
  7. 7. 5 minutes plus tard !2013-02-28 Templating JavaScript - doT.js 7
  8. 8. 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}}2013-02-28 Templating JavaScript - doT.js 8
  9. 9. Quen pense notre développeur ? Plus maintenable Japprouve ! Plus simple Début de MVC2013-02-28 Templating JavaScript - doT.js 9
  10. 10. 2013-02-28 Templating JavaScript - doT.js 10
  11. 11. Directement dans le JavaScriptvar myTemplate = Hello {{name}};…var result = applyTemplate(myTemplate, data);$(#myElem).html(result); Simple Pas maintenable Pas réutilisable2013-02-28 Templating JavaScript - doT.js 11
  12. 12. 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 Maintenable2013-02-28 Templating JavaScript - doT.js 12
  13. 13. 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 Asynchrone2013-02-28 Templating JavaScript - doT.js 13
  14. 14. 2013-02-28 Templating JavaScript - doT.js 14
  15. 15. Mustache.js http://mustache.github.com/ Multi-langage Lent Très répandu Syntaxe Bien documenté2013-02-28 Templating JavaScript - doT.js 15
  16. 16. 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}}2013-02-28 Templating JavaScript - doT.js 16
  17. 17. handlebars.js http://handlebarsjs.com/ Syntaxe Assez répandu Très bien documenté Compatible Mustache2013-02-28 Templating JavaScript - doT.js 17
  18. 18. 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}}2013-02-28 Templating JavaScript - doT.js 18
  19. 19. 2013-02-28 Templating JavaScript - doT.js 19
  20. 20. doT.js http://olado.github.com/doT/ Simple Minimaliste Concis et léger Peu répandu Rapide2013-02-28 Templating JavaScript - doT.js 20
  21. 21. La syntaxe{{~ it.users:u}} <div> Hello <span>{{= u.lastname}} {{= u.firstname}}</span> </div> {{? address}} <div>You live in : <div>{{=street}}</div><div>{{=zipcode}} {{=city}}</div> </div> {{?}}{{~}}2013-02-28 Templating JavaScript - doT.js 21
  22. 22. Un peu de contexte2013-02-28 Templating JavaScript - doT.js 22
  23. 23. Léger 530 lignes de code 15ko non minifié 2200 lignes de code 75ko non minifié 120 lignes de code 5.3ko non minifié2013-02-28 Templating JavaScript - doT.js 23
  24. 24. Benchmarkons Création dune liste de 100 éléments2013-02-28 Templating JavaScript - doT.js 24
  25. 25. Rapide2013-02-28 Templating JavaScript - doT.js 25
  26. 26. Rapide doT.js2013-02-28 Templating JavaScript - doT.js 26
  27. 27. Rapide Concaténation2013-02-28 Templating JavaScript - doT.js 27
  28. 28. Rapide Array.join2013-02-28 Templating JavaScript - doT.js 28
  29. 29. Rapide JQuote22013-02-28 Templating JavaScript - doT.js 29
  30. 30. Rapide Handlebars2013-02-28 Templating JavaScript - doT.js 30
  31. 31. Rapide kite.js2013-02-28 Templating JavaScript - doT.js 31
  32. 32. Rapide Mustache2013-02-28 Templating JavaScript - doT.js 32
  33. 33. Rapide underscore2013-02-28 Templating JavaScript - doT.js 33
  34. 34. Rapide sur mobile2013-02-28 Templating JavaScript - doT.js 34
  35. 35. Pour vérifier par vous même http://jsperf.com/test-perf-templating/72013-02-28 Templating JavaScript - doT.js 35
  36. 36. Lintégration<script type="text/javascript" src="doT.js"></script> 2013-02-28 Templating JavaScript - doT.js 36
  37. 37. Un exemple simplevar tplCompile = doT.template(<div>{{=it.txt}}</div>);var result = tplCompile({txt:hello world}); <div>hello world</div>2013-02-28 Templating JavaScript - doT.js 37
  38. 38. La pré-compilation function anonymous(it) { var out = <div> + (it.txt) + </div>; return out; }2013-02-28 Templating JavaScript - doT.js 38
  39. 39. Lobjet it <div>{{=it.txt}}</div> function anonymous(it) { var out = <div> + (it.txt) + </div>; return out; } tplCompile({txt:hello world});2013-02-28 Templating JavaScript - doT.js 39
  40. 40. Objets complexes<div> Hello <span>{{= it.name}}</span></div><div>You live in : <div>{{=it.address.street}}</div> <div>{{=it.address.city}}</div></div>2013-02-28 Templating JavaScript - doT.js 40
  41. 41. Objets complexesfunction anonymous(it) { var out = <div>Hello <span> + (it.name) + </span></div><div>You live in : <div> + (it.address.street) + </div><div> + (it.address.city) + </div></div>; return out;}2013-02-28 Templating JavaScript - doT.js 41
  42. 42. Conditions{{? it.address.country == france}} Cocorico!{{?? it.address.country != }} {{=it.address.country}}{{??}} Pays Inconnu{{?}}2013-02-28 Templating JavaScript - doT.js 42
  43. 43. Conditionsfunction anonymous(it) { var out = ; if(it.address.country == france) { out += Cocorico!; } else if(it.address.country != ){ out += (it.address.country); } else { out += Pays Inconnu; } return out;}2013-02-28 Templating JavaScript - doT.js 43
  44. 44. Itérations{{~ it.users:user}} <div> Hello {{= user.lastname}} {{= user.firstname}} </div>{{~}}2013-02-28 Templating JavaScript - doT.js 44
  45. 45. Itérations{{~ it.users:user:index}} <div> Hello {{= user.lastname}} {{= user.firstname}} </div>{{~}}2013-02-28 Templating JavaScript - doT.js 45
  46. 46. Itérationsfunction anonymous(it) { var out = ; var arr1 = it.users; if (arr1) { var user, i1=-1, l1=arr1.length-1; while (i1<l1) { user = arr1[i1+=1]; out += <div>Hello <span> + (user.lastname) + + (user.firstname) + </span></div>; } } return out;}2013-02-28 Templating JavaScript - doT.js 46
  47. 47. Encoder le HTML <div>{{! it.code}}</div>function anonymous(it) { var out = <div> + encodeHTML( it.code ) + </div>; return out;}2013-02-28 Templating JavaScript - doT.js 47
  48. 48. Encoder le HTMLfunction encodeHTML() { var encodeHTMLRules = { "&": "&", "<": "<", ">": ">", ": ", "": ', "/": / }, matchHTML = /&(?!#?w+;)|<|>|"||//g; return function() { return this ? this.replace(matchHTML, function(m) { return encodeHTMLRules[m] || m; }) : this; };}2013-02-28 Templating JavaScript - doT.js 48
  49. 49. Appel de fonctionsfunction formatDate (date) { return date.getDay() + / + (date.getMonth()+1) + / + date.getYear();}<div>{{= formatDate(it.creationDate) }}</div>2013-02-28 Templating JavaScript - doT.js 49
  50. 50. Appel de fonctionsfunction anonymous(it) { var out = <div> + (formatDate(it.creationDate) ) + </div>; return out;}2013-02-28 Templating JavaScript - doT.js 50
  51. 51. Javascript dans les templates<div> {{var toto = hello;}} {{toto += item.maValeur;}} <span>{{=toto}}</span></div>2013-02-28 Templating JavaScript - doT.js 51
  52. 52. Javascript dans les templatesfunction anonymous(it) { var out = <div>; var toto = hello; toto += it.maValeur; out += <span> + (toto) + </span></div>; return out;}2013-02-28 Templating JavaScript - doT.js 52
  53. 53. LogicLess vs LogicFull LogicLess LogicFull⦿ Templates plus ⦿ Plus de liberté simples ⦿ Plus complexe⦿ Meilleurs séparation du code⦿ Moins de risque de code brouillon2013-02-28 Templating JavaScript - doT.js 53
  54. 54. Fragments{{##def.snippet: <div>{{=it.name}}</div>{{#def.joke}}#}}{{#def.snippet}}doT.template( template, { joke : "<div>{{=it.name}} who?</div>" });2013-02-28 Templating JavaScript - doT.js 54
  55. 55. Fragmentsfunction anonymous(it) { var out = <div> + (it.name) + </div><div> + (it.name) + who?</div>; return out;}2013-02-28 Templating JavaScript - doT.js 55
  56. 56. La configurationtemplateSettings: { varname: it, evaluate: [regexp], strip: true, interpolate: [regexp] append: true, encode: [regexp], selfcontained: false use: [regexp], } useParams: [regexp], define: [regexp], defineParams: [regexp], conditional: [regexp], iterate: [regexp],2013-02-28 Templating JavaScript - doT.js 56
  57. 57. Pour allez plus loin⦿ http://olado.github.com/doT/index.html⦿ https://github.com/olado/doT⦿ Blog So@t : http://goo.gl/COclS2013-02-28 Templating JavaScript - doT.js 57
  58. 58. En conclusionLe templating cest bon mangez-en ! 2013-02-28 Templating JavaScript - doT.js 58
  59. 59. Bien choisir son vaisseau2013-02-28 Templating JavaScript - doT.js 59
  60. 60. Des questions ?2013-02-28 Templating JavaScript - doT.js 60
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×