Design System low-code dans Drupal avec UI Suite

En 2021, AODB a conçu une solution DXP basée sur Drupal, la “eXperience Factory” (cf description de la solution ici).

Cette solution a la particularité de fournir, à des non-développeurs, le moyen de modifier par eux-mêmes les gabarits de leurs pages, et leur donner ainsi les capacités à modifier l'expérience complète du visiteur.

Passer de "Webmaster" à “eXperience Master”

Jusqu’à aujourd’hui, la création d’un gabarit a toujours été le fruit d’un processus statique visant à créer un Design System, de le figer au travers du développement de gabarits dans un CMS, puis le webmaster ne peut que se contenter de l’utiliser en y insérant du contenu.

La tendance actuelle est de permettre la modification de cette chaîne de valeur afin de rendre le Design System dynamique et de fournir ainsi aux webmasters les moyens de pouvoir modifier les gabarits tout en respectant une ligne graphique prédéfinie par son organisation. Ainsi son métier évolue et il devient pleinement responsable de l'expérience qu’il va faire vivre à ses utilisateurs.

Comment permettre la modification de son Design System en mode Low-Code ?

AODB a choisi Drupal comme coeur de sa DXP, afin de permettre la modification de son Design System, nous nous sommes concentrés sur la suite de modules “UI Suite”.

UI Suite est une suite de modules Drupal permettant de standardiser l’intégration de Design Systems Web dans Drupal Core.

Architecture globale de l’initiative UI Suite

Objectifs

L’objectif principal d’UI Suite est de faciliter l’adoption de Drupal :

• en améliorant l’expérience de Site Building Drupal
• et en utilisant Drupal comme une solution Low Code

Gains

Les gains liés à l’initiative UI Suite sont les suivants :

• Diminution du code produit par les développeurs
• Liberté de Site Building offrant la possibilité de créer tout type de templates
• Amélioration de la qualité des sites Web réalisés
• Production rapide de sites Web
• Accélération du Time to Market

Exemple de rapport Lighthouse obtenu avec le déploiement de la DXP sur le site de l’INSP.GOUV.FR :

Modules core

Le coeur d’UI Suite est composé des modules suivants :

• UI Patterns : Ce module permet de définir et exposer des composants d'interfaces utilisateurs autonomes en tant que plugins Drupal et de les utiliser de manière transparente comme composants à insérer pour les groupes de champs, les vues, les modèles de champs Display Suite, les paragraphes, les nœuds ou tout autre type d'entité Drupal. Le module génère une page de bibliothèque de composants qui peut être utilisée comme documentation pour les éditeurs de contenu ou comme vitrine pour les entreprises et les clients.
   
• Layout Options : Ce module fournit un plugin Layout qui permet d'ajouter facilement des options de configuration aux mises en page en utilisant des fichiers YAML et des plugins LayoutOption. Dans la plupart des cas, aucun code n'est utilisé, seulement des fichiers YAML.
   
• UI Styles : Ce module permet aux développeurs de définir des styles (simples listes de classes CSS concurrentes) à partir des modules et des thèmes, aux site builders d'utiliser ces styles sur les blocs et les sections à partir de l'interface Layout Builder et à tout le monde de parcourir les styles à partir d'une page de bibliothèque.
   
• UI Examples : Ce module permet aux développeurs de fournir des pages d'exemples à partir de modules ou de thèmes en définissant des tableaux de rendu dans un fichier YAML.

Architecture détaillée de l’initiative UI Suite

Une première implémentation à succès à par ailleurs été réalisée pour la refonte de l’ENA que vous pouvez consulter sur https://insp.gouv.fr/ , vous pouvez consulter la référence ici.

Ce projet a été réalisé en intégrant préalablement l’ensemble du système de design de l’état (DSFR) afin de créer une déclinaison de notre solution principale à destination des acteurs de l’état (voir la description du produit “DSFR Factory”)

Vous pouvez vous inscrire à nos Webinar pour obtenir des démos:

• Si vous êtes un acteur de l’état : le Webinar DSFR Factory
• Si vous êtes une organisation privée : l'article sur l' eXperience Factory va vous intéresser.