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.

1. Mathieu PARISOT – Développeur Java
@matparisot
+Parisot Mathieu
2012-12-12 Templating 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-12 Templating JavaScript 2

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. 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. Un beau jour…
Good news everyone !
Le JSON a changé !
2012-12-12 Templating JavaScript 5

6. En voyant le JavaScript
2012-12-12 Templating JavaScript 6

7. 5 minutes plus tard !
2012-12-12 Templating JavaScript 7

8. Une recherche s'impose !
2012-12-12 Templating JavaScript 8

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. Pas convaincu ?
Moi non
plus..
2012-12-12 Templating JavaScript 10

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. Qu'en pense notre développeur ?
Plus maintenable
J'approuve !
Plus simple
Début de MVC
2012-12-12 Templating JavaScript 12

13. 2012-12-12 Templating JavaScript 13

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. 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. 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. 2012-12-12 Templating JavaScript 17

18. Mustache.js
http://mustache.github.com/
Multi-langage Lent
Très répandu Syntaxe
Bien documenté
2012-12-12 Templating JavaScript 18

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. handlebars.js
http://handlebarsjs.com/
Syntaxe
Assez répandu
Très bien documenté
Compatible Mustache
2012-12-12 Templating JavaScript 20

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. 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. 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. 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. En conclusion
Le templating c'est bon mangez-en !
2012-12-12 Templating JavaScript 25

26. Des questions ?
2012-12-12 Templating JavaScript 26