Drupal 10 (sortie en juin 2023) marque une étape importante dans l'évolution de ce système de gestion de contenu (CMS), avec l'introduction de nombreuses fonctionnalités. Parmi celles-ci, le Single Directory Component (SDC) se distingue comme une approche innovante pour structurer et organiser les composants dans un projet Drupal.

Qu'est-ce que le Single Directory Component (SDC) ?

Le module Single Directory Component permet aux développeurs de regrouper tous les fichiers liés à un composant spécifique dans un seul répertoire. Traditionnellement, les projets Drupal dispersaient les fichiers associés à un composant (comme les templates Twig, les styles CSS, les scripts JavaScript, et les configurations YAML) dans différents répertoires. Cette méthode pouvait rendre la gestion des projets complexes, en particulier lorsqu'il s'agissait de trouver et de modifier un composant spécifique.

Avec le SDC, chaque composant de votre site Drupal dispose de son propre répertoire unique, où tous les fichiers pertinents sont centralisés. Cela simplifie non seulement la gestion des fichiers, mais améliore également la lisibilité et la maintenabilité du code. 

Par exemple, si vous développez un nouveau bloc ou un élément de formulaire, vous pouvez regrouper tous les éléments relatifs à ce composant dans un seul répertoire, ce qui facilite leur manipulation et leur réutilisation.

Un exemple concret de SDC :

Imaginons que vous créez un composant pour afficher un bouton personnalisé sur votre site. Avec SDC, vous pourriez avoir un répertoire structuré comme suit :

Structure d'un composant avec la logique de Single Directory Component

• button.twig : contient le template HTML du composant.

• button.scss : inclut les styles spécifiques au composant.

• button.js : ajoute des fonctionnalités dynamiques au bouton.

• button.yml : configure le composant dans Drupal (liste des props, ajout de librairies externes, etc ...).

Ce regroupement par répertoire permet de traiter chaque composant comme une entité autonome, rendant le code plus propre et plus facile à maintenir.

Incorporation automatique des CSS et JS dans le thème avec les Single Directory Components

Un des grands avantages du SDC (Single Directory Component) est l'incorporation automatique des fichiers CSS et JavaScript associés aux composants lorsqu'ils sont rendus sur une page. Cela signifie qu'il n'est pas nécessaire de configurer manuellement l'inclusion de ces fichiers dans votre thème.

• Chargement automatique : Lorsque vous utilisez un composant SDC sur une page via Twig ({{ include('path/to/component.twig') }}), Drupal détecte automatiquement les fichiers CSS et JS dans le répertoire du composant. Ces fichiers sont alors inclus dans le rendu de la page, assurant que les styles et les scripts nécessaires sont chargés uniquement lorsque le composant est utilisé.

• Optimisation des ressources : Seuls les fichiers CSS et JS pertinents pour le composant utilisé sont chargés, ce qui signifie que les autres fichiers associés à des composants non utilisés ne le sont pas. Cette approche réduit la taille globale des fichiers chargés sur chaque page et améliore les performances en termes de temps de chargement.

Cette automatisation facilite le travail des développeurs en leur évitant d'avoir à gérer manuellement les dépendances CSS et JS, tout en optimisant le rendu des pages.

Les autres avantages du Single Directory Component :

1. Centralisation et organisation : Tous les fichiers relatifs à un composant sont regroupés, ce qui évite la dispersion et facilite la recherche de fichiers.

2. Maintenance simplifiée : En cas de modification ou de mise à jour d'un composant, tous les fichiers sont localisés au même endroit, réduisant ainsi les erreurs potentielles.

3. Réutilisabilité accrue : Un composant bien structuré dans un répertoire unique est plus facile à extraire et à réutiliser dans d'autres projets ou dans d'autres parties du même projet.

4. Collaboration améliorée : Pour les équipes de développement, cette approche permet à chaque développeur de travailler sur un composant sans interférer avec les autres parties du projet, car chaque composant est isolé.

Modules complémentaires : SDC Display et SDC Block

Pour tirer le meilleur parti du Single Directory Component, vous pouvez intégrer deux modules complémentaires : SDC Display et SDC Block. Ces modules ajoutent des fonctionnalités supplémentaires, notamment en terme de theming :

• SDC Display : Ce module vous permet de gérer l'affichage des composants SDC directement à partir de l'interface utilisateur de Drupal. Vous pouvez créer et configurer des affichages spécifiques pour vos composants sans avoir à manipuler le code (dans les display mode de Drupal, possibilité de sélectionner le composant SDC voulu + mappage de données associé à celui-ci).

• SDC Block : Avec SDC Block, vous pouvez transformer vos composants SDC en blocs réutilisables que vous pouvez facilement placer dans différentes régions de votre thème Drupal via l'interface de gestion des blocs.

Corrélation des Single Directory Components avec l'Atomic Design

Bien que cet article se concentre sur le Single Directory Component, il est intéressant de noter la corrélation naturelle entre SDC et le concept d'Atomic Design. L'Atomic Design est une méthodologie de conception, qui décompose les interfaces utilisateur en composants modulaires, allant des plus petits éléments, appelés "atomes" en passant par ceux de taille intermédiaire "molécules" jusqu’à des structures plus complexes comme les "organismes".

Le SDC, en regroupant tous les éléments d'un composant (template, styles, scripts, etc.) dans un seul répertoire, reflète directement cette philosophie modulaire. Chaque répertoire de composant peut être considéré comme un "atome",  "molécule" ou "organismes" dans le cadre de l'Atomic Design, soulignant ainsi la compatibilité et la complémentarité de ces deux approches. En d'autres termes, SDC facilite la mise en œuvre des principes d'Atomic Design en Drupal, en rendant chaque composant autonome, réutilisable et facilement maintenable.Par ailleurs, pour de plus amples informations concernant l’Atomic Design et le Design System proposé par Insign, je vous invite à consulter cet article du blog : Le Design System : Comment murmurer à l'oreille des utilisateurs ?

En conclusion, l’utilisation des Single Directory Components (SDC) offre une approche moderne et efficace pour le développement de composants web.

En regroupant tous les éléments d'un composant dans un répertoire unique, SDC simplifie la gestion du code, améliore la réutilisabilité des composants, facilite la collaboration entre développeurs, et contribue également à l'optimisation des performances en chargeant uniquement les ressources nécessaires pour chaque composant.

De plus, il est important de reconnaître la manière dont SDC s'aligne avec les principes de conception modulaire et la méthodologie d'Atomic Design.

L'intégration des modules SDC Display et SDC Block avec SDC vous permet de tirer pleinement parti des fonctionnalités du Single Directory Component. SDC Display facilite la gestion et la personnalisation des affichages des composants, tandis que SDC Block permet de transformer ces composants en blocs réutilisables dans différentes régions de votre site.C’est pourquoi, chez Insign, nous avons choisi de développer nos projets en exploitant largement ce module SDC, en nous basant également sur un Design System adapté à nos clients, et en utilisant des plugins comme TailwindCSS et Storybook.