Micro-frontend e deriva del sistema di progettazione: mantenere l'interfaccia utente coerente tra i team
In che modo i team che utilizzano micro-frontend mantengono un'interfaccia utente coerente: token e componenti condivisi come pacchetti con versione, isolamento CSS, policy di aggiornamento e controlli visivi di regressione.
Punto chiave
I micro-frontend consentono ai team di distribuire parti di un prodotto in modo indipendente, il che rende probabile la deriva dell'interfaccia utente: versioni diverse dei componenti, CSS in conflitto e stili duplicati. Mantieni la coerenza condividendo token e componenti di progettazione come pacchetti con versione, isolando CSS di ciascun team, concordando una politica di aggiornamento e rilevando le differenze con test di regressione visiva.
Perché avviene la deriva
Il sito di Martin Fowler descrive i micro-frontend come applicazioni frontend consegnabili in modo indipendente composte in un insieme più grande, con l'implementazione indipendente come vantaggio chiave. La stessa indipendenza causa la deriva: i team aggiornano il sistema di progettazione in momenti diversi, copiano i componenti per muoversi più velocemente e scrivono CSS che si diffonde in altre parti della pagina. L'articolo avverte inoltre che alcune implementazioni duplicano le dipendenze e che CSS, essendo globale e a cascata, necessita di un isolamento deliberato.
Condividere il sistema come pacchetti
Pubblica token e componenti come pacchetti con versione, non come codice copiato e incollato. I token in un formato standard, come il formato W3C DTCG, possono essere creati per ogni framework utilizzato da un team, quindi un team React e un team Vue condividono ancora gli stessi colori, spaziatura e movimento.
Isolare CSS
Evita che gli stili si diffondano tra i team con un approccio coerente: convenzioni di denominazione come BEM, moduli CSS, CSS-in-JS o Shadow DOM per i componenti web. Scegli una convenzione per l'intero prodotto e rimuovila.
Una politica di aggiornamento
Concordare quanto indietro un team potrebbe restare indietro, ad esempio non più di una versione principale, e utilizzare il controllo delle versioni semantico in modo che i team sappiano quando le modifiche si stanno verificando. Tieni traccia della versione utilizzata da ciascun micro-frontend in una dashboard condivisa.
Cattura la deriva automaticamente
Test di regressione visiva sulle schermate principali, regole di lanugine che vietano valori di colore e spaziatura non elaborati e revisioni del progetto su superfici condivise (intestazioni, navigazione, checkout) rilevano le incoerenze prima che gli utenti le vedano.
Principi chiave da ricordare
- La distribuzione indipendente rende probabile la deriva dell'interfaccia utente
- Condividi token e componenti come pacchetti con versione
- Isola CSS con un approccio coerente
- Concordare una politica di aggiornamento e tenere traccia delle versioni
- Utilizzare test di regressione visiva e regole di lanugine
Domande frequenti
Fonti
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org