Primer Design System fournit les composants fondamentaux des expériences de GitHub, comme les boutons, les bannières et les fils d’Ariane. Ces composants doivent être accessibles, flexibles et performants dans différents scénarios.
En 2023, le nombre de composants sur certaines pages a rapidement augmenté, faisant apparaître les problèmes suivants dans la solution CSS-in-JS existante :
- Les styles étant initialisés côté client, les premiers chargements des pages ont été ralentis.
- Le déplacement de la collecte des styles hors du client a réduit les performances du rendu côté serveur.
- À mesure que le nombre de composants sur la page augmentait, les mises à jour des styles devenaient incontrôlables.
L’équipe de Primer a recherché une solution qui éliminerait les coûts côté client et côté serveur, sans provoquer de régressions sur GitHub pendant la transition. CSS Modules permettait d’utiliser des fonctionnalités CSS locales tout en conservant le niveau d’encapsulation attendu de CSS-in-JS. Les styles seraient écrits dans des fichiers CSS situés à côté du code source JavaScript ; les noms de classe seraient locaux par défaut et aucun environnement d’exécution côté client ou côté serveur ne serait nécessaire. Les styles seraient plutôt regroupés dans des fichiers CSS envoyés avec le HTML.
Pour la migration, les étapes suivantes ont été suivies pour chaque composant :
- Un nouveau fichier convertissant les styles existants en CSS Modules a été ajouté.
- Un indicateur de fonctionnalité permettant de choisir entre les anciens et les nouveaux styles a été utilisé.
- L’identité des captures d’écran a été vérifiée au moyen de tests de régression visuelle.
- L’indicateur a été activé progressivement pour l’équipe, les employés de GitHub, puis l’ensemble des utilisateurs.
Ce processus a permis d’obtenir rapidement des retours. En décembre 2024, tous les composants de Primer avaient été migrés vers CSS Modules.
Pourquoi est-ce important ?
Cette évolution montre que, dans les interfaces dont le nombre de composants augmente, la gestion des styles affecte non seulement l’expérience des développeurs, mais aussi le chargement des pages et les coûts de traitement côté serveur. Le regroupement des styles dans des fichiers envoyés avec le HTML, plutôt que leur génération à l’exécution, vise à réduire les opérations qui créent une charge supplémentaire côté client et côté serveur. Le fait de fractionner la migration au moyen de feature flags et de tests de régression visuelle est important, car cela permet d’expérimenter des changements techniques dans des systèmes de design largement utilisés sans provoquer de régressions visibles pour les utilisateurs. L’obtention précoce de retours a également permis de suivre le problème non seulement au niveau du code, mais aussi à travers les écrans auxquels les équipes et les utilisateurs sont confrontés. Toutefois, l’article ne propose aucune évaluation de la manière dont cette approche fonctionnerait dans des systèmes de design autres que Primer.