Как спроектировать фронтенд-реализацию микрофронтенда по техническому заданию: как определить структуру, компоненты, их взаимодействие и подходящие технологии?

Проектирование микрофронтенда начинается не с выбора фреймворка, а с анализа технического задания и выделения бизнес-доменов. Нужно понять, какие части приложения меняются независимо, какие команды будут их поддерживать и где проходят границы ответственности. Хорошая декомпозиция уменьшает связанность и позволяет деплоить части отдельно.

Шаги проектирования

1. Разбей ТЗ на домены: каталог, корзина, профиль, оплата.
2. Определи shell-приложение: навигация, авторизация, общие стили.
3. Выбери способ интеграции: Module Federation, iframe, Web Components, qiankun.
4. Опиши контракты: входные props, события, общие API и токены.
5. Зафиксируй общие зависимости и стратегию версионирования.

Пример контракта микрофронтенда

// shell передаёт в микрофронтенд пользователя и колбэк навигации
const mount = (el, { user, navigate, apiClient }) => {
  const root = ReactDOM.createRoot(el);
  root.render(<Catalog user={user} onOpen={navigate} api={apiClient} />);
  return () => root.unmount();
};

export { mount };

Выбор технологий

• Module Federation подходит, если команды используют Webpack и хотят общий runtime.
• Web Components дают изоляцию, но усложняют обмен состоянием.
• iframe максимально изолирован, но плохо интегрируется по UX и роутингу.
• Shell на React Router или Next.js удобен для маршрутизации между частями.

Важно заранее договориться о дизайн-системе, общих библиотеках и способе передачи авторизации. Иначе микрофронтенды быстро превращаются в набор несогласованных приложений.

Итог: микрофронтенды стоит применять, когда несколько команд должны независимо развивать крупное приложение, а границы доменов и контракты можно чётко зафиксировать.