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