Drupal 11 : découvrez les Single Directory Components (SDC)

Avec la sortie de Drupal 11, une nouvelle fonctionnalité est arrivé dans le développement front-end : les Single Directory Components (SDC), ou composants à répertoire unique. Introduits comme module expérimental dans Drupal 10.1, les SDC sont désormais stables et prêts à être adoptés dans des projets. Mais pourquoi cette approche est-elle essentielle ? Quels avantages offre-t-elle par rapport aux méthodes traditionnelles ? Dans cet article, nous allons explorer en détail les raisons pour lesquelles vous devriez adopter les SDC dès aujourd'hui.

Qu'est-ce que les Single Directory Components (SDC) ?

Les Single Directory Components (SDC) représentent une nouvelle manière d'organiser les fichiers front-end dans Drupal. Contrairement aux méthodes traditionnelles où les fichiers nécessaires à un composant (comme les fichiers Twig, CSS, JavaScript et YAML) sont dispersés dans différents répertoires, les SDC regroupent tout dans un répertoire unique. Cette approche modulaire simplifie la gestion des composants, améliore leur réutilisabilité et réduit les erreurs liées à une organisation complexe et dispersée.

Exemple concret d'un SDC

Prenons un composant simple, comme un bouton. Avec les SDC, tous les fichiers nécessaires à ce bouton sont regroupés dans un seul répertoire, par exemple :

/components/button/  
  ├── button.twig  
  ├── button.css  
  ├── button.js  
  ├── button.yml  

Cette structure claire et intuitive facilite la navigation et la maintenance, même pour les développeurs qui découvrent un projet.

Pourquoi les SDC sont-ils une bonne pratique avec Drupal 11 ?

1. Une organisation et une modularité optimisées

L'un des principaux avantages des SDC est leur capacité à regrouper tous les fichiers d'un composant dans un seul répertoire. Cela permet une organisation plus claire et une modularité accrue. Les développeurs peuvent facilement localiser, modifier ou réutiliser un composant sans avoir à chercher dans plusieurs répertoires.

Exemple pratique : Sur un site complexe avec des dizaines de composants, les SDC permettent de retrouver rapidement le composant "carte produit" sans naviguer dans des dossiers CSS, JS ou Twig séparés.

2. Automatisation des bibliothèques CSS et JS

Avec les SDC, Drupal génère automatiquement les bibliothèques CSS et JavaScript pour chaque composant. Vous n'avez plus besoin de déclarer manuellement ces bibliothèques dans des fichiers .info.yml. Cette automatisation réduit les tâches répétitives et minimise les risques d'erreurs.

Avantage clé : Les développeurs peuvent se concentrer sur la création de composants plutôt que sur la configuration fastidieuse des bibliothèques.

3. Validation des données avec YAML

Les fichiers YAML des SDC peuvent inclure des schémas JSON pour valider les données d'entrée. Cela garantit que les composants reçoivent des données conformes aux attentes, réduisant ainsi les bugs et améliorant la qualité globale du code.

Exemple : Un composant "carte produit" peut valider que les données fournies incluent un titre, une image et un prix avant d'être rendu.

4. Compatibilité avec les outils modernes de design system

Les SDC s'intègrent parfaitement avec des outils de design et de prototypage comme Storybook ou Figma. Cela facilite la collaboration entre les équipes de design et de développement, en permettant de visualiser et de tester les composants dans un environnement isolé.

Cas d'usage : Une équipe de designers peut utiliser Storybook pour prévisualiser les composants SDC, tandis que les développeurs les intègrent directement dans Drupal.

5. Réduction des coûts et des délais de développement

Grâce à leur structure modulaire et à leur réutilisabilité, les SDC permettent de réduire les coûts de maintenance et d'accélérer les cycles de développement. Les entreprises peuvent ainsi livrer des projets plus rapidement tout en maintenant une qualité élevée.

Pour en savoir plus, je vous invite à regarder cette vidéo qui résume très bien cela : 

Pourquoi adopter les SDC dès maintenant ?

Une norme en devenir

Les SDC sont en passe de devenir la nouvelle norme pour le développement front-end avec Drupal. Avec leur adoption croissante par la communauté, il est probable que de nombreux projets Drupal futurs reposent sur cette architecture. En adoptant les SDC dès maintenant, vous prenez une longueur d'avance et préparez vos équipes aux pratiques modernes.

Une courbe d'apprentissage réduite

Pour les nouveaux développeurs front-end, les SDC offrent une structure standardisée et bien documentée. Cela réduit la courbe d'apprentissage et facilite l'intégration des nouveaux membres dans une équipe.

Une communauté active et collaborative

La communauté Drupal travaille déjà sur des initiatives pour créer un dépôt centralisé de composants réutilisables basés sur les SDC. En rejoignant cette dynamique, vous bénéficiez d'un écosystème riche et collaboratif.

Sources

• Lullabot - Getting Started with Single Directory Components in Drupal Core
• Drupal.org - Using Single Directory Components
• Axelerant - Single Directory Components in Drupal
• Drupal Helps - Smarter Theming with Single Directory Components

FAQ : Tout ce que vous devez savoir sur les SDC

1. Les SDC sont-ils compatibles avec les versions précédentes de Drupal ?

Les SDC ont été introduits comme module expérimental dans Drupal 10.1 et sont pleinement stables dans Drupal 11. Bien qu'il soit possible de les utiliser dans Drupal 10.1, il est recommandé de passer à Drupal 11 pour profiter de toutes les fonctionnalités.

2. Les SDC remplacent-ils les UI Patterns ?

Non, les SDC et les UI Patterns sont complémentaires. Les SDC se concentrent sur l'organisation des fichiers front-end, tandis que les UI Patterns offrent une approche basée sur des modèles pour structurer les interfaces utilisateur.

3. Comment commencer avec les SDC dans Drupal 11 ?

Pour commencer, activez le module SDC dans votre installation Drupal 11. Ensuite, créez un répertoire pour vos composants dans votre thème (par exemple, /components/) et suivez la structure standard des SDC.

4. Les SDC sont-ils adaptés aux grands projets ?

Absolument. Les SDC sont particulièrement utiles pour les grands projets où la modularité et la réutilisabilité des composants sont essentielles.

Conclusion : Une révolution pour le développement front-end avec Drupal

Les Single Directory Components représentent une avancée majeure pour le développement front-end avec Drupal. En simplifiant l'organisation des fichiers, en automatisant les tâches répétitives et en facilitant la collaboration entre les équipes, les SDC offrent des avantages significatifs pour les développeurs et les entreprises. Avec leur adoption croissante et leur intégration dans Drupal 11, il n'a jamais été aussi pertinent de les adopter dans vos projets.

N'hésitez pas à nous contacter pour échanger.