templating en javascript
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
Templating en JavaScript
2023-04-12 Templating JavaScript 1
Mathieu PARISOT – Développeur Java
@matparisot
+Parisot Mathieu
Pourquoi ce talk ?test.js :$.ajax({ url: 'test.json', success: function(data) {
}}):
2023-04-12 Templating JavaScript 2
test.json :{ name : 'world'}
var html = 'hello ' + data.name;$('#myElem').html(html);
Dans la vraie vie{ users: [ { lastname:'Parisot', firstname:'Mathieu', address:{ street:'4 rue secrète', zipcode:'75000', city:'Paris' } },2023-04-12 Templating JavaScript 3
{ lastname:'Dupont', firstname:'Jean', address:{ street:'4 rue machin', zipcode:'75000', city:'Paris' } }, … ]}
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);
2023-04-12 Templating JavaScript 4
Un beau jour…
2023-04-12 Templating JavaScript 5
Good news everyone !Le JSON a changé !
En voyant le JavaScript
2023-04-12 Templating JavaScript 6
5 minutes plus tard !
2023-04-12 Templating JavaScript 7
Une recherche s'impose !
2023-04-12 Templating JavaScript 8
2023-04-12 Templating JavaScript 9
Stackoverflowvar 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(''));
Pas convaincu ?
2023-04-12 Templating JavaScript 10
Moi non plus..
Et si on passait au templating ?
2023-04-12 Templating JavaScript 11
{{#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}}
Qu'en pense notre développeur ?
2023-04-12 Templating JavaScript 12
Plus maintenable
Plus simple
Début de MVC
J'approuve !
Où mettre ses templates ?
2023-04-12 Templating JavaScript 13
Directement dans le JavaScript
var myTemplate = 'Hello {{name}}';…var result = applyTemplate(myTemplate, data);$('#myElem').html(result);
2023-04-12 Templating JavaScript 14
Simple Pas maintenablePas réutilisable
Directement dans le html
<script type="text/template" id="tpl"> Hello {{name}}</script>var result = applyTemplate($('#tpl').text(), data);$('#myElem').html(result);
2023-04-12 Templating JavaScript 15
Simple Pas réutilisable
Maintenable
Directement un fichier séparé
$.get('template.html', function(template){ var result = applyTemplate(template, data); $('#myElem').html(result);});
2023-04-12 Templating JavaScript 16
Réutilisable
Maintenable Requête en plus
Asynchrone
Les librairies
Mustache vs Handlebars vs doT vs the world
2023-04-12 Templating JavaScript 17
Mustache.js
2023-04-12 Templating JavaScript 18
http://mustache.github.com/
Multi-langage
Très répandu
Bien documenté
Lent
Syntaxe
La syntaxe
2023-04-12 Templating JavaScript 19
{{#users}} <div> Hello <span>{{lastname}} {{firstname}}</span> </div> {{#address}} <div>You live in : <div>{{street}}</div><div>{{zipcode}} {{city}}</div> </div> {{/address}}{{/users}}
handlebars.js
2023-04-12 Templating JavaScript 20
http://handlebarsjs.com/
Syntaxe
Assez répandu
Très bien documenté
Compatible Mustache
La syntaxe
2023-04-12 Templating JavaScript 21
{{#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}}
doT.js
2023-04-12 Templating JavaScript 22
http://olado.github.com/doT/
Syntaxe
Simple Peu répandu
Minimaliste
Concis et léger
Rapide
La syntaxe
2023-04-12 Templating JavaScript 23
{{~ it.users}} <div> Hello <span>{{= lastname}} {{= firstname}}</span> </div> {{? address}} <div>You live in : <div>{{=street}}</div><div>{{=zipcode}} {{=city}}</div> </div> {{?}}{{~}}
Mais aussi…
2023-04-12 Templating JavaScript 24
http://code.google.com/p/kite/
http://underscorejs.org/
https://github.com/aefxx/jQote2
Et plein d'autres…
En conclusion
2023-04-12 Templating JavaScript 25
Le templating c'est bon mangez-en !
Merci
Des questions ?
2023-04-12 Templating JavaScript 26