templating en javascript

Download Templating en JavaScript

Post on 31-May-2015

1.090 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

  • 1. Mathieu PARISOT Dveloppeur Java @matparisot +Parisot Mathieu2012-12-12Templating JavaScript 1

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-12Templating JavaScript2 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 secrte, city:Paris zipcode:75000,} city:Paris}, } }, ]}2012-12-12 Templating JavaScript3 4. Et donc on obtientvar html = ;for(var i=0;iHello ;html += user.lastname + + user.firstname;html += ;if(user.address) {html +

You live in :;html +=
+ user.address.street +
;html +=
+ user.address.zipcode + + user.address.city +
;html +

;}}$(#myElem).insert(html);2012-12-12Templating JavaScript4 5. Un beau jour Good news everyone !Le JSON a chang !2012-12-12Templating JavaScript 5 6. En voyant le JavaScript2012-12-12 Templating JavaScript 6 7. 5 minutes plus tard !2012-12-12 Templating JavaScript 7 8. Une recherche simpose !2012-12-12Templating JavaScript 8 9. Stackoverflow var html = []; for(var i=0; i < data.users.length; i++) { var user = data.users[i]; html.push(

); html.push(Hello ); html.push(); html.push(user.lastname); html.push( ); html.push(user.firstname); html.push(); html.push(

); } $(#myElem).insert(html.join());2012-12-12 Templating JavaScript9 10. Pas convaincu ? Moi nonplus..2012-12-12 Templating JavaScript 10 11. Et si on passait au templating ?{{#each users}}

Hello {{lastname}} {{firstname}}

{{#if address}}

You live in :
{{street}}
{{zipcode}} {{city}}

{{/if}}{{/each}}2012-12-12 Templating JavaScript11 12. Quen pense notre dveloppeur ? Plus maintenableJapprouve ! Plus simple Dbut de MVC2012-12-12Templating JavaScript12 13. 2012-12-12 Templating JavaScript 13 14. Directement dans le JavaScriptvar myTemplate = Hello {{name}};var result = applyTemplate(myTemplate, data);$(#myElem).html(result);SimplePas maintenablePas rutilisable2012-12-12 Templating JavaScript 14 15. Directement dans le htmlvar result = applyTemplate($(#tpl).text(), data);$(#myElem).html(result);Simple Pas rutilisableMaintenable2012-12-12Templating JavaScript 15 16. Directement un fichier spar$.get(template.html, function(template){ var result = applyTemplate(template, data); $(#myElem).html(result);});MaintenableRequte en plus RutilisableAsynchrone2012-12-12 Templating JavaScript 16 17. 2012-12-12 Templating JavaScript 17 18. Mustache.jshttp://mustache.github.com/ Multi-langageLent Trs rpandu Syntaxe Bien document2012-12-12 Templating JavaScript18 19. La syntaxe{{#users}}

Hello {{lastname}} {{firstname}}

{{#address}}

You live in :
{{street}}
{{zipcode}} {{city}}

{{/address}}{{/users}}2012-12-12Templating JavaScript 19 20. handlebars.js http://handlebarsjs.com/ Syntaxe Assez rpandu Trs bien document Compatible Mustache2012-12-12 Templating JavaScript 20 21. La syntaxe{{#each users}}

Hello {{lastname}} {{firstname}}

{{#if address}}

You live in :
{{street}}
{{zipcode}} {{city}}

{{/if}}{{/each}}2012-12-12Templating JavaScript 21 22. doT.jshttp://olado.github.com/doT/ Syntaxe Minimaliste SimplePeu rpandu Concis et lger Rapide2012-12-12 Templating JavaScript 22 23. La syntaxe{{~ it.users}}

Hello {{= lastname}} {{= firstname}}

{{? address}}

You live in :
{{=street}}
{{=zipcode}} {{=city}}

{{?}}{{~}}2012-12-12Templating JavaScript23 24. Mais aussihttp://underscorejs.org/http://code.google.com/p/kite/ https://github.com/aefxx/jQote2Et plein dautres2012-12-12 Templating JavaScript 24 25. En conclusionLe templating cest bon mangez-en ! 2012-12-12Templating JavaScript 25 26. Des questions ?2012-12-12 Templating JavaScript 26