Micro-Frontends a návrh systému Drift: Udržování konzistentního uživatelského rozhraní napříč týmy
Jak týmy používající mikrofrontendy udržují jedno konzistentní uživatelské rozhraní: sdílené tokeny a komponenty jako verzované balíčky, izolace CSS, zásady upgradu a vizuální regresní kontroly.
Core Takeaway
Mikrofrontendy umožňují týmům nasazovat části produktu nezávisle, díky čemuž je pravděpodobný posun uživatelského rozhraní: různé verze komponent, konfliktní CSS a duplicitní styly. Udržujte konzistenci sdílením návrhových tokenů a komponent jako verzovaných balíčků, izolováním CSS každého týmu, odsouhlasením zásad upgradu a zachycením rozdílů pomocí vizuálních regresních testů.
Proč dochází k driftu
Stránky Martina Fowlera popisují mikrofrontendy jako nezávisle doručitelné frontendové aplikace složené do většího celku, přičemž klíčovou výhodou je nezávislé nasazení. Stejná nezávislost způsobuje posun: týmy upgradují návrhový systém v různých časech, kopírují komponenty, aby se pohybovaly rychleji, a píší CSS, které pronikají do jiných částí stránky. Článek také varuje, že některé implementace duplikují závislosti a že CSS, protože je globální a kaskádový, potřebuje záměrnou izolaci.
Sdílejte systém jako balíčky
Publikovat tokeny a komponenty jako verzované balíčky, nikoli zkopírovaný kód. Tokeny ve standardním formátu, jako je formát W3C DTCG, lze sestavit pro každý rámec, který tým používá, takže tým React a tým Vue stále sdílejí stejné barvy, rozestupy a pohyb.
Izolujte CSS
Zabraňte úniku stylů mezi týmy pomocí konzistentního přístupu: konvence pojmenování, jako jsou BEM, moduly CSS, CSS-in-JS nebo Shadow DOM pro webové komponenty. Vyberte jednu konvenci pro celý produkt a pro něj vlákna.
Zásady upgradu
Dohodněte se, jak daleko může tým zaostávat, například ne více než jedna hlavní verze, a používejte sémantické verzování, aby týmy věděly, kdy dochází ke změnám. Na sdíleném řídicím panelu můžete sledovat, kterou verzi jednotlivé mikrofrontendy používají.
Automaticky zachytit drift
Vizuální regresní testy na klíčových obrazovkách, pravidla lint, která zakazují nezpracované hodnoty barev a mezer, a recenze návrhů na sdílených plochách (záhlaví, navigace, pokladna) zachycují nekonzistence dříve, než je uživatelé uvidí.
Klíč Principle k zapamatování
- Nezávislé nasazení zvyšuje pravděpodobnost posunu uživatelského rozhraní
- Sdílejte tokeny a komponenty jako verzované balíčky
- Izolujte CSS jedním konzistentním přístupem
- Odsouhlaste zásady upgradu a sledujte verze
- Použijte vizuální regresní testy a pravidla lint
Často kladené otázky
Zdroje
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org