Primer Design System proporciona los componentes fundamentales de experiencias como botones, banners y breadcrumbs en GitHub. Estos componentes deben ser accesibles, flexibles y ofrecer un alto rendimiento en distintos escenarios.
En 2023, el número de componentes en algunas páginas aumentó rápidamente y surgieron los siguientes problemas con la solución CSS-in-JS existente:
- Las primeras cargas de las páginas se prolongaron porque los estilos se inicializaban en el cliente.
- Trasladar el proceso de recopilación de estilos fuera del cliente redujo el rendimiento de la renderización en el servidor.
- Las actualizaciones de estilos se descontrolaron a medida que aumentaba el número de componentes en la página.
El equipo de Primer buscó una solución que eliminara los costes del cliente y del servidor, y que no provocara interrupciones en GitHub durante la migración. CSS Modules permitió utilizar propiedades CSS locales y mantener el nivel específico de encapsulación esperado de CSS-in-JS. Los estilos se escribirían en archivos CSS ubicados junto al código fuente de JavaScript; los nombres de clase serían locales de forma predeterminada y no se necesitaría un tiempo de ejecución en el cliente ni en el servidor. En su lugar, los estilos se combinarían en archivos CSS enviados con el HTML.
Para la migración, se siguieron los siguientes pasos en cada componente:
- Se añadió un archivo nuevo que convertía los estilos existentes a CSS Modules.
- Se utilizó una feature flag que permitía elegir entre los estilos antiguos y los nuevos.
- Se verificó mediante pruebas de regresión visual que las capturas de pantalla fueran idénticas.
- La flag se activó gradualmente para el equipo, los empleados de GitHub y, posteriormente, todos los usuarios.
Este proceso proporcionó comentarios tempranos. En diciembre de 2024, todos los componentes de Primer se habían migrado a CSS Modules.
Por qué es importante
Este cambio muestra que, en las interfaces cuyo número de componentes crece, la gestión de estilos no solo afecta a la experiencia de los desarrolladores, sino también a la carga de las páginas y a los costes de procesamiento del servidor. La integración de los estilos en archivos enviados junto con el HTML, en lugar de hacerlo durante el tiempo de ejecución, busca reducir las operaciones que generan una carga adicional tanto en el cliente como en el servidor. Dividir la migración mediante feature flags y pruebas de regresión visual es importante para poder probar cambios técnicos en sistemas de diseño ampliamente utilizados sin provocar fallos visibles para los usuarios. La obtención de comentarios tempranos también permitió supervisar el problema no solo a nivel de código, sino a través de las pantallas con las que interactúan los equipos y los usuarios. No obstante, la noticia no ofrece una evaluación de cómo funcionaría este enfoque en sistemas de diseño distintos de Primer.