Gérer son Design System en mode Low-Code dans Drupal à l’aide de UI Suite

icone/30/left arrow long

Partagez toute l''actualité

Partagez sur Facebook Partagez sur Twitter Copier le lien

Populaires

1 sep 2021
Que signifie la "Security By Design" ?
Expertises
S ...
19 jan 2022
Gérer son Design System en mode Low-Code dans Drupal à l’aide de UI Suite
Personnalisat ...
- Publié 19/01/2022 - 09:04, mis à jour à 20/05/2022 - 09:55 PersonnalisationDrupal

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.

AODB_blog_article-chaine-de-valeur-design-system

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.

AODB_blog_article-nouvelle-chaine-de-valeur-design-system

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.

AODB_blog_article-architecture-globale-initiative-ui-suiteArchitecture 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 :

AODB-UI-Suite-Web

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.

AODB_blog_article-architecture-detaillee-initiative-ui-suiteArchitecture 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:

Low Code Theming experience with UI Suite

Michaël FANINI
Key Account manager & Presales Engineer

Vous souhaitez en savoir plus ?
Rencontrons-nous

  • Drupal
  • UX/UI
  • Webfactory

À la une

1 sep 2021
Que signifie la "Security By Design" ?

La sécurité des données et des systèmes est un enjeu crucial pour les entreprises. Cela commence par l’adoption d’une approche plus proactive de la sécurité des infrastructures : une approche qui ne repose pas sur les outils de protection ou de réparation habituels fournis par un tiers, mais qui intègre la sécurité dans votre infrastructure, de manière native.

Expertises
S ...
1 sep 2021
Que signifie la "Security By Design" ?
Expertises
S ...
19 jan 2022
Gérer son Design System en mode Low-Code dans Drupal à l’aide de UI Suite
Personnalisat ...
18 jan 2022
Qu’est ce qu’une DXP ? L’avenir du digital
Personnalisat ...
+ 200 Experts
7 Agences & Bureaux en France
+30 000Jour/Homme par an
Contributeur Et conférencier en Europe
+3000 Projets

Participez à nos workshops et events

Savoir gérer un projet en Méthode Agile tout en respectant Délai, Qualité.. et les Coûts
  • 23 novembre 2022
    11:30 - 12:00
Webinar
Les contraintes règlementaires avec Drupal (Cloud Act, RGPD, Sécurité, etc.)
  • 16 juin 2022
    11:30 - 12:00
Webinar

Nous contribuons aux évolutions et aux conférences technologiques en Europe

  • Image
    drupal camp
  • Image
    Paris Open Source Summit
  • Image
    IT Security & Meetings
  • Image
    DrupalCon