Mikro-frontender og designsystemdrift: Holde brukergrensesnittet konsistent på tvers av team
Hvordan team som bruker mikrogrensesnitt holder ett konsistent brukergrensesnitt: delte tokens og komponenter som versjonerte pakker, CSS-isolasjon, oppgraderingspolicyer og visuelle regresjonssjekker.
Kjerne takeaway
Mikro-frontends lar team distribuere deler av et produkt uavhengig, noe som gjør brukergrensesnittet sannsynlig: forskjellige versjoner av komponenter, motstridende CSS og dupliserte stiler. Hold konsistensen ved å dele designtokens og komponenter som versjonerte pakker, isolere hvert teams CSS, avtale en oppgraderingspolicy og fange opp forskjeller med visuelle regresjonstester.
Hvorfor drift skjer
Martin Fowlers nettsted beskriver mikro-frontends som uavhengig leveringsbare frontend-applikasjoner satt sammen til en større helhet, med uavhengig distribusjon som en viktig fordel. Den samme uavhengigheten forårsaker drift: team oppgraderer designsystemet til forskjellige tider, kopierer komponenter for å bevege seg raskere og skriver CSS som lekker inn i andre deler av siden. Artikkelen advarer også om at noen implementeringer dupliserer avhengigheter og at CSS, som er global og gjennomgripende, trenger bevisst isolasjon.
Del systemet som pakker
Publiser tokens og komponenter som versjonerte pakker, ikke kopiert innlimt kode. Tokens i et standardformat, for eksempel W3C DTCG-formatet, kan bygges for hvert rammeverk et team bruker, så et React-team og et Vue-team deler fortsatt samme farger, avstand og bevegelse.
Isoler CSS
Forhindre at stiler lekker mellom team med en konsekvent tilnærming: navnekonvensjoner som BEM, CSS-moduler, CSS-in-JS eller Shadow DOM for webkomponenter. Velg én konvensjon for hele produktet og lo for det.
En oppgraderingspolicy
Avtal hvor langt bak et team kan falle, for eksempel ikke mer enn én hovedversjon, og bruk semantisk versjonering slik at team vet når endringer bryter. Spor hvilken versjon hver mikrogrensesnitt bruker i et delt dashbord.
Fang avdrift automatisk
Visuelle regresjonstester på nøkkelskjermer, loregler som forbyr rå farge- og avstandsverdier, og designanmeldelser på delte overflater (overskrifter, navigasjon, utsjekking) fanger opp inkonsekvenser før brukerne ser dem.
Tast Principles å huske
- Uavhengig distribusjon gjør UI-drift sannsynlig
- Del tokens og komponenter som versjonerte pakker
- Isoler CSS med én konsistent tilnærming
- Godta en oppgraderingspolicy og spor versjoner
- Bruk visuelle regresjonstester og loregler
Ofte stilte spørsmål
Kilder
- Micro Frontends — martinowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org