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

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é

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

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

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

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

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

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

templating javascript

passait au templating

hello world

objets complexes hello

paris zipcode

ihello html

obtientvar html

directement dans

Technology

vitesse 201 calibration

php templating systems

lumière naturelle et artifices de lumière. l'approche de

meet magento 2011-templating

exercices mvt vitesse

poster templating efort

vitesse liberation

11pyscoag1 page 2/8 - jallu.fr 2011.pdf · exercice 1 : le...

guide util. avs constructo 1.0 hrv et erv, …...blinking...

workshop 8: templating: handlebars, dustjs

agenda - cours, examens · or n= c/v donc dépend de la...

cinema lumière - la piccola orchestra lumière

mini programme vitesse lumière 13e Édition

lumière fil conducteur_ms_manaus_with_comments_in_english

templating en javascript

twig templating

countertop laser templating and measuring

présentation powerpoint...lumière bleue lumière bleue...

vitesse turkey

[t3con12ca] typo3 phoenix templating workshop