Що робить підхід "Micro-frontend" з React?

ReactSenior~3 хв читання

Що таке Micro-frontend

Micro-frontend - це архітектурний підхід, у якому фронтенд-застосунок ділиться на безліч маленьких, автономних частин - кожна з яких реалізує свою фічу, збирається і розгортається незалежно, а в браузері ці частини "збираються" в єдине ціле.

Аналогія:

Бекенд-світ: Microservices Фронтенд-світ: Micro-frontends

Головна ідея

Звичайний SPA з часом стає "монолітом":

складний, важко оновлювати;
кілька команд заважають одна одній;
один деплой ламає все.

Micro-frontend вирішує це тим, що:

Кожна команда володіє своїм фрагментом інтерфейсу (feature / domain);
Ці фрагменти інтегруються у спільну оболонку (Shell / Container App);
Кожен фрагмент можна деплоїти незалежно.

Структура Micro-frontend-системи

javascript

┌──────────────────────────┐
│       Shell / Host       │  ← React-застосунок-контейнер
│ ┌──────────────────────┐ │
│ │  Micro-app #1       │ │  ← незалежний React (або Vue, Svelte)
│ ├──────────────────────┤ │
│ │  Micro-app #2       │ │
│ ├──────────────────────┤ │
│ │  Micro-app #3       │ │
│ └──────────────────────┘ │
└──────────────────────────┘

Кожен Micro-app може мати:

свій власний React і залежності,
окремий CI/CD pipeline,
власний репозиторій,
незалежний релізний цикл.

Як це працює в React

1. Host (контейнерний застосунок)

Головний React-застосунок, який:

рендерить "каркас" (layout, navbar, router),
динамічно довантажує мікрофронтенди,
пов'язує їх між собою (навігація, спільний контекст).

2. Remote (мікрозастосунки)

Кожен мікрозастосунок експортує свої компоненти (наприклад, сторінку або віджет).

3. Module Federation (Webpack 5)

Технічний механізм, який дозволяє одному застосунку завантажувати модулі з іншого прямо під час виконання.

Приклад: структура з Webpack Module Federation

javascript

/shell-app
  webpack.config.js
  src/App.jsx

/profile-app
  webpack.config.js
  src/Profile.jsx

/dashboard-app
  webpack.config.js
  src/Dashboard.jsx

Shell (host)

javascript

// shell/webpack.config.js
new ModuleFederationPlugin({
  name: 'shell',
  remotes: {
    profile: 'profileApp@http://localhost:3001/remoteEntry.js',
    dashboard: 'dashboardApp@http://localhost:3002/remoteEntry.js',
  },
});

javascript

// shell/src/App.jsx
import Profile from "profile/Profile";
import Dashboard from "dashboard/Dashboard";

export default function App() {
  return (
    <div>
      <h1>Головна оболонка</h1>
      <Profile />
      <Dashboard />
    </div>
  );
}

Тепер Profile і Dashboard - це окремі React-застосунки, що довантажуються за URL, але працюють в одному UI.

Переваги micro-frontend архітектури

Перевага	Опис
Незалежна розробка	Команди можуть працювати і релізити автономно
Різні технології	Можна використовувати React, Vue, Svelte в різних зонах
Незалежний деплой	Оновлення одного мікрофронтенда не вимагає релізу всієї системи
Швидший CI/CD	Маленькі збірки, окремі пайплайни
Ізоляція	Помилка в одному модулі не ламає весь UI
Спрощена масштабованість	Команди можуть володіти своїми доменами (auth, billing, dashboard тощо)

Недоліки і складнощі

Проблема	Що потрібно враховувати
Інтеграція	Спільні стилі, дизайн-система, роутинг, шини подій
Спільний state	Складно ділити Redux/Zustand між мікрофронтендами
Розмір бандла	Дублювання залежностей (React, libs) без оптимізації
Деплой-оркестрація	Потрібно керувати версіями і сумісністю модулів
Безпека та ізоляція	Контролювати доступ, sandbox, CORS
Performance	Багато окремих завантажень = більше запитів

Способи інтеграції micro-frontends

Підхід	Як працює	Приклад
Module Federation (Webpack 5)	Динамічне завантаження JS-модулів на клієнті	`shell` + `remoteEntry.js`
Single-SPA	Мета-фреймворк для реєстрації під-застосунків	`registerApplication()`
iframe-based	Кожен мікрофронтенд в iframe (проста ізоляція, але слабка інтеграція)	`<iframe src="...">`
Runtime Composition (Import Maps)	Використання системних імпортів ES-модулів	`importmap.json`
Server-Side Composition	Сервер "склеює" HTML-фрагменти	Edge-composition, Tailor.js

Приклади в реальних проєктах

Компанія	Де використовується	Особливості
Netflix	Головна сторінка, "Rows" і "Player" - окремі мікрофронтенди	Швидкі незалежні релізи
Spotify	Розділи Library, Search, Player	Різні команди, спільний shell
Amazon	Product, Cart, Reviews	Окремі JS-бандли під кожен домен
GitHub	Pages і Settings - незалежні мікрофронтенди	Перехід між командами без моноліту

Підсумок

Що	Опис
Ідея	Ділити фронтенд на незалежні, автономні модулі
Структура	`Shell (Host)` + `Remotes (Micro-apps)`
Інтеграція	Через Module Federation / Single-SPA / iframes
Ціль	Масштабованість, незалежність, гнучкість команд
Плюси	Ізоляція, швидкі релізи, різна технологія
Мінуси	Спільні стани, роутинг, версії, інтеграція

Головна думка: Micro-frontend - це спосіб будувати React-екосистему як набір незалежних мікросервісів, де кожна частина UI - окремий застосунок зі своїм життям, але користувачу це виглядає як єдине ціле.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.