Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Templating en JavaScript

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 26 Publicité

Templating en JavaScript

Télécharger pour lire hors ligne

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.

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.

Publicité
Publicité

Plus De Contenu Connexe

Similaire à Templating en JavaScript (20)

Publicité

Plus par SOAT (20)

Plus récents (20)

Publicité

Templating en JavaScript

  1. 1. Mathieu PARISOT – Développeur Java @matparisot +Parisot Mathieu 2012-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 JavaScript 2012-12-12 Templating JavaScript 6
  7. 7. 5 minutes plus tard ! 2012-12-12 Templating JavaScript 7
  8. 8. Une recherche s'impose ! 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. Qu'en pense notre développeur ? Plus maintenable J'approuve ! Plus simple Début de MVC 2012-12-12 Templating JavaScript 12
  13. 13. 2012-12-12 Templating JavaScript 13
  14. 14. Directement dans le JavaScript var myTemplate = 'Hello {{name}}'; … var result = applyTemplate(myTemplate, data); $('#myElem').html(result); Simple Pas maintenable Pas réutilisable 2012-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 Maintenable 2012-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 Asynchrone 2012-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 Mustache 2012-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 Rapide 2012-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 d'autres… 2012-12-12 Templating JavaScript 24
  25. 25. En conclusion Le templating c'est bon mangez-en ! 2012-12-12 Templating JavaScript 25
  26. 26. Des questions ? 2012-12-12 Templating JavaScript 26

×