doT.js le templating à la vitesse de la lumière

Mathieu PARISOT – Développeur Java
@matparisot
+Parisot Mathieu
2013-02-28 Templating JavaScript - doT.js 1

Pourquoi ce talk ?
test.js : test.json :
$.ajax({ {
url: 'test.json', name : 'world'
success: function(data) { }
var html = 'hello ' + data.name;
$('#myElem').html(html);
}}):


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' },
} …
}, ]}

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 !


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
J'approuve !
Plus simple
Début de MVC


Directement dans le JavaScript

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

Simple Pas maintenable
Pas réutilisable

Directement dans le html

<script type="text/template" id="tpl">
Hello {{name}}
</script>
var result = applyTemplate($('#tpl').text(), data);

Simple Pas réutilisable
Maintenable

Directement un fichier séparé

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

Maintenable Requête en plus
Réutilisable Asynchrone

Mustache.js
http://mustache.github.com/

Multi-langage Lent

Très répandu Syntaxe

Bien documenté


La syntaxe
{{#users}}
<div>
</div>
{{#address}}
<div>You live in :
</div>
{{/address}}
{{/users}}

handlebars.js
http://handlebarsjs.com/

Syntaxe

Assez répandu

Très bien documenté

Compatible Mustache

La syntaxe
{{#each users}}
<div>
</div>
{{#if address}}
<div>You live in :
</div>
{{/if}}
{{/each}}

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

Simple Minimaliste

Concis et léger Peu répandu

Rapide


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

Un peu de contexte


Léger

530 lignes de code
15ko non minifié

2200 lignes de code
75ko non minifié

120 lignes de code
5.3ko non minifié

Benchmarkons

Création d'une liste de 100 éléments


Rapide


Rapide
doT.js


Rapide
Concaténation


Rapide
Array.join


Rapide
JQuote2


Rapide
Handlebars


Rapide
kite.js


Rapide
Mustache


Rapide
underscore


Rapide sur mobile


Pour vérifier par vous même

http://jsperf.com/test-perf-templating/7


L'intégration

<script type="text/javascript" src="doT.js"></script>


Un exemple simple

var tplCompile = doT.template('<div>{{=it.txt}}</div>');

var result = tplCompile({txt:'hello world'});

<div>hello world</div>


La pré-compilation

function anonymous(it) {
var out = '<div>' + (it.txt) + '</div>';
return out;
}


L'objet it

<div>{{=it.txt}}</div>

var out = '<div>' + (it.txt) + '</div>';
return out;
}

tplCompile({txt:'hello world'});

Objets complexes

<div>
Hello <span>{{= it.name}}</span>
</div>
<div>You live in :
<div>{{=it.address.street}}</div>
<div>{{=it.address.city}}</div>
</div>


Objets complexes
var out = '<div>Hello <span>'
+ (it.name)
+ '</span></div><div>You live in : <div>'
+ (it.address.street)
+ '</div><div>'
+ (it.address.city)
+ '</div></div>';
return out;
}

Conditions

{{? it.address.country == 'france'}}
Cocorico!
{{?? it.address.country != ''}}
{{=it.address.country}}
{{??}}
Pays Inconnu
{{?}}


Conditions
var out = '';
if(it.address.country == 'france') {
out += 'Cocorico!';
} else if(it.address.country != ''){
out += (it.address.country);
} else {
out += 'Pays Inconnu';
}
return out;
}

Itérations

{{~ it.users:user}}
<div>
Hello {{= user.lastname}} {{= user.firstname}}
</div>
{{~}}


Itérations

{{~ it.users:user:index}}
<div>
Hello {{= user.lastname}} {{= user.firstname}}
</div>
{{~}}


Itérations
var out = '';
var arr1 = it.users;
if (arr1) {
var user, i1=-1, l1=arr1.length-1;
while (i1<l1) {
user = arr1[i1+=1];
out += '<div>Hello <span>' + (user.lastname) + ' '
+ (user.firstname) + '</span></div>';
}
}
return out;
}

Encoder le HTML

<div>{{! it.code}}</div>

var out = '<div>'
+ encodeHTML( it.code )
+ '</div>';
return out;
}


Encoder le HTML
function encodeHTML() {
var encodeHTMLRules = {
"&": "&", "<": "<",
">": ">", '"': '"',
"'": ''', "/": '/'
},
matchHTML = /&(?!#?w+;)|<|>|"|'|//g;
return function() {
return this ? this.replace(matchHTML, function(m) {
return encodeHTMLRules[m] || m;
}) : this;
};
}

Appel de fonctions

function formatDate (date) {
return date.getDay() + '/'
+ (date.getMonth()+1) + '/'
+ date.getYear();
}

<div>{{= formatDate(it.creationDate) }}</div>


Appel de fonctions

var out = '<div>'
+ (formatDate(it.creationDate) )
+ '</div>';
return out;
}


Javascript dans les templates

<div>
{{var toto = 'hello';}}
{{toto += item.maValeur;}}
<span>{{=toto}}</span>
</div>


Javascript dans les templates

var out = '<div>';
var toto = 'hello';
toto += it.maValeur;
out += '<span>' + (toto) + '</span></div>';
return out;
}


LogicLess vs LogicFull
LogicLess LogicFull
⦿ Templates plus ⦿ Plus de liberté
simples ⦿ Plus complexe
⦿ Meilleurs séparation
du code
⦿ Moins de risque de
code brouillon


Fragments

{{##def.snippet:
<div>{{=it.name}}</div>{{#def.joke}}
#}}
{{#def.snippet}}

doT.template(
template,
{ joke : "<div>{{=it.name}} who?</div>" }
);

Fragments

var out = '<div>' + (it.name) + '</div><div>'
+ (it.name) + ' who?</div>';
return out;
}


La configuration

templateSettings: { varname: 'it',
evaluate: [regexp], strip: true,
interpolate: [regexp] append: true,
encode: [regexp], selfcontained: false
use: [regexp], }
useParams: [regexp],
define: [regexp],
defineParams: [regexp],
conditional: [regexp],
iterate: [regexp],


Pour allez plus loin

⦿ http://olado.github.com/doT/index.html
⦿ https://github.com/olado/doT
⦿ Blog So@t : http://goo.gl/COclS


En conclusion

Le templating c'est bon mangez-en !


Bien choisir son vaisseau


Des questions ?


doT.js le templating à la vitesse de la lumière

Recommended

Recommended

More Related Content

More from SOAT

More from SOAT (20)

doT.js le templating à la vitesse de la lumière