Практика micro-frontends полезна тем, что очень быстро убирает романтику из идеи декомпозиции. Как только продукт делится на vertical slices, на поверхность выходят routing, shared dependencies, release coordination и вопрос, кто за что действительно отвечает.
Эта глава хорошо показывает, что композиция фронтенда требует не только технических трюков, но и устойчивой операционной модели. Именно здесь становится понятно, почему миграция с монолитного SPA - это не просто разрезание кода, а перестройка интеграции между командами и частями интерфейса.
В review и интервью этот материал полезен, когда нужно отличать полезную декомпозицию от дорогой иллюзии независимости. Он помогает обсуждать shell, shared contracts, release independence и ту границу, после которой автономия команд начинает конфликтовать с цельностью пользовательского опыта.
Практическая польза главы
Практика проектирования
Переводите знания о операционной модели micro-frontends и интеграционных компромиссах в конкретные решения по composition, ownership и runtime-поведению клиентской системы.
Качество решений
Оценивайте архитектуру по измеримым эффектам: скорость delivery, стабильность UI, observability, цена изменений и эксплуатационные риски.
Interview articulation
Стройте ответ как цепочку problem -> constraints -> architecture -> trade-offs -> migration path, с явной аргументацией frontend-выбора.
Trade-off framing
Фиксируйте компромиссы вокруг операционной модели micro-frontends и интеграционных компромиссах: масштаб команды, технический долг, performance budget и долгосрочная поддержка.
Официальный источник
Micro Frontends in Action
Книга про декомпозицию фронтенда на feature-driven модули и практические стратегии migration from monolith.
Micro Frontends in Action
Авторы: Michael Geers
Издательство: Manning Publications, 2020
Объём: 296 страниц
Michael Geers о декомпозиции фронтенда на независимые vertical slices: composition, интеграция команд и миграция с монолитного SPA.
Главная идея книги
Micro frontend - это не про «много маленьких React-приложений», а про независимые продуктовые вертикали с четкими границами ответственности. Команды получают право на автономные релизы, но обязаны соблюдать общий контракт платформы: navigation, identity, дизайн-система и observability.
Модели композиции
Server-side composition
Shell собирает страницу на сервере и отдает единый HTML. Сильные стороны: SEO, predictable first paint, централизованный контроль маршрутизации.
Client-side runtime composition
Модули загружаются и монтируются в браузере. Плюсы: независимые релизы команд, быстрые экспериментальные поставки.
Build-time composition
Сборка всех доменных модулей в единый артефакт. Проще стартовать, но ниже независимость команд при релизах.
Что должно быть общим слоем
Platform contract
- Routing rules и deep-link compatibility.
- Auth/session boundary и token propagation.
- Unified observability (logs, traces, frontend metrics).
- Design tokens и базовые UI primitives.
Командная модель
- Ownership по бизнес-доменам, а не по слоям UI.
- Автономный CI/CD для каждой vertical slice.
- Версионирование shared contracts + deprecation policy.
- Регулярные архитектурные review на границах модулей.
Практический migration roadmap
- Выделить bounded contexts во фронтенде: каталог, корзина, checkout, профиль и т.д.
- Ввести shell-контейнер и единые контракты: routing, auth, observability, design tokens.
- Переносить зоны постепенно (strangler pattern), не переписывая весь SPA за один релиз.
- Стабилизировать интеграцию через contract tests и версионирование shared APIs.
- Укрепить governance: ownership, SLA для shared layer, процесс breaking changes.
Антипаттерны
- Дробить фронтенд по UI-библиотекам вместо бизнес-доменов.
- Создать десятки shared-пакетов и потерять автономность команд.
- Не договориться о единых контрактах auth/routing/telemetry.
- Пытаться мигрировать весь legacy фронтенд одним big-bang релизом.
- Игнорировать performance budget и суммарный вес клиентских модулей.
Связанные главы
- Building Micro-Frontends - дает базовый фундамент: доменная декомпозиция, границы ответственности и стартовый набор platform-принципов для миграции.
- The Art of Micro Frontends - расширяет прикладной подход до уровня зрелой платформы: governance, orchestration и операционные практики на масштабе enterprise.
- Frontend Architecture for Design Systems - переносит идеи micro-frontends в командные процессы и архитектурные стандарты: contract discipline, DX и consistency UI-слоя.
- React.js: The Documentary - добавляет контекст экосистемы, в которой формировались многие micro-frontend практики и component-driven подход к разработке.
- Vite: The Documentary - показывает, почему скорость локального цикла и modern tooling критичны для независимых команд, выпускающих множество модулей.