Концепции микрофронтендов и компромиссы
Разберитесь, почему команды выбирают микрофронтенды, и изучите разделение подходов во время выполнения и сборки.
«Концепции микрофронтендов и компромиссы» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Что такое микрофронтенды
Микрофронтенды переносят принципы микросервисов на уровень пользовательского интерфейса. Одно веб-приложение разделяется на независимые части интерфейса, за которые отвечают отдельные команды: они самостоятельно владеют ими, разрабатывают и развёртывают их.
Стратегии интеграции
Существует три основные стратегии интеграции: во время сборки (пакеты npm), на стороне сервера (композиция на периферии) и во время выполнения (Module Federation, iframe и веб-компоненты).
Интеграция во время сборки
Публикуйте общие компоненты как пакеты npm. Это просто, но любое изменение требует повторной публикации и повторного развёртывания всех потребителей — это не настоящее независимое развёртывание.
// Team A publishes:
npm publish @company/design-system
// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independentИнтеграция во время выполнения с помощью Module Federation
Module Federation в Webpack 5 позволяет одному приложению (хосту) загружать компоненты другого приложения (удалённого приложения) во время выполнения — это настоящее независимое развёртывание.
Интеграция через iframe
Встраивайте микрофронтенды в iframe для максимальной изоляции. Плюсы: отсутствие конфликтов CSS/JS. Минусы: неудобный пользовательский интерфейс (прокрутка, фокус, размеры), сложный обмен состоянием и плохая оптимизация для SEO.
Веб-компоненты
Оборачивайте каждый микрофронтенд в пользовательский элемент. Это работает с любым фреймворком и обеспечивает нативную изоляцию, но не поддерживает специфичные для React возможности, такие как общий контекст.
// Remote team builds:
customElements.define('product-detail', ProductDetailElement);
// Host team embeds:
<product-detail product-id="123" />Компромиссы: преимущества
Независимое развёртывание (интерфейс одной команды можно развернуть, не затрагивая остальные), самостоятельность команд (возможность выбирать собственный стек и зависимости) и масштабируемость (команды работают параллельно без конфликтов в коде).
Компромиссы: затраты
Операционная сложность (больше репозиториев, конвейеров CI и развёртываний), дублирование пакетов (React загружается несколько раз без общего использования), накладные расходы на производительность и более сложная отладка на границах.
Когда выбирать микрофронтенды
Микрофронтенды особенно полезны, когда над одним продуктом работают несколько больших команд, для разных разделов нужны разные технологические стеки или разделы необходимо развёртывать полностью независимо.
Когда NOT выбирать микрофронтенды
Избегайте микрофронтендов в небольших командах (накладные расходы перевешивают преимущества), простых приложениях или при полном контроле над всем фронтендом — монорепозитории с Nx/Turborepo обычно вполне подходят.
Общая дизайн-система
Независимо от стратегии интеграции общая дизайн-система (опубликованная как пакет или предоставленная через Module Federation) обеспечивает визуальную согласованность всех микрофронтендов.
Быстрая проверка
Какой подход к интеграции обеспечивает действительно независимое развёртывание микрофронтендов во время выполнения?
Итоги
Микрофронтенды разделяют пользовательский интерфейс, обеспечивая самостоятельность команд и независимое развёртывание. Варианты интеграции варьируются от пакетов npm (просто, но не независимо) до Module Federation (во время выполнения, действительно независимо). Учитывайте операционные затраты: микрофронтенды подходят для крупных продуктов с несколькими командами, но усложняют небольшие проекты.
Часто задаваемые вопросы
Урок «Концепции микрофронтендов и компромиссы» бесплатный?
Да — полный текст урока «Концепции микрофронтендов и компромиссы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Концепции микрофронтендов и компромиссы»?
Разберитесь, почему команды выбирают микрофронтенды, и изучите разделение подходов во время выполнения и сборки. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Концепции микрофронтендов и компромиссы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Концепции микрофронтендов и компромиссы
- Module Federation с Webpack 5
- Общее состояние и маршрутизация между MFE
- Независимое развёртывание и конвейеры CI для MFE