Mikrofronter och designsystemdrift: Hålla användargränssnittet konsekvent i team
Hur team som använder mikrogränssnitt behåller ett konsekvent användargränssnitt: delade tokens och komponenter som versionerade paket, CSS-isolering, uppgraderingspolicyer och visuella regressionskontroller.
Core Takeaway
Med mikrogränssnitt kan team distribuera delar av en produkt oberoende, vilket gör att användargränssnittet troligtvis glider: olika versioner av komponenter, motstridiga CSS och duplicerade stilar. Håll konsistensen genom att dela designtokens och komponenter som versionerade paket, isolera varje teams CSS, komma överens om en uppgraderingspolicy och fånga skillnader med visuella regressionstester.
Varför sker drift
Martin Fowlers webbplats beskriver mikrogränssnitt som självständigt leveransbara gränssnittsapplikationer sammansatta till en större helhet, med oberoende implementering som en viktig fördel. Samma oberoende orsakar drift: team uppgraderar designsystemet vid olika tidpunkter, kopierar komponenter för att röra sig snabbare och skriver CSS som läcker in i andra delar av sidan. Artikeln varnar också för att vissa implementeringar duplicerar beroenden och att CSS, som är global och överlappande, behöver avsiktlig isolering.
Dela systemet som paket
Publicera tokens och komponenter som versionerade paket, inte kopierad kod. Tokens i ett standardformat, som W3C DTCG-formatet, kan byggas för varje ram som ett team använder, så ett React-team och ett Vue-team delar fortfarande samma färger, avstånd och rörelse.
Isolera CSS
Förhindra stilar från att läcka mellan team med ett konsekvent tillvägagångssätt: namnkonventioner som BEM, CSS Modules, CSS-in-JS eller Shadow DOM för webbkomponenter. Välj en konvention för hela produkten och ludd för den.
En uppgraderingspolicy
Kom överens om hur långt efter ett team kan hamna, till exempel inte mer än en större version, och använd semantisk versionshantering så att teamen vet när förändringar bryter. Spåra vilken version varje mikrogränssnitt använder i en delad instrumentpanel.
Fånga drift automatiskt
Visuella regressionstester på nyckelskärmar, luddregler som förbjuder råa färg- och mellanrumsvärden och designrecensioner på delade ytor (rubriker, navigering, kassa) fångar inkonsekvenser innan användarna ser dem.
Nyckel Principles att komma ihåg
- Oberoende distribution gör att användargränssnittet troligen glider
- Dela tokens och komponenter som versionerade paket
- Isolera CSS med ett konsekvent tillvägagångssätt
- Godkänn en uppgraderingspolicy och spåra versioner
- Använd visuella regressionstester och luddregler
Vanliga frågor
Källor
- Micro Frontends — martinowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org