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
![Page 1: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/1.jpg)
Templating en JavaScript
2023-04-12 Templating JavaScript 1
Mathieu PARISOT – Développeur Java
@matparisot
+Parisot Mathieu
![Page 2: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/2.jpg)
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);
![Page 3: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/3.jpg)
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' } }, … ]}
![Page 4: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/4.jpg)
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
![Page 5: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/5.jpg)
Un beau jour…
2023-04-12 Templating JavaScript 5
Good news everyone !Le JSON a changé !
![Page 6: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/6.jpg)
En voyant le JavaScript
2023-04-12 Templating JavaScript 6
![Page 7: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/7.jpg)
5 minutes plus tard !
2023-04-12 Templating JavaScript 7
![Page 8: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/8.jpg)
Une recherche s'impose !
2023-04-12 Templating JavaScript 8
![Page 9: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/9.jpg)
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(''));
![Page 10: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/10.jpg)
Pas convaincu ?
2023-04-12 Templating JavaScript 10
Moi non plus..
![Page 11: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/11.jpg)
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}}
![Page 12: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/12.jpg)
Qu'en pense notre développeur ?
2023-04-12 Templating JavaScript 12
Plus maintenable
Plus simple
Début de MVC
J'approuve !
![Page 13: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/13.jpg)
Où mettre ses templates ?
2023-04-12 Templating JavaScript 13
![Page 14: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/14.jpg)
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
![Page 15: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/15.jpg)
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
![Page 16: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/16.jpg)
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
![Page 17: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/17.jpg)
Les librairies
Mustache vs Handlebars vs doT vs the world
2023-04-12 Templating JavaScript 17
![Page 18: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/18.jpg)
Mustache.js
2023-04-12 Templating JavaScript 18
http://mustache.github.com/
Multi-langage
Très répandu
Bien documenté
Lent
Syntaxe
![Page 19: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/19.jpg)
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}}
![Page 20: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/20.jpg)
handlebars.js
2023-04-12 Templating JavaScript 20
http://handlebarsjs.com/
Syntaxe
Assez répandu
Très bien documenté
Compatible Mustache
![Page 21: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/21.jpg)
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}}
![Page 22: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/22.jpg)
doT.js
2023-04-12 Templating JavaScript 22
http://olado.github.com/doT/
Syntaxe
Simple Peu répandu
Minimaliste
Concis et léger
Rapide
![Page 23: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/23.jpg)
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> {{?}}{{~}}
![Page 24: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/24.jpg)
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…
![Page 25: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/25.jpg)
En conclusion
2023-04-12 Templating JavaScript 25
Le templating c'est bon mangez-en !
![Page 26: Templating en JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062303/556a4312d8b42a4a1e8b4bb0/html5/thumbnails/26.jpg)
Merci
Des questions ?
2023-04-12 Templating JavaScript 26