Что такое Micro-frontends
Micro-frontends -- архитектурный подход, при котором фронтенд-приложение разбивается на независимые части, каждая из которых разрабатывается, деплоится и масштабируется отдельной командой.
Монолит vs Micro-frontends
MONOLITH FRONTEND:
┌──────────────────────────────────────────┐
│ Single SPA │
│ ┌────────┐ ┌────────┐ ┌──────────┐ │
│ │ Search │ │ Catalog│ │ Checkout │ │
│ │ Module │ │ Module │ │ Module │ │
│ └────────┘ └────────┘ └──────────┘ │
│ Один репозиторий │
│ Один build │
│ Один деплой │
└──────────────────────────────────────────┘
MICRO-FRONTENDS:
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Search │ │ Catalog │ │ Checkout │
│ App │ │ App │ │ App │
│ │ │ │ │ │
│ Team A │ │ Team B │ │ Team C │
│ React │ │ Vue │ │ Svelte │
│ CI/CD #1 │ │ CI/CD #2 │ │ CI/CD #3 │
└──────────┘ └──────────┘ └──────────┘
│ │ │
└──────────────┼──────────────┘
▼
┌──────────────────┐
│ Shell / Host │
│ Application │
└──────────────────┘
Когда использовать
| Фактор | Micro-frontends | Монолит |
|---|---|---|
| Размер команды | >15-20 разработчиков | <15 разработчиков |
| Скорость деплоя | Независимый деплой каждой части | Общий release cycle |
| Технологическое разнообразие | Разные фреймворки возможны | Один фреймворк |
| Автономность команд | Каждая команда владеет фичей end-to-end | Общая кодовая база |
| Сложность | Высокая начальная сложность | Низкая начальная сложность |
Способы интеграции
Обзор подходов
Build-time: Runtime:
┌──────────────┐ ┌──────────────────────┐
│ npm packages │ │ Module Federation │
│ (publish → │ │ iframe │
│ install → │ │ Web Components │
│ build) │ │ single-spa │
└──────────────┘ │ Edge-Side Includes │
└──────────────────────┘
Минус: нужен rebuild Плюс: независимый деплой
при обновлении Минус: сложнее настроить
Module Federation
Module Federation (Webpack 5 / Vite) -- механизм для runtime-загрузки JavaScript-модулей из отдельных приложений.
Архитектура Module Federation
┌─────────────────────────────────────────────┐
│ HOST APPLICATION │
│ │
│ ┌──────────┐ ┌────────────────────────┐ │
│ │ Own Code │ │ Remote Containers │ │
│ │ │ │ │ │
│ │ │ │ ┌────────┐ ┌────────┐ │ │
│ │ │ │ │Remote 1│ │Remote 2│ │ │
│ │ │ │ │(Search)│ │(Cart) │ │ │
│ │ │ │ └───┬────┘ └───┬────┘ │ │
│ └──────────┘ └─────┼──────────┼───────┘ │
│ │ │ │
└──────────────────────┼──────────┼───────────┘
│ │
┌────────────┘ └──────────┐
▼ ▼
https://search.cdn/ https://cart.cdn/
remoteEntry.js remoteEntry.js
Shared Dependencies
Host загружает React v18
Remote 1 запрашивает React v18 → использует из Host (shared)
Remote 2 запрашивает React v17 → загружает свою версию (fallback)
Правило: shared dependencies с singleton: true
загружаются один раз и переиспользуются.
| Плюсы | Минусы |
|---|---|
| Runtime интеграция | Сложность конфигурации |
| Shared dependencies | Проблемы с версиями shared libs |
| Lazy loading из коробки | Webpack/Vite зависимость |
| Типизация через d.ts | Runtime ошибки при несовместимости |
Web Components
Web Components -- нативный браузерный стандарт для создания переиспользуемых компонентов с инкапсуляцией.
Архитектура
┌──────────────────────────────────────────┐
│ Shell Application │
│ │
│ <search-widget> │
│ ┌──────────────────────────┐ │
│ │ Shadow DOM (isolated) │ │
│ │ ┌────────────────────┐ │ │
│ │ │ Styles (scoped) │ │ │
│ │ │ <input type="text">│ │ │
│ │ │ <ul>results</ul> │ │ │
│ │ └────────────────────┘ │ │
│ └──────────────────────────┘ │
│ </search-widget> │
│ │
│ <cart-widget> │
│ ┌──────────────────────────┐ │
│ │ Shadow DOM (isolated) │ │
│ └──────────────────────────┘ │
│ </cart-widget> │
└──────────────────────────────────────────┘
| Технология | Описание |
|---|---|
| Custom Elements | Свои HTML-теги () |
| Shadow DOM | Инкапсуляция стилей и разметки |
| HTML Templates | Шаблоны ( |