Nous, c'est qui ?

opi

Développeur & Themeur Drupal
freelance & NVOS

• d.o. #263678
• @opidentica
• github.com/opi
• olivierpierre.net

Julien D

Développeur & Themeur Drupal
Commerce Guys

• d.o. #519520
• @juliendubreuil
• github.com/JulienD
• juliendubreuil.fr/

Twig, c'est quoi ?

Moteur de template PHP

Par Fabien Potencier, créateur de Symfony

Twig, c'est quoi ?

Un peu d'histoire

A la base Twig était un moteur de template ecrit en python "Jinja2 " par Armin Ronacher.

Repris par Fabien Potencier en 2009 pour accomplir son plan de domination du monde.

Twig, c'est quoi ?

Comment ca marche ?

Twig, c'est quoi ?

Les avantages

• Extensible
• Sécurisé: No PHP !
• Orienté objet
• Syntax facile
• Supporté par les IDEs:
• Populaire: Zend, CodeIgniter, CakePHP
• Bien documenté

twig.sensiolabs.org/doc/documentation

Twig, c'est quoi ?

Les incovénients

• Nouveau langage à apprendre

Twig, c'est quoi ?

La syntaxe

Le caractère important est l'accolade

{ }

Twig, c'est quoi ?

Les commentaires

              {# Ici un commentaire #}
            

A utiliser pour les descriptions et commentaires.

Twig, c'est quoi ?

Affichage de variable

              
{{ title }}
            

Équivalent php template:

              
<?php print $title; ?>
            

Twig, c'est quoi ?

Plongée dans les variables

              {{ node.field_description }}
            

              <div {{item.attributes}} > {{ item.data }} </div>
            

Peu importe la source (array ou object)

Twig, c'est quoi ?

Concaténations de variables

              {{ "Rédigé par " ~ node.author ~ "." }}
            

Twig, c'est quoi ?

Les filtres

              
{{ title|capitalize }}
            

Les filtres sont chainables

              
{{ title|uppercase|nl2br }}
            

first, last, lower, upper, join, sort, raw, escape, ...

twig.sensiolabs.org/doc/filters

Twig, c'est quoi ?

Les fonctions

              {{ node.created|date("d/m/Y") }}
            

cycle(), range(), include(), parent(), random(), ...

twig.sensiolabs.org/doc/functions

Twig, c'est quoi ?

Structures de controle

if-else condition :

{% if ... %}
{% else %}
{% endif %}
            

boucle for :

{% for i in 0..10 %}
  {{ i }}
{% endfor %}
            

For avec condition :

{% for user in users if user.active %}
  {{ user.name|e }}
{% endfor %}
            

twig.sensiolabs.org/doc/tags

C'est pas génial ?

Twig, c'est quoi ?

Inclure un template dans un template
("templatception")

{% block body %}
  
Recent Articles
  {% include 'articles.html' %}
{% endblock %}
            

Inclusion de template via la balise {% include %}

twig.sensiolabs.org/doc/templates.html#including-other-templates

Twig, c'est quoi ?

Eténdre et surcharger un template

base.html

  {# base.html #}
  {% block head %}
    
  {% endblock %}

            

index.html

{% extends "base.html" %}

{% block title %}Index{% endblock %}
{% block head %}
    {{ parent() }}
    
{% endblock %}

            

twig.sensiolabs.org/doc/templates.html#template-inheritance

Twig, c'est quoi ?

Extensions

Permet d'ajouter ses propres tag, filtres & fonctions

<?php
$filter = new Twig_SimpleFilter('spip2drupal', function ($string) {
    return str_replace('spip', 'drupal', $string);
});
            

              {{ node.body|spip2drupal }}
            

twig.sensiolabs.org/doc/extensions/index.html

Awesome ++

Drupal, pourquoi on en est
arrivé là ?

Drupal & Twig

Pourquoi ?

Plusieurs raisons ont menées à la frustration des themeurs

Drupal & Twig

#1 Mixed data type

Drupal, rien de normé dans la manipulation de variables

$classes

$node->nid

$page['content']

Drupal & Twig

#2 Methodes d'affichage

Drupal, plusieurs solutions pour afficher du contenu

print($variables);

print render($variables);

Drupal & Twig

#3 Surcharge du markup

Drupal, différent moyen pour créer du HTML

Fonctions de theme ou templates ?

node.tpl.php

theme_table()

Drupal & Twig

#4 Manque de sécurité

Drupal, tout est accessible tel quel et rien n'est filtré par défaut. Pas de sanitization.

Drupal & Twig

#5 Drupal spécific

Drupal, son propre système de théming, ses fonctions maisons, ses lois, ses règles.

Drupal & Twig,
c'est bon ?

Est-ce qu'un moteur de template peut aider les themeurs ?

Drupal & Twig

#1 Mixed data type

Drupal 7 : Rien de normé

$classes - $node->nid - $page['content']

Twig : Tout est normé !

{{ classes } - {{ node.nid }} - {{ page.content }}

Drupal & Twig

#2 Methodes d'affichage

Drupal 7 :

print($variables);

print render($variables);

Twig :

{{ variables }}

Drupal & Twig

#3 Surcharge du markup

Drupal 7 : Fonctions de theme ou templates ?

Twig : Tout devient un template .html.twig

              node.tpl.php >> node.html.twig
            

              theme_table() >> tables.html.twig
            

Drupal & Twig

#4 Manque de sécurité

Drupal 7 : Filtrage de l'affichage des variables

Twig : Filtrage automatique par défaut

              {{ variable|raw }}
              

Drupal & Twig

#4.2 Manque de sécurité

Twig : La plupart des fonctions PHP ne peuvent pas être exécutée depuis un template.

Fini les requetes SQL dans les templates ! #Idiot proof

Drupal & Twig

#5 Drupal spécific

Drupal : Système maison.

Twig : Un outil utilisé et réutilisable sur des projets non Drupal.
Similaire aux autres moteurs de templates.
Ressemble plus à du HTML qu'à du PHP.

Est-ce que Twig va aider les themeurs ?

OUI !

Lisible - Moins de code
Sécurisé - Systeme unifié - Idiot proof
Réutilisable - Simple
Facile - Extensible
Nouvelle syntaxe à apprendre

Drupal & Twig

L'initiative Twig

• Fev/Mar 12 - Discussion d'une alternative
  drupal.org/node/1441320


• Avril 12 - Code sprint


• Juin 12 - Twig est intégré à Drupal 8
  http://fabianx.drupalgardens.com/blog/twig-core-there-lots-do-left

Drupal extends Twig

Twig est extensible, alors Drupal en profite !!

Drupal & Twig

Filtre t

Remplace t()

{{ "Read more" | t }}
            

{% set time = node.created | date("d/m/Y") %}
{{ "Published on @time" | t({'@time' : time}) }}
            

Drupal & Twig

Fonctions

hide() / show()

Fonctionnement identique à Drupal 7

Drupal & Twig

Debug

Dans les fichiers de templates .html.twig

              <pre>{{ dump() }}</pre>
            

Équivalent de var_dump(get_defined_vars());

Drupal & Twig

Debug

Dans settings.php

              $settings['twig_debug'] = TRUE;
            

Source avec commentaires détaillés (= devel_themer)

...
            

Drupal & Twig

Debug

Dans settings.php

Recompilation des templates à chaque changements

              $settings['twig_auto_reload'] = TRUE;
            

Désactivation du cache des templates Twig

              $settings['twig_cache'] = FALSE;
            

Les exemples,
c'est quand ?

Exemples

Ancien block.tpl.php

<div id="<?php print $block_html_id; ?>"
  class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <?php print render($title_prefix); ?>
  <?php if ($block->subject): ?>
    <h2<?php print $title_attributes; ?>>
      <?php print $block->subject ?>
    </h2>
  <?php endif;?>
  <?php print render($title_suffix); ?>
  <div class="content"<?php print $content_attributes; ?>>
    <?php print $content ?>
  </div>
</div>
            

Exemples

Nouveau block.html.twig

<div{{ attributes }}>
  {{ title_prefix }}
  {% if label %}
    <h2{{ title_attributes }}>{{ label }}</h2>
  {% endif %}
  {{ title_suffix }}
  <div{{ content_attributes }}>
    {{ content }}
  </div>
</div>
            

Exemples

Ancien theme_breadcrumb()

function theme_breadcrumb($variables) {
  $breadcrumb = $variables['breadcrumb'];

  if (!empty($breadcrumb)) {
    // Provide a navigational heading to give context for breadcrumb links to
    // screen-reader users. Make the heading invisible with .element-invisible.
    $output = '
' . t('You are here') . '
';

    $output .= '
' . implode(' » ', $breadcrumb) . '
';
    return $output;
  }
}
            

Exemples

Nouveau breadcrumb.html.twig

{% if breadcrumb %}
  <nav class="breadcrumb" role="navigation">
    <h2 class="element-invisible">{{ 'You are here'|t }}</h2>
    <ol>
    {% for item in breadcrumb %}
      <li>{{ item }}</li>
    {% endfor %}
    </ol>
  </nav>
{% endif %}
            

#1939066 (RTBC)

En savoir plus ? Participer ?

Toutes les infos sur l'initiative ici :
https://drupal.org/sandbox/pixelmord/1750250

La TODO list:

IRC: #drupal-twig

Questions ?

{% end %}