Come costruire un kit React UI scalabile

Foto di Blake Wheeler

In Travix abbiamo un singolo prodotto con 4 temi diversi. Ogni tema è un marchio indipendente e ogni marchio ha alcuni siti Web. Attualmente, abbiamo più di 45 siti Web in esecuzione sulla nostra piattaforma.

Due dei nostri 4 marchi diversi

Per far funzionare tutto abbiamo circa 40 sviluppatori frontend che lavorano sul prodotto ed è abbastanza difficile mantenere coerenti la base di codice e il design.

Se lavori in un grande progetto React probabilmente avrai una sorta di UI Kit integrato nella tua base di codice. Il componente Button comune, un'implementazione generica modale, un calendario che usi sempre, componenti comuni che non contengono alcuna logica aziendale.

L'obiettivo principale di questo articolo è aiutarti a sviluppare e organizzare il tuo kit di interfaccia utente, in modo da poter migliorare il processo di sviluppo e la coerenza di progettazione del progetto.

Come puoi immaginare, questa libreria non dipenderà solo dal tuo team di sviluppo. Dovresti anche coinvolgere i designer. Non importa quanto sei abile o quali tecnologie scegli se il tuo team di progettazione richiede 9 pulsanti diversi e 22 dimensioni dei caratteri.

Se sei fortunato, questo non sarà un grosso problema. Sta diventando abbastanza comune nei team di progettazione avere una guida di stile. Ma se la fortuna non è la tua migliore abilità, puoi avere qualcosa come grayCantBeLighterThanQuesto nome variabile nel tuo tema (storia vera).

Tecnologia

Come dice il titolo, stiamo usando React per creare la nostra applicazione. La maggior parte dei suggerimenti di questo articolo possono essere facilmente utilizzati in architetture diverse poiché dispongono di strumenti e librerie simili.

Libro di storia

Storybook sarà il tuo parco giochi di sviluppo e la galleria dei componenti. Aiuta a pensare nel tuo componente come un pacchetto isolato e dissociarlo al tuo prodotto, in modo da poter avere proprietà generiche e ben descritte.

Componente non riutilizzabile

Un'implementazione specifica di un pulsante

Componente generico

Implementazione generica di un pulsante

Storybook è anche ottimo nel fornire documentazione. C'è un componente aggiuntivo chiamato storybook-addon-info che aggiunge automaticamente il componente JSX e la descrizione dei tipi di prop alla pagina del componente.

L'esecuzione dell'intera applicazione probabilmente richiede pochi passaggi e può essere molto lenta. Lo Storybook di solito è più veloce da avviare, quindi migliora la velocità di sviluppo. Puoi sviluppare i tuoi componenti dell'interfaccia utente deridendo tutte le proprietà (storybook-addon-knob è perfetto per deridere) in un parco giochi completamente isolato senza eseguire l'applicazione principale.

Componenti in stile

Avrai anche bisogno di qualcosa per affrontare il tema. Abbiamo provato prima le variabili CSS pure e ha funzionato bene. Il pacchetto avrà due file CSS, uno con il componente libreria e un altro per la dichiarazione delle variabili. Se hai più di un tema, devi solo cambiare il file del tema e dovrebbe funzionare.

Temi usando CSS puro

Nella nostra nuova biblioteca, abbiamo deciso di utilizzare i componenti stilizzati. Fornisce già una soluzione a tema e CSS in JS funziona abbastanza bene con React. Di default hai anche l'ambito CSS che risolve il problema più grande in Informatica, la denominazione.

Questo è un ottimo modo per evitare qualsiasi sovrascrittura CSS imprevista e impedisce anche agli sviluppatori di sovrascrivere intenzionalmente le regole CSS. Il comportamento del componente è associato alla definizione delle proprietà e nessuno può sovrascrivere gli stili a livello globale.

Ti aiuta anche a definire meglio le regole condizionali nei tuoi stili perché non hai bisogno di estendere le classi CSS o gestirle nel tuo elemento. Fondamentalmente si passano oggetti di scena a un componente vista e questo componente può usarlo per gestire casi limite.

Tema selezionato disponibile per essere utilizzato all'interno dei nostri componenti

In Travix, abbiamo creato un componente aggiuntivo Storybook per cambiare facilmente il nostro tema. Se hai giocato con ThemeProvider di Styled Components, sai che in pratica dobbiamo cambiare la proprietà del tema e funziona come un incantesimo. Questo componente aggiuntivo ci aiuta a testare tutti i marchi durante lo sviluppo e aiuta anche i Product Owner (OP) e i Designer a convalidare l'implementazione.

Componente aggiuntivo selettore temi

Dattiloscritto

Abbiamo avuto pochi problemi per implementare TypeScript. Abbiamo trascorso almeno due settimane ad aggiornare la nostra soluzione per supportarla e altre due settimane a migrare tutto. Se decidi di usarlo, ti consiglio vivamente di iniziare il tuo progetto con TypeScript da zero.

Ma ripaga sicuramente e il completamento automatico di proprietà e valori aiuta molto durante lo sviluppo. Ti aiuta anche a definire contratti migliori per il tuo componente poiché qualsiasi definizione di tipo di proprietà esotica si accende in rosso durante il processo di revisione.

Completamento automatico di TypeScript

Eslint

Per garantire la coerenza della base di codice abbiamo una configurazione eslint super rigorosa. Abbiamo deciso di andare rigorosamente qui, quindi non perdiamo tempo a leggere i dettagli minori nel codice.

La nostra linter viene eseguita automaticamente prima di qualsiasi push con una correzione automatica modificata all'ultimo commit. Funziona anche nella nostra macchina CI, quindi se qualcuno decide di saltare la validazione, fallirà durante la compilazione.

Processo di sviluppo

La parte più importante per noi non riguardava la tecnologia stessa, ma il processo. Abbiamo trascorso molto tempo cercando di mantenerlo il più rigoroso possibile, in modo da poter garantire la qualità della biblioteca a lungo termine. Questo è abbastanza importante in una grande azienda perché gli sviluppatori se ne vanno, gli sviluppatori si uniscono, ma la tua base di codice resisterà alla prova del tempo.

Richiesta pull RFC

RFC significa "richiesta di commenti". In questa richiesta pull, non implementiamo una singola riga di codice. Fondamentalmente aggiungiamo un file markdown che descrive il nostro componente. Casi d'uso, proprietà, richiamate, possibili effetti collaterali.

La tua nuova libreria verrà utilizzata da tutta l'azienda e avrà molti casi limite e dettagli minori da regolare. Le richieste pull possono facilmente diventare grandi discussioni per discutere se il componente deve essere un HOC o renderProps, qualcosa di più compostabile o più rigoroso, controllato o incontrollato, e così via. Quindi RFC ti aiuta a non perdere tempo a implementare qualcosa che sarà completamente cambiato dopo la revisione.

Revisione richiesta pull

La nostra revisione della richiesta pull richiede alcuni passaggi automatici, tre approvazioni degli sviluppatori e le revisioni di PO / Designers. Nulla viene unito se uno di questi passaggi non riesce.

Passaggi CI:
- Esegui eslint e test.
- Controlla se la copertura del codice non diminuisce.
- Genera un ambiente unico per il libro di fiabe (aggiorna anche l'ambiente se commetti qualcosa di nuovo).

Gli sviluppatori che esaminano la tua richiesta pull devono solo verificare se l'implementazione corrisponde alla RFC già approvata e se il design è corretto.

I progettisti e gli OP possono rivedere l'implementazione utilizzando l'ambiente dei libri di fiabe creato dall'IC.

Rilascio di una nuova versione

Per controllare il nostro ciclo di rilascio, abbiamo deciso di utilizzare Semantic Release, quindi non ci resta che aggiungere "patch", "minore" o "maggiore" nel nostro messaggio di commit unione e rilascerà automaticamente una nuova versione sul nostro NPM privato. Il nostro CI aggiorna anche il nostro ambiente principale per i libri di fiabe.

Conclusione

Costruire un kit UI non è un compito facile e richiederà un grande sforzo da parte del tuo team, ma ti aiuterà sicuramente a ridimensionare la tua applicazione e mantenerla coerente.

Tutti i principali aggiornamenti dell'interfaccia utente sono facilmente raggiungibili poiché manteniamo i nostri componenti dell'interfaccia utente isolati ed è anche abbastanza facile aggiungere qualsiasi nuovo marchio, dobbiamo solo aggiungere un nuovo file di temi.

Un altro vantaggio derivante dallo spostamento della nostra dichiarazione a tema in una biblioteca esterna è che la nostra applicazione principale non si preoccupa affatto dei temi. In questo senso è apolide perché la nostra libreria UI si prende cura di tutto ciò che ci riguarda.

E se hai un team di designer che codificano (anche chiamato Unicorni) possono iniziare a prototipare usando questa libreria. È il prototipo più fedele o no?

Se vuoi usare qualcosa di simile a quello che stiamo usando in Travix I estraggo parte della base di codice e ho creato una piccola piastra di caldaia con Styled Components, TypeScript e Jest. È stato abbastanza fastidioso installare tutto, quindi spero che ti piaccia: https://github.com/leandrooriente/react-ui-kit-boilerplate.

Grazie per aver letto.