Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить підхід "Micro-frontend" з React?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке 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 - окремий застосунок зі своїм життям,
> але користувачу це виглядає як **єдине ціле**.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати738 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.