Micro-Frontends и отклонение на системата за проектиране: Поддържане на потребителския интерфейс последователен в екипите
Как екипите, използващи микро-frontends, поддържат един последователен потребителски интерфейс: споделени токени и компоненти като версионни пакети, CSS изолация, политики за надграждане и визуални регресионни проверки.
Ядро за вкъщи
Микро интерфейсите позволяват на екипите да разгръщат части от даден продукт независимо, което прави потребителския интерфейс вероятен: различни версии на компоненти, конфликтни CSS и дублирани стилове. Поддържайте последователност, като споделяте дизайнерски токени и компоненти като версионни пакети, изолирате CSS на всеки екип, съгласувате политика за надграждане и улавяте разликите с визуални регресионни тестове.
Защо се случва дрифт
Сайтът на Martin Fowler описва микро-frontends като независимо доставими frontend приложения, съставени в по-голямо цяло, с независимо внедряване като ключово предимство. Същата независимост причинява отклонение: екипите надграждат системата за проектиране по различно време, копират компоненти, за да се движат по-бързо, и пишат CSS, който изтича в други части на страницата. Статията също така предупреждава, че някои реализации дублират зависимости и че CSS, тъй като е глобален и каскаден, се нуждае от умишлена изолация.
Споделете системата като пакети
Публикувайте токени и компоненти като версионни пакети, а не копиран код. Токените в стандартен формат, като например W3C DTCG формат, могат да бъдат създадени за всяка рамка, използвана от екип, така че React екип и Vue екип все още споделят едни и същи цветове, разстояние и движение.
Изолирайте CSS
Предотвратете изтичането на стилове между екипи с последователен подход: конвенции за именуване като BEM, CSS модули, CSS-in-JS или Shadow DOM за уеб компоненти. Изберете една конвенция за целия продукт и мъх за него.
Политика за надграждане
Съгласете се колко много може да изостане даден екип, например не повече от една основна версия, и използвайте семантично управление на версиите, така че екипите да знаят кога промените се повреждат. Проследявайте коя версия използва всеки микро-frontend в споделено табло за управление.
Уловете дрифта автоматично
Тестовете за визуална регресия на ключови екрани, правилата за мъх, които забраняват необработените стойности на цветовете и интервалите, и прегледите на дизайна на споделени повърхности (заглавки, навигация, проверка) улавят несъответствията, преди потребителите да ги видят.
Ключове Principle, които трябва да запомните
- Независимото внедряване прави потребителския интерфейс вероятен
- Споделяйте токени и компоненти като пакети с версии
- Изолирайте CSS с един последователен подход
- Съгласете се с политика за надграждане и проследявайте версиите
- Използвайте визуални регресионни тестове и правила за мъх
Често задавани въпроси
Източници
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org