SlideShare a Scribd company logo
1 of 26
Download to read offline
Mathieu PARISOT – Développeur Java
                         @matparisot
                       +Parisot Mathieu
2012-12-12                Templating JavaScript   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);
}}):




2012-12-12                Templating JavaScript                      2
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'                          },
       }                                         …
     },                                       ]}
2012-12-12                     Templating JavaScript                        3
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);
2012-12-12                          Templating JavaScript                          4
Un beau jour…

 Good news everyone !
  Le JSON a changé !




2012-12-12              Templating JavaScript   5
En voyant le JavaScript




2012-12-12               Templating JavaScript   6
5 minutes plus tard !




2012-12-12               Templating JavaScript   7
Une recherche s'impose !




2012-12-12              Templating JavaScript   8
Stackoverflow
                 var 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(''));

2012-12-12                       Templating JavaScript        9
Pas convaincu ?

             Moi non
              plus..




2012-12-12               Templating JavaScript   10
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}}
2012-12-12               Templating JavaScript            11
Qu'en pense notre développeur ?
         Plus maintenable
                                                J'approuve !
         Plus simple
         Début de MVC




2012-12-12              Templating JavaScript                  12
2012-12-12   Templating JavaScript   13
Directement dans le JavaScript

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



      Simple                            Pas maintenable
                                        Pas réutilisable
2012-12-12               Templating JavaScript             14
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
2012-12-12              Templating JavaScript             15
Directement un fichier séparé

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



      Maintenable                  Requête en plus
     Réutilisable                  Asynchrone
2012-12-12               Templating JavaScript       16
2012-12-12   Templating JavaScript   17
Mustache.js
                http://mustache.github.com/

             Multi-langage                      Lent

             Très répandu                       Syntaxe

             Bien documenté


2012-12-12                   Templating JavaScript        18
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}}
2012-12-12                Templating JavaScript           19
handlebars.js
                 http://handlebarsjs.com/

             Syntaxe

             Assez répandu

             Très bien documenté

             Compatible Mustache
2012-12-12                   Templating JavaScript   20
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}}
2012-12-12                Templating JavaScript           21
doT.js
                http://olado.github.com/doT/

             Syntaxe                             Minimaliste

             Simple                              Peu répandu

             Concis et léger

             Rapide

2012-12-12                     Templating JavaScript           22
La syntaxe
{{~ it.users}}
 <div>
  Hello <span>{{= lastname}} {{= firstname}}</span>
 </div>
 {{? address}}
 <div>You live in :
  <div>{{=street}}</div><div>{{=zipcode}} {{=city}}</div>
 </div>
 {{?}}
{{~}}
2012-12-12                Templating JavaScript      23
Mais aussi…
                          http://underscorejs.org/


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


               https://github.com/aefxx/jQote2


                      Et plein d'autres…

2012-12-12                 Templating JavaScript       24
En conclusion



Le templating c'est bon mangez-en !




 2012-12-12              Templating JavaScript   25
Des questions ?

2012-12-12       Templating JavaScript   26

More Related Content

Viewers also liked

Reprenez le contrôle sur les Google Apps
Reprenez le contrôle sur les Google AppsReprenez le contrôle sur les Google Apps
Reprenez le contrôle sur les Google AppsArnaud Breton
 
Pourquoi rejoindre une SSII ?
Pourquoi rejoindre une SSII ?Pourquoi rejoindre une SSII ?
Pourquoi rejoindre une SSII ?SOAT
 
Tester son idée en quelques heures
Tester son idée en quelques heuresTester son idée en quelques heures
Tester son idée en quelques heuresCamille Roux
 
Les algorithmes génétiques dans tous leurs états
Les algorithmes génétiques dans tous leurs étatsLes algorithmes génétiques dans tous leurs états
Les algorithmes génétiques dans tous leurs étatsGeneticIO
 

Viewers also liked (7)

Devenez freelance
Devenez freelanceDevenez freelance
Devenez freelance
 
Reprenez le contrôle sur les Google Apps
Reprenez le contrôle sur les Google AppsReprenez le contrôle sur les Google Apps
Reprenez le contrôle sur les Google Apps
 
Be a VRP is sexy
Be a VRP is sexy Be a VRP is sexy
Be a VRP is sexy
 
Pourquoi rejoindre une SSII ?
Pourquoi rejoindre une SSII ?Pourquoi rejoindre une SSII ?
Pourquoi rejoindre une SSII ?
 
Tester son idée en quelques heures
Tester son idée en quelques heuresTester son idée en quelques heures
Tester son idée en quelques heures
 
Les algorithmes génétiques dans tous leurs états
Les algorithmes génétiques dans tous leurs étatsLes algorithmes génétiques dans tous leurs états
Les algorithmes génétiques dans tous leurs états
 
Vagrant - Concept
Vagrant - ConceptVagrant - Concept
Vagrant - Concept
 

More from SOAT

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018SOAT
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libéréeSOAT
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !SOAT
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseSOAT
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESSOAT
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-DurandSOAT
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-DurandSOAT
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-DurandSOAT
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido SOAT
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotSOAT
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014SOAT
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014SOAT
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soatSOAT
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...SOAT
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014SOAT
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)SOAT
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#SOAT
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatSOAT
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesSOAT
 

More from SOAT (20)

Back from Microsoft //Build 2018
Back from Microsoft //Build 2018Back from Microsoft //Build 2018
Back from Microsoft //Build 2018
 
L'entreprise libérée
L'entreprise libéréeL'entreprise libérée
L'entreprise libérée
 
Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !Amélioration continue, c'est l'affaire de tous !
Amélioration continue, c'est l'affaire de tous !
 
JAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entrepriseJAVA 8 : Migration et enjeux stratégiques en entreprise
JAVA 8 : Migration et enjeux stratégiques en entreprise
 
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUESARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
ARCHITECTURE MICROSERVICE : TOUR D’HORIZON DU CONCEPT ET BONNES PRATIQUES
 
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
3/3 : The path to CDI 2.0 - Antoine Sabot-Durand
 
1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand1/3 : introduction to CDI - Antoine Sabot-Durand
1/3 : introduction to CDI - Antoine Sabot-Durand
 
2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand2/3 : CDI advanced - Antoine Sabot-Durand
2/3 : CDI advanced - Antoine Sabot-Durand
 
Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido Angular JS - Paterne Gaye-Guingnido
Angular JS - Paterne Gaye-Guingnido
 
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu ParisotDans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
Dans l'enfer du Web Mobile - un retour d'expérience - Mathieu Parisot
 
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
RxJava, Getting Started - David Wursteisen - 16 Octobre 2014
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014Nio sur Netty par Mouhcine Moulou - 3 avril 2014
Nio sur Netty par Mouhcine Moulou - 3 avril 2014
 
20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat20140123 java8 lambdas_jose-paumard-soat
20140123 java8 lambdas_jose-paumard-soat
 
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
Développer des applications iOS et Android avec c# grâce à Xamarin par Cyril ...
 
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014Amazon Web Service par Bertrand Lehurt - 11 mars 2014
Amazon Web Service par Bertrand Lehurt - 11 mars 2014
 
ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)ASP.Net Web API - Léonard Labat (18 février 2014)
ASP.Net Web API - Léonard Labat (18 février 2014)
 
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 Xamarin et le développement natif d’applications Android, iOS et Windows en C# Xamarin et le développement natif d’applications Android, iOS et Windows en C#
Xamarin et le développement natif d’applications Android, iOS et Windows en C#
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
 
MongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de donnéesMongoDB : la base NoSQL qui réinvente la gestion de données
MongoDB : la base NoSQL qui réinvente la gestion de données
 

Templating en JavaScript

  • 1. Mathieu PARISOT – Développeur Java @matparisot +Parisot Mathieu 2012-12-12 Templating JavaScript 1
  • 2. Pourquoi ce talk ? test.js : test.json : $.ajax({ { url: 'test.json', name : 'world' success: function(data) { } var html = 'hello ' + data.name; $('#myElem').html(html); }}): 2012-12-12 Templating JavaScript 2
  • 3. 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' }, } … }, ]} 2012-12-12 Templating JavaScript 3
  • 4. 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); 2012-12-12 Templating JavaScript 4
  • 5. Un beau jour… Good news everyone ! Le JSON a changé ! 2012-12-12 Templating JavaScript 5
  • 6. En voyant le JavaScript 2012-12-12 Templating JavaScript 6
  • 7. 5 minutes plus tard ! 2012-12-12 Templating JavaScript 7
  • 8. Une recherche s'impose ! 2012-12-12 Templating JavaScript 8
  • 9. Stackoverflow var 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('')); 2012-12-12 Templating JavaScript 9
  • 10. Pas convaincu ? Moi non plus.. 2012-12-12 Templating JavaScript 10
  • 11. 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}} 2012-12-12 Templating JavaScript 11
  • 12. Qu'en pense notre développeur ? Plus maintenable J'approuve ! Plus simple Début de MVC 2012-12-12 Templating JavaScript 12
  • 13. 2012-12-12 Templating JavaScript 13
  • 14. Directement dans le JavaScript var myTemplate = 'Hello {{name}}'; … var result = applyTemplate(myTemplate, data); $('#myElem').html(result); Simple Pas maintenable Pas réutilisable 2012-12-12 Templating JavaScript 14
  • 15. 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 2012-12-12 Templating JavaScript 15
  • 16. Directement un fichier séparé $.get('template.html', function(template){ var result = applyTemplate(template, data); $('#myElem').html(result); }); Maintenable Requête en plus Réutilisable Asynchrone 2012-12-12 Templating JavaScript 16
  • 17. 2012-12-12 Templating JavaScript 17
  • 18. Mustache.js http://mustache.github.com/ Multi-langage Lent Très répandu Syntaxe Bien documenté 2012-12-12 Templating JavaScript 18
  • 19. 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}} 2012-12-12 Templating JavaScript 19
  • 20. handlebars.js http://handlebarsjs.com/ Syntaxe Assez répandu Très bien documenté Compatible Mustache 2012-12-12 Templating JavaScript 20
  • 21. 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}} 2012-12-12 Templating JavaScript 21
  • 22. doT.js http://olado.github.com/doT/ Syntaxe Minimaliste Simple Peu répandu Concis et léger Rapide 2012-12-12 Templating JavaScript 22
  • 23. La syntaxe {{~ it.users}} <div> Hello <span>{{= lastname}} {{= firstname}}</span> </div> {{? address}} <div>You live in : <div>{{=street}}</div><div>{{=zipcode}} {{=city}}</div> </div> {{?}} {{~}} 2012-12-12 Templating JavaScript 23
  • 24. Mais aussi… http://underscorejs.org/ http://code.google.com/p/kite/ https://github.com/aefxx/jQote2 Et plein d'autres… 2012-12-12 Templating JavaScript 24
  • 25. En conclusion Le templating c'est bon mangez-en ! 2012-12-12 Templating JavaScript 25
  • 26. Des questions ? 2012-12-12 Templating JavaScript 26