To Twig or not to Twig ? That is Drupal 8

Photo d'une salle de théatre

Avec le remplacement du vénérable PHPTemplate par Twig comme moteur de template pour Drupal 8, la conception des pages et de leurs agencements a pris une nouvelle dimension.

Autant sur Drupal 7 des solutions comme Panels ou Display suite étaient privilégiées, car travailler en profondeur dans des templates mixant deux languages (PHP et HTML), dont le premier est particulièrement verbeux, pouvait très vite devenir illisible et inmaintenable, autant l'arrivée de Twig avec Drupal 8 peut changer radicalement cette perspective.

Twig est en effet un projet indépendant, utilisable sur tout type de technologies, qui dispose de son propre language et qui est très facilement extensible. Et finalement, travailler le theming, dans le sens de l'agencement des différents éléments d'une page,  de votre projet Drupal 8 au niveau de sa couche de thème ne paraît pas être une idée complètement vide de sens.

Quels sont les avantages de chacune des solutions à notre disposition ? Que faut-il privilégier ? Essayons de dégager quelques éléments de réflexion.

Bref aperçu de Twig

Twig présente de nombreuses améliorations comparé à PHPTemplate. Pour n'en citer que quelques unes :

  • Twig dispose d'une syntaxe concise, permettant de manipuler et afficher les variables que ce soit avec des conditions, des boucles, des filtres, etc. rendant la lecture et la maintenance des templates beaucoup plus aisée
  • Twig est un moteur sécurisé, avec une désinfection (auto escape) des chaines rendues activée par défaut, limitant de facto les failles de sécurité potentielles telles que des injections XSS par exemple.
  • Twig est extensible, avec la possibilité d'ajouter autant que de besoin des filtres ou des fonctions pour compléter celles existantes
  • Twig dispose d'une documentation détaillée, aussi bien pour son utilisation au quotidien que pour le développement d'extensions supplémentaires
  • Twig permet de réaliser des inclusions ou des héritages de templates, possibilités qui permettent de multiplier les templates autant que de besoin sans pour autant devoir les dupliquer

Pour résumer, autant travailler avec PHPTemplate pouvait être rébarbatif, autant utiliser Twig relève tout simplement, comment dire..., d'un certain plaisir retrouvé.

Les avantages de Twig

Un éléphant vu de trois-quart

 

L'utilisation de Twig pour la conception de la structure des pages de votre site Drupal 8 va permettre de :

  • disposer d'un contôle total du balisage de vos pages
  • pouvoir réaliser des agencements complexes, avec des variations qui seraient difficilement réalisables depuis le backoffice de Drupal
  • bien distinguer les rôles et responsabilités respectifs dans la conception du site, entre les développeurs backend et frontend
  • de pouvoir déléguer intégralement la conception du thème à une équipe front-end, sans qu'il soit nécessaire qu'elle connaisse les arcanes de Drupal 8.
  • Et aussi, tout simplement, apprécier la puissance de Twig

La création de landing pages complexes peut être réalisée alors soit en utilisant un module tel que Paragraphs ou encore le système natif des blocs de Drupal. Pour y inclure des vues (listes de contenus, etc.), on peut recourir soit aux fonctions de preprocess pour fournir à Twig les différentes vues sous forme de variables, soit utiliser une fonction Twig pour appeler au sein du template même les vues nécessaires.

Par exemple, avec une fonction de preprocess nous pouvons charger une vue des derniers articles et la fournir en tant que variable à Twig.

/**
 * Implements hook_preprocess_HOOK().
 */
function MYMODULE_preprocess_page(&$variables) {
  $variables['page']['view_last_posts'] = views_embed_view('last_posts', 'block_home');
}

Et nous pouvons étendre le template principal pour surcharger uniquement la zone où nous souhaitons rendre cette vue.

{# File page--frontpage.html.twig #}
{% extends "page.html.twig" %}

{% block main %}
  {{ parent() }}
  {% if page.view_last_posts %}
    {{ page.view_last_posts }}
  {%  endif %}
{% endblock %}

Ou encore, tout simplement charger cette vue depuis une fonction créée pour l'occasion.

{# File page--frontpage.html.twig #}
{% extends "page.html.twig" %}

{% block main %}
  {{ parent() }}
  {{ drupal_view('last_posts', 'block_home') }}
{% endblock %}

Avouez que nous ne pouvons pas faire plus lisible, non ? Et maintenable en réduisant à néant la duplication de code ? Nous utilisons dans ce template une des fonctions fournies par le module Twig tweak. Module qui fournit quelques fonctions et filtres, permettant de charger une vue, une entité, un block entre autres directement depuis un template Twig. Et si besoin, écrire une fonction Twig n'est pas non plus très complexe.

Choisir Twig pour la conception et l'agencement de vos pages vous permet donc de contôler très finement le balisage de ses pages, tout en pouvant y inclure des composants spécifiques générés par Drupal. Un autre avantage est de disposer à un endroit unique, vos templates Twig, de l'intégralité du theming de votre site Drupal 8.

En revanche, toute modification structurelle de vos pages nécessite de disposer des compétences adéquates. Modifications qui, si elles doivent être fréquentes, peuvent sans doute être réalisées plus facilement, ou tout du moins par des profils différents, avec une solution comme Panels, Page Manager ou display suite.

Les avantage de Panels, Display suite & Co

Une souris

 

Nous disposons de plusieurs solutions pour contrôler le balisage et l'agencement des pages depuis le backoffice de Drupal. Pour ne citer que les plus connus, nous avons :

  • Panels qui permet de concevoir des pages, et d'y associer des contenus, des blocs, des vues d'une manière très fine, avec des modules qui viennent le compléter (Panelizer par exemple)
  • Display suite qui permet de contôler l'affichage des entités et de leurs champs
  • Et d'autres modules qui peuvent intervenir pour ajouter des classes sur les entités de Drupal, comme Block class

L'utilisation de ces solutions permet donc de :

  • Contrôler l'agencement d'une page (avec Panels) ou des contenus (avec Display suite ou Panels) depuis l'interface d'administration, ainsi que le balisage général dans une certaine mesure
  • Permettre à un webmestre de concevoir de nouvelles pages, ou de modifier celles existantes, de façon relativement aisée par de simples glisser-déposer
  • Insérer en quelques clics des vues ou des blocs de contenu sur les différentes zones des pages.
  • Et aussi, apprécier la puissance de Display suite ou Panels (et oui, également, il faut savoir rendre hommage au travail colossal fourni aussi, sans qui Drupal ne serait pas Drupal)
mise en page avec panels
Un exemple de mise en page avec Panels et In Place Editor

 

Bien entendu, ces agencements seront rendus par le moteur de template Twig, et si par principe toute la configuration est réalisée depuis le backoffice, il n'en reste pas moins que quelques personnalisations des templates seront sans doute nécessaires. Nous aurons donc une gestion de l'agencement et du balisage à la fois depuis le backoffice et depuis les templates Twig.

Dernier point : le fait que désormais toute la configuration de Drupal 8 soit exportable et versionnable rend ces solutions beaucoup plus robustes, comparé à Drupal 7, et elles peuvent être utilisées beaucoup plus sereinement.

L'atout principal de ces solutions réside en l'ergonomie qu'elles apportent au gestionnaire du site, mais aussi au Site Builder, sans oublier toutefois quelques fonctionnalités qui peuvent s'avérer intéressantes, telles qu'utiliser des affichages différents par contenu par exemple, sélectionnables par le rédacteur, out of the box.

En revanche, l'utilisation de ces solutions (Panels par exemple) peuvent amener une couche de complexité non négligeable selon les différentes fonctionnalités du projet et des modules utilisés.

Un expert Drupal 8 pourra vous conseiller sur la meilleure architecture possible selon votre projet.

Je clique ou je code ?

Chacune de ces solutions ont leurs forces et faiblesses respectives. Et malheureusement il n'y a pas de recette magique, aucune de ces solutions ne peut se prétendre être la meilleure dans toutes les situations. No bullshit. Un juste équilibre doit être trouvé selon le projet.

Quand l'utilisation de Panels n'est pas tout simplement un prérequis fonctionnel implicite, le choix de telle ou telle technique peut être réalisé avec un seul credo : restez simple ! Le projet a toutes les chances de se complexifier de lui-même, de part sa propre évolution, et il n'est peut-être pas utile de le complexifier tout de suite, juste pour la beauté du code ou la frénésie du clic.

Si votre projet commence à contenir beaucoup (trop) de templates Twig, il n'est sans doute pas inutile de s'interroger s'ils ne peuvent pas être simplifiés et réduits en déplacant certaines logiques vers la configuration. Et il n'est peut-être pas nécessaire d'installer Panels et de surcharger tout le rendu natif des entités juste pour rendre un contenu sur 2 colonnes.

Et vous ? Vous cliquez ou vous codez ? Dans quelle situation ? Pour ma part, je crois que je vais me laisser tenter et essayer une approche Full Twig (si possible bien sûr) sur un prochain projet.

 

Ajouter un commentaire