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

doT.js le templating à la

vitesse de la lumière

2023-04-12 Templating JavaScript - doT.js 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 - doT.js 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 !


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/

Simple

Peu répandu

Minimaliste

Concis et léger

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 code15ko non minifié


2200 lignes de code75ko non minifié

120 lignes de code5.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

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

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


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

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

function anonymous(it) { 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; } 2023-04-12 Templating JavaScript - doT.js 41

Conditions


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

Conditionsfunction anonymous(it) {

var out = '';

if(it.address.country == 'france') { out += 'Cocorico!'; } else if(it.address.country != ''){ out += (it.address.country); } else { out += 'Pays Inconnu'; } return out; } 2023-04-12 Templating JavaScript - doT.js 43

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érationsfunction anonymous(it) { 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; } 2023-04-12 Templating JavaScript - doT.js 46

Encoder le HTML

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

function anonymous(it) { var out = '<div>' + encodeHTML( it.code ) + '</div>'; return out; } 2023-04-12 Templating JavaScript - doT.js 47

Encoder le HTMLfunction encodeHTML() { var encodeHTMLRules = { "&": "&", "<": "<", ">": ">", '"': '"', "'": ''', "/": '/' }, matchHTML = /&(?!#?\w+;)|<|>|"|'|\//g; return function() { return this ? this.replace(matchHTML, function(m) { return encodeHTMLRules[m] || m; }) : this; };}2023-04-12 Templating JavaScript - doT.js 48

Appel de fonctions

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

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


Appel de fonctions

function anonymous(it) { 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

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


LogicLess vs LogicFull

⦿Templates plus simples

⦿Meilleurs séparation du code

⦿Moins de risque de code brouillon


⦿Plus de liberté⦿Plus complexe

LogicLess LogicFull

Fragments

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

doT.template( template, { joke : "<div>{{=it.name}} who?</div>" });2023-04-12 Templating JavaScript - doT.js 54

Fragments

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


La configuration

templateSettings: {evaluate: [regexp],interpolate: [regexp]encode: [regexp],use: [regexp],useParams: [regexp],define: [regexp],defineParams: [regexp],conditional: [regexp],iterate: [regexp],


varname: 'it',strip: true,append: true,selfcontained: false

}

Pour allez plus loin

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


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

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

https://github.com/olado/doT

https://github.com/olado/doT

http://goo.gl/COclS

En conclusion


Le templating c'est bon mangez-en !

Bien choisir son vaisseau


Merci

Des questions ?


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

Technology

templating javascript

passait au templating

hello world

objets complexes hello

paris zipcode

ihello html

obtientvar html

directement dans