Micro-Frontends a dizajnový systémový posun: Udržiavanie konzistentného používateľského rozhrania medzi tímami
Ako si tímy používajúce mikro-frontendy udržiavajú jedno konzistentné používateľské rozhranie: zdieľané tokeny a komponenty ako balíky s verziou, izolácia CSS, zásady upgradu a vizuálne regresné kontroly.
Core Takeaway
Mikrofrontendy umožňujú tímom nasadzovať časti produktu nezávisle, vďaka čomu je pravdepodobný posun používateľského rozhrania: rôzne verzie komponentov, konfliktné CSS a duplicitné štýly. Udržujte konzistentnosť zdieľaním dizajnových tokenov a komponentov ako verziovaných balíkov, izoláciou CSS každého tímu, odsúhlasením politiky upgradu a zachytením rozdielov pomocou vizuálnych regresných testov.
Prečo dochádza k driftu
Stránka Martina Fowlera popisuje mikrofrontendy ako nezávisle dodávateľné frontendové aplikácie zložené do väčšieho celku, pričom kľúčovou výhodou je nezávislé nasadenie. Rovnaká nezávislosť spôsobuje posun: tímy inovujú dizajnový systém v rôznych časoch, kopírujú komponenty, aby sa pohybovali rýchlejšie, a píšu CSS, ktoré presakujú do iných častí stránky. Článok tiež varuje, že niektoré implementácie duplikujú závislosti a že CSS, keďže je globálny a kaskádový, potrebuje zámernú izoláciu.
Zdieľajte systém ako balíky
Zverejňujte tokeny a komponenty ako balíky s verziou, nie skopírovaný kód. Tokeny v štandardnom formáte, ako je formát W3C DTCG, je možné vytvoriť pre každý rámec, ktorý tím používa, takže tím React a tím Vue stále zdieľajú rovnaké farby, rozstupy a pohyb.
Izolujte CSS
Zabráňte úniku štýlov medzi tímami pomocou konzistentného prístupu: konvencie pomenovania, ako sú moduly BEM, CSS, CSS-in-JS alebo Shadow DOM pre webové komponenty. Vyberte si jednu konvenciu pre celý produkt a vlákna.
Zásady inovácie
Dohodnite sa, ako ďaleko môže tím zaostávať, napríklad nie viac ako jedna hlavná verzia, a použite sémantické verzovanie, aby tímy vedeli, keď sa zmeny zlomia. V zdieľanom informačnom paneli sledujte, ktorú verziu jednotlivé mikro-frontend používajú.
Automaticky zachytávajte drift
Vizuálne regresné testy na kľúčových obrazovkách, pravidlá lint, ktoré zakazujú nespracované hodnoty farieb a medzier, a recenzie dizajnu na zdieľaných plochách (hlavičky, navigácia, pokladňa) zachytávajú nezrovnalosti skôr, ako ich používatelia uvidia.
Kľúč Principle na zapamätanie
- Nezávislé nasadenie spôsobuje pravdepodobný posun používateľského rozhrania
- Zdieľajte tokeny a komponenty ako balíky s verziou
- Izolujte CSS jedným konzistentným prístupom
- Dohodnite sa na politike inovácie a sledujte verzie
- Použite vizuálne regresné testy a pravidlá púšťania vlákien
Často kladené otázky
Zdroje
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org