Julien Montois (CTO Adjoint SpikeeLabs) nous présente le Design-System SpikeeLabs actuellement utilisé sur l'Intranet et sur la solution de facturation Billing Labs :
- Tout d'abord les bases et les grands principes d'un Design-System
- Les objectifs et les particularités du Design-System SpikeeLabs
- Les bienfaits des composants UI Headless
- Un peu de code avec le fonctionnement d'un composant
2. SOMMAIRE
Qu’est-ce qu’un Design System
Pourquoi ?
Comment ça marche ?
Principes
Un composant
Formulaires (Formik)
Tableaux (Headless UI)
Etat des lieux
A venir
17. POURQUOI UN DESIGN-SYSTEM ?
En général, enjeux design
Projet mené par le design -> à destination des développeurs
Respect de la charte graphique
Uniformiser les pratiques UI/UX
Composants utilisables pour le maquettage
D’autres enjeux chez Spikee
19. POURQUOI UN DESIGN-SYSTEM ?
On pourrait utiliser Material, Bootstrap, Mui…
Customisable
Thèmes modifiables
Paramétrable
Beaucoup de propriétés prédéfinies
Démarrage rapide
21. POURQUOI UN DESIGN-SYSTEM ?
Besoins de la librairies
Accessibilité
Thèmes modifiables
Thèmes
Dark / Light, Thèmes différents
Unique
Ne pas ressembler à Material
Support navigateur
Fonctionnalités
Use Cases spécifiques
Contrôle complet des comportements
Maintenabilité
Simple à améliorer et maintenir
Ne pas se poser de questions si c’est faisable
Nir Ben-Yair
Frontend Team lead
Headless components in React and
why I stopped using a UI library for
our design system
22. POURQUOI UN DESIGN-SYSTEM ?
Choix initial :
Material UI + React-Bootstrap
Nouvelles fonctionnalités
De plus en plus de demandes
Use cases spécifiques
Ne répond plus au besoin
Perte de temps à essayer
de tordre la lib
Contournements non
satisfaisants
Difficile à maintenir
Nir Ben-Yair
Frontend Team lead
23. POURQUOI UN DESIGN-SYSTEM ?
Récrire des composants en entier ?
Contrôle total
Améliorations possible sans restrictions
Réécrire un Select
Accessibilité
Compatibilité navigateur
Navigation clavier
Autocomplete
Affichage paramétrable
Nir Ben-Yair
Frontend Team lead
“Can’t select a dropdown item on some iOS
devices on Safari (BUG-34939)”
Pedro Duarte / Radix UI
Next.js conf (2021)
24. POURQUOI UN DESIGN-SYSTEM ?
Headless UI
Se charge uniquement des comportements
Totale liberté dans le rendu
Nir Ben-Yair
Frontend Team lead
26. POURQUOI UN DESIGN-SYSTEM ?
Uniformiser les pratiques UI/UX
Charte graphique
Ergonomie
Total contrôle des composants
Rendu
Comportements
Maintenabilité
Gain de temps
Après un investissement maitrisé
On ne réinvente pas ce qui est très couteux
28. PRINCIPES
Peu de dépendances
Aucune lib UI
Lib headless
React-table
Lib utilitaires
Formik, Yup
Partis pris importants
Composants simples
Comportements par défaut
Extensibles si besoin
La priorité est : simplifier la construction d’application
Déporter la complexité dans le design-system
L’utilisateur finale se concentre sur le code métier
Le moins de code Js possible
Zéro CSS
29. PRINCIPES
Déporter la complexité dans le design-system
Complexité
essentielle
Complexité
obligatoire
Complexité
accidentelle
Complexité
essentielle
Complexité
obligatoire
Projet classique
Design-System
Projet avec
Design-system
51. ETAT DES LIEUX
Utilisations
Billing Labs
Intranet
Storybook
Environnement de dev
Bac à sable
Thèmes
Gestion de thèmes
Variante Dark/Light
Release / CI
Stabiliser les composants
Accessibilité
53. A VENIR
Priorité : Release des librairies
Semantic release
Doc développeur
Storybook
Guidelines
Thèmes
Theme Billing Labs
Starter kit
Démarrer un projet rapidement avec le design system
Composants plus larges
Organismes / Templates
Accessibilité
Headless UI
Identité
54. LE PROJET
Front > design-systems > spk-design-system-react
# npm install @spk/design-system-react
