Download - Templating en JavaScript

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) {

}}):


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);


Un beau jour…


Good news everyone !Le JSON a changé !

En voyant le JavaScript


5 minutes plus tard !


Une recherche s'impose !



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 ?


Moi non plus..

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}}

Qu'en pense notre développeur ?


Plus maintenable

Plus simple

Début de MVC

J'approuve !

Où mettre ses templates ?


Directement dans le JavaScript

var myTemplate = 'Hello {{name}}';…var result = applyTemplate(myTemplate, data);$('#myElem').html(result);


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);


Simple Pas réutilisable

Maintenable

Directement un fichier séparé

$.get('template.html', function(template){ var result = applyTemplate(template, data); $('#myElem').html(result);});


Réutilisable

Maintenable Requête en plus

Asynchrone

Les librairies

Mustache vs Handlebars vs doT vs the world


Mustache.js


http://mustache.github.com/

Multi-langage

Très répandu

Bien documenté

Lent

Syntaxe

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}}

handlebars.js


http://handlebarsjs.com/

Syntaxe

Assez répandu

Très bien documenté

Compatible Mustache

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}}

doT.js


http://olado.github.com/doT/

Syntaxe

Simple Peu répandu

Minimaliste

Concis et léger

Rapide

La syntaxe


{{~ it.users}} <div> Hello <span>{{= lastname}} {{= firstname}}</span> </div> {{? address}} <div>You live in : <div>{{=street}}</div><div>{{=zipcode}} {{=city}}</div> </div> {{?}}{{~}}

Mais aussi…


http://code.google.com/p/kite/

http://underscorejs.org/

https://github.com/aefxx/jQote2

Et plein d'autres…

En conclusion


Le templating c'est bon mangez-en !

Merci

Des questions ?


Download - Templating en JavaScript

Top Related