Primer Design System fornisce i componenti fondamentali delle esperienze su GitHub, come pulsanti, banner e breadcrumb. Questi componenti devono essere accessibili, flessibili e altamente performanti in scenari diversi.
Nel 2023, il numero di componenti in alcune pagine è aumentato rapidamente, facendo emergere i seguenti problemi nell’attuale soluzione CSS-in-JS:
- I caricamenti iniziali delle pagine si sono allungati perché gli stili venivano inizializzati sul client.
- Spostare la raccolta degli stili al di fuori del client ha ridotto le prestazioni del rendering lato server.
- Gli aggiornamenti degli stili sono diventati ingestibili con l’aumentare del numero di componenti nella pagina.
Il team di Primer ha cercato una soluzione che eliminasse i costi lato client e lato server senza causare interruzioni su GitHub durante la transizione. CSS Modules ha permesso di utilizzare le funzionalità CSS locali e di mantenere il livello di incapsulamento previsto da CSS-in-JS. Gli stili sarebbero stati scritti in file CSS collocati accanto al codice sorgente JavaScript; i nomi delle classi sarebbero stati locali per impostazione predefinita e non sarebbe stato necessario alcun runtime lato client o lato server. Gli stili sarebbero invece stati aggregati nei file CSS inviati insieme all’HTML.
Per la transizione, ogni componente ha seguito questi passaggi:
- È stato aggiunto un nuovo file che convertiva gli stili esistenti in CSS Modules.
- È stato utilizzato un feature flag per scegliere tra gli stili vecchi e quelli nuovi.
- È stato verificato, tramite test di regressione visiva, che le schermate fossero identiche.
- Il flag è stato attivato gradualmente per il team, per i dipendenti di GitHub e infine per tutti gli utenti.
Questo processo ha fornito feedback tempestivi. Nel dicembre 2024, tutti i componenti di Primer erano stati trasferiti a CSS Modules.
Perché è importante
Questa modifica mostra che, nelle interfacce in cui il numero di componenti è in crescita, la gestione degli stili influisce non solo sull’esperienza degli sviluppatori, ma anche sul caricamento delle pagine e sui costi di elaborazione lato server. L’unificazione degli stili in file inviati insieme all’HTML, anziché durante l’esecuzione, mira a ridurre le operazioni che comportano un carico aggiuntivo lato client e lato server. La suddivisione della transizione in fasi, mediante feature flag e test di regressione visiva, è importante perché consente di sperimentare modifiche tecniche nei sistemi di design ampiamente utilizzati senza causare problemi visibili agli utenti. Anche la raccolta di feedback tempestivi ha permesso di monitorare il problema non solo a livello di codice, ma anche attraverso le schermate visualizzate dai team e dagli utenti. Tuttavia, l’articolo non offre una valutazione di come questo approccio potrebbe funzionare nei sistemi di design diversi da Primer.