Как работает микрофронтенд в классическом виде?

Что проверяют

Понимаете ли вы, как независимые приложения собираются в одну страницу во время работы и какую цену за это платит команда. Следом обычно спрашивают, как микрофронтенды общаются между собой и что делать с общими зависимостями вроде React.

Как отвечать

Классическая схема держится на оболочке (shell, host) и наборе удалённых приложений (remotes). Каждое приложение принадлежит одной команде, отвечает за бизнес-область (каталог, корзина, личный кабинет), собирается и деплоится отдельно.

Как это работает при загрузке страницы:

• оболочка: грузится первой, держит верхнеуровневый роутинг, шапку, авторизацию и знает адреса удалённых приложений, часто из манифеста, который меняется без пересборки оболочки;
• загрузка: по URL оболочка подтягивает бандл нужного приложения. В single-spa это registerApplication с условием активности, в Module Federation это remoteEntry.js и динамический импорт модуля;
• жизненный цикл: приложение отдаёт функции bootstrap, mount и unmount, оболочка монтирует его в свой контейнер и размонтирует при уходе со страницы;
• общие зависимости: в Module Federation их объявляют в shared, React с флагом singleton, иначе две копии сломают хуки и контекст.

Общение между частями: URL и параметры маршрута, CustomEvent на window или тонкая шина событий, данные от оболочки через пропсы. Общего глобального стора стоит избегать, он связывает команды обратно в монолит. Стили изолируют CSS Modules, префиксами или Shadow DOM, а единый вид держит общая дизайн-система.

Есть и другие варианты композиции: iframe (полная изоляция, но тяжёлая коммуникация), сборка на сервере или на CDN, веб-компоненты.

Где спотыкаются

Режут приложение по техническим слоям, «компоненты» и «API», а не по бизнес-областям. Тогда любая фича требует релиза сразу нескольких частей.

Подключают микрофронтенды как npm-пакеты на этапе сборки. Получается модульный монолит: независимый деплой пропадает.

Хвалят свободу выбора фреймворка и не упоминают цену: несколько рантаймов в бандле, разный UX и сложная отладка. Разнородный стек обычно терпят при миграции, а не планируют.