Comme de nombreuses entreprises, les systèmes de conception sont requis pour plusieurs raisons. Chez Ubisoft, notre système de conception interne s’appelle Egg et se concentre sur les outils de productivité que nous créons.
Pendant deux ans, nous avons implémenté des composants Web en utilisant Lit-Element jusqu’à ce que je lise cet article au sujet d’une bibliothèque du nom de Lion qui permettait de créer un système de conception en plus.
Lion web composants est un ensemble de composants Web hautement performants, accessibles et flexibles. Ils fournissent une couche blanche sans opinion qui peut ensuite être étendue à votre propre couche de composants.
Nous sommes ravis de mettre à jour notre implémentation pour intégrer l’utilisation de Lion.
Dans cet article, nous allons essayer d’expliquer les raisons qui nous ont poussées à choisir Lion, comment cela s’est produit et comment nous avons bénéficié de l’utilisation de Lion comme base.
Extension Lion
Voici un exemple simplifié de l’extension du bouton egg @lion/button.
Avec plusieurs composants, vous devrez trouver un thème mixin pour définir toutes les variables css. Pour réussir sans mixin, j’ai copié les valeurs des variables CSS dans les valeurs par défaut des variables var(--egg-primary, #1976d2). Vous n’avez pas besoin d’ajouter la valeur par défaut : var(--egg-primary).
Le thème se fait facilement grâce aux variables CSS puisque celles-ci héritent leur valeur de leur parent. Les thèmes personnalisés ont été créés pour le sombre et le clair, ainsi que de nombreuses autres couleurs sans besoin de modifier les composants.
JSDoc est utilisé pour générer une documentation avec web-component-analyzer. Vous pouvez l’afficher dans Storybook ou tout autre site de documentation.
Créer de nouveaux composants
Lion dispose de nombreux éléments de construction que vous pouvez utiliser pour créer ce que vous souhaitez. Vous pouvez consulter des exemples d’extension dans la documentation de Lion.
Notre indicateur de progrès étend LionProgressIndicator avec 3 types d’indicateurs.
Nous avons créé une barre de boutons avec LionListBox en ajoutant tout simplement certains styles.
Nous avons proposé un menu simple avec Lion et OverlayMixin.
Composant wrap pour React
Puisque nous voulons que nos composants soient utilisés dans différents cadres, il nous fallait un Wrapper, au moins pour React. Vous disposez de plusieurs Wrappers pour le faire, voici un exemple :
Puisque nous voulons que nos composants soient utilisés dans différents cadres, il nous fallait un Wrapper, au moins pour React. Vous disposez de plusieurs Wrappers pour le faire, voici un exemple :
Certaines équipes d’Ubisoft qui avaient commencé à utiliser une architecture micro-frontend avec une charge côté client ont été obligées de faire face à certains soucis suite à cette approche. Les noms des éléments personnalisés doivent être groupés avec quelque chose comme @open-wc/scoped-elements. Lion groupe déjà tous ses éléments internes avec.
Lors du Wrap pour React, nous utilisons le même ensemble de techniques @open-wc/scoped-elements pour enregistrer l’élément personnalisé avec un nom unique afin de l’utiliser dans une architecture micro-frontend.
Les mêmes wrappers sont disponibles pour Vue et Angular afin de faciliter leur utilisation dans ces architectures et avec les éléments de groupe personnalisés pour le micro-frontend.
Test
Lion teste déjà la plupart des codes de sa couche. Dans notre couche, il n’y a pratiquement que du CSS. Les tests de régression visuelle constituent la majeure partie des tests que nous effectuons sur nos composants. Les tests visuels sont réalisés pour chaque composant à l’aide de Storybook pour livrer les fichiers, et Playwright pour les contrôler et prendre des captures d’écran.
Code ouvert
L’un des avantages de l’utilisation de Lion a été de pouvoir utiliser et contribuer au projet Lion. Si du code attendait une validation de Lion, nous l’ajoutons simplement à notre couche. Une fois livré dans Lion, nous mettons la bibliothèque à jour et supprimons le code superflu.
Conclusion
L’utilisation des composants Web de Lion nous aide à accélérer l’implémentation de notre système de conception puisque nous disposons majoritairement de CSS dans notre couche.
Nous sommes ravis de travailler avec l’incroyable communauté de Lion.
Merci à Mathieu Puech, auteur de ce billet.
Cet article a été partagé pour la première fois sur le blogue de ING. Vous pouvez le trouver ici.
