Templating

Conception de documents et d'interfaces numériques

Quel problème on cherche à résoudre ?

Duplication de code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Accueil</title>
  </head>
  
  <body>
    <header>...</header>
    <main>
      <h1>
        Accueil
      </h1>
    </main>
    <footer>...</footer>
  </body>
</html>
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Produits</title>
  </head>
  
  <body>
    <header>...</header>
    <main>
      <h1>
        Produits
      </h1>
    </main>
    <footer>...</footer>
  </body>
</html>
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Contact</title>
  </head>
  
  <body>
    <header>...</header>
    <main>
      <h1>
        Contact
      </h1>
    </main>
    <footer>...</footer>
  </body>
</html>

Duplication de code

<body>
  <ul>
    <li>
      <img src="images/1.jpg" />
      <p>
        Element 1
      </p>
    </li>
    <li>
      <img src="images/2.jpg" />
      <p>
        Element 2
      </p>
    </li>
    <li>
      <img src="images/3.jpg" />
      <p>
        Element 3
      </p>
    </li>
  </ul>
</body>
<body>
  <ul>
    <li>
      <img src="images/4.jpg" />
      <p>
        Element 4
      </p>
    </li>
    <li>
      <img src="images/5.jpg" />
      <p>
        Element 5
      </p>
    </li>
    <li>
      <img src="images/6.jpg" />
      <p>
        Element 6
      </p>
    </li>
  </ul>
</body>

Le principe DRY

Don't Repeat Yourself

Dans un système, toute connaissance doit avoir une représentation unique, non-ambiguë, faisant autorité

The Pragmatic Programmer

Quelle(s) solution(s) pour ne pas répéter du code HTML ?

Header

 

Block contenu principal

 

Footer

Bienvenue sur mon super site !

+

Header

Footer

Bienvenue sur mon super site !

=

L'héritage de template

inclusion élément externe

inclusion élément externe

inclusion élément externe

inclusion élément externe

<div>
  <img
    src="..."
    alt="..."
  />

  <p>texte</p>
</div>

Découpage de l'interface en composants réutilisables

Malheureusement, aucune de ces deux choses n'est faisable en HTML. Il va nous falloir autre chose...

Le langage Pug

  • Langage qui compile vers du HTML
  • Permet de définir des templates avec des blocs surchargeables par héritage
  • Permet de définir des mixins : morceaux de code réutilisables

Pug

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Accueil</title>
  </head>
  
  <body>
    <header>
      <p>
        Mon site perso
      </p>
      <nav>
        <ul>
          <li><a href="index.html">Accueil</a></li>
          <li><a href="posts.html">Articles</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>
        Accueil
      </h1>
      <p>
        Bienvenue sur mon site perso, où je publie des articles sur mes sujets favoris
      </p>
    </main>
    <footer>With ❤️ by drazik</footer>
  </body>
</html>
doctype html
html(lang="fr")
  head
    meta(charset="utf-8")
    title Accueil
    
  body
    header
      p Mon site perso
      nav
        ul
          li
            a(href="index.html") Accueil
          li
            a(href="posts.html") Articles
            
    main
      h1 Accueil
      p
        | Bienvenue sur mon site perso, où je
        | publie des articles sur mes sujets favoris
        
    footer
      | With ❤️ by drazik

Héritage de templates

doctype html
html(lang="fr")
  head
    meta(charset="utf-8")
    title
      block title
    
  body
    header
      p Mon site perso
      nav
        ul
          li
            a(href="index.pug") Accueil
          li
            a(href="posts.pug") Articles
            
    main
      block content
        
    footer
      | With ❤️ by drazik
extends base.pug

block title
  | Accueil

block content
  h1 Accueil
  p
    | Bienvenue sur mon site perso, où je publie
    | des articles sur mes sujets favoris.

Héritage de template

base.pug

index.pug

Composants (mixins)

extends base.pug

block title
  | Accueil

block content
  h1 Accueil
  p
    | Bienvenue sur mon site perso, où je publie
    | des articles sur mes sujets favoris.
    
  h2 Mes derniers articles
  ul
    li
      img(src="images/tennis.jpg" alt="")
      a(href="posts/tennis.pug") Le tennis, mon sport
    li
      img(src="images/piano.jpg" alt="")
      a(href="posts/piano.pug") J'aime jouer du piano
    li
      img(src="images/dev.jpg" alt="")
      a(href="posts/dev.pug") Je suis développeur
extends base.pug

block title
  | Articles

block content
  h1 Tous mes articles
  
  ul
    li
      img(src="images/tennis.jpg" alt="")
      a(href="posts/tennis.pug") Le tennis, mon sport
    li
      img(src="images/piano.jpg" alt="")
      a(href="posts/piano.pug") J'aime jouer du piano
    li
      img(src="images/dev.jpg" alt="")
      a(href="posts/dev.pug") Je suis développeur
    li
      img(src="images/cours-iut.jpg" alt="")
      a(href="posts/cours-iut.pug") Je donne des cours à l'IUT

index.pug

articles.pug

extends base.pug

include post-preview.pug

block title
  Accueil

block content
  h1 Accueil
  p
    | Bienvenue sur mon site perso, où je publie
    | des articles sur mes sujets favoris.
    
  h2 Mes derniers articles
  ul
    li
      +PostPreview("images/tennis.jpg", "Le tennis, mon sport", "posts/tennis.pug")
    li
      +PostPreview("images/piano.jpg", "J'aime jouer du piano", "posts/piano.pug")
    li
      +PostPreview("images/dev.jpg", "Je suis développeur", "posts/dev.pug")
extends base.pug

include post-preview.pug

block title
  Articles

block content
  h1 Tous mes articles
  
  ul
    li
      +PostPreview("images/tennis.jpg", "Le tennis, mon sport", "posts/tennis.pug")
    li
      +PostPreview("images/piano.jpg", "J'aime jouer du piano", "posts/piano.pug")
    li
      +PostPreview("images/dev.jpg", "Je suis développeur", "posts/dev.pug")
    li
      +PostPreview("images/cours-iut.jpg", "Je donne des cours à l'IUT", "posts/cours-iut.pug")
mixin PostPreview(imageSrc, title, href)
  div
    img(src=imageSrc alt="")
    a(href=href)= title

post-preview.pug

index.pug

articles.pug

Utiliser Pug dans un projet

Parcel bundler

  • Module disponible sur npm
  • Capable de transformer du code Pug en code HTML
  • On le configure simplement sur le point d'entrée de notre site (index), et il découvre tout seul les pages à compiler
  • Autres avantages : serveur de développement avec rechargement automatique entre autres

Liens complémentaires

TD

CDIN - 02 - Templating

By Cyrille Perois

Made with Slides.com

CDIN - 02 - Templating

  • 787

More from Cyrille Perois