Изучал ли микрофронтенд

Микрофронтенды (Micro-Frontends)

Микрофронтенды (MFE) — это архитектурный подход, при котором фронтенд-приложение разбивается на несколько независимых, слабо связанных модулей. Это аналог микросервисов, но для фронтенда.

Основная идея

Инстеад одного монолитного приложения, мы создаём несколько небольших приложений, которые:

• Разрабатываются независимо
• Развёртываются отдельно
• Используют свои технологии
• Интегрируются в runtime

Монолит:
┌─────────────────────────┐
│   Фронтенд приложение   │
│   (React, Vue, Angular) │
│   Один репозиторий      │
└─────────────────────────┘

Микрофронтенды:
┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│  Header MFE  │  │  Products    │  │  Cart MFE    │
│  (React)     │  │  MFE (Vue)   │  │  (Svelte)    │
└──────────────┘  └──────────────┘  └──────────────┘
        ↓               ↓                    ↓
    ┌─────────────────────────────────────┐
    │   Контейнерное приложение           │
    │   (Main Shell/Host)                 │
    └─────────────────────────────────────┘

Подходы реализации

1. Module Federation (Webpack 5+)

Современный стандарт для микрофронтендов:

// webpack.config.js в Host приложении
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        header: 'header@http://localhost:3001/remoteEntry.js',
        products: 'products@http://localhost:3002/remoteEntry.js',
        cart: 'cart@http://localhost:3003/remoteEntry.js'
      },
      shared: ['react', 'react-dom'] // Общие зависимости
    })
  ]
};

// webpack.config.js в Header MFE
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'header',
      filename: 'remoteEntry.js',
      exposes: {
        './Header': './src/Header'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

// Использование в Host приложении
import Header from 'header/Header';
import Products from 'products/Products';
import Cart from 'cart/Cart';

export function App() {
  return (
    <>
      <Header />
      <Products />
      <Cart />
    </>
  );
}

2. iFrame (Изоляция)

Каждый микрофронтенд в отдельном iframe:

<div id="app">
  <iframe src="http://localhost:3001"></iframe>
  <iframe src="http://localhost:3002"></iframe>
</div>

Плюсы: полная изоляция, не конфликтуют стили/JS Минусы: сложность коммуникации, производительность

3. Web Components

Используем Custom Elements для интеграции:

// Header MFE как Web Component
class HeaderElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<header>My Header</header>`;
  }
}

customElements.define('app-header', HeaderElement);

<!-- Использование -->
<app-header></app-header>
<app-products></app-products>
<app-cart></app-cart>

4. Динамический импорт скриптов

Загружаем MFE как отдельные скрипты:

<script src="http://localhost:3001/bundle.js"></script>
<script src="http://localhost:3002/bundle.js"></script>

<div id="header-root"></div>
<div id="products-root"></div>
<div id="cart-root"></div>

<script>
  // Каждый MFE монтирует себя в свой root
  window.HeaderMFE.render(document.getElementById('header-root'));
  window.ProductsMFE.render(document.getElementById('products-root'));
</script>

Коммуникация между MFE

Event-based коммуникация

// Header MFE
function handleUserLogin(user) {
  window.dispatchEvent(new CustomEvent('user-logged-in', {
    detail: { user }
  }));
}

// Cart MFE
window.addEventListener('user-logged-in', (event) => {
  const user = event.detail.user;
  updateCart(user.id);
});

Shared State (Event Bus)

// shared-store.js
class EventBus {
  constructor() {
    this.events = {};
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }
}

export const bus = new EventBus();

// В Header MFE
import { bus } from './shared-store';

bus.emit('user-logged-in', { userId: 123 });

// В Cart MFE
import { bus } from './shared-store';

bus.on('user-logged-in', (data) => {
  console.log('User logged in:', data);
});

Плюсы микрофронтендов

• Независимость — разные команды работают на разных MFE
• Масштабируемость — каждый MFE можно масштабировать отдельно
• Технологическая гибкость — разные фреймворки (React, Vue, Svelte)
• Развёртывание — обновлять можно отдельные модули
• Производительность — ленивая загрузка MFE при необходимости

Минусы микрофронтендов

• Сложность — архитектура сложнее, чем монолит
• Размер бандла — если не правильно настроить shared зависимости
• Коммуникация — need to manage communication between modules
• Debugging — сложнее искать ошибки
• Потребление памяти — каждый MFE может загружать свои зависимости

Когда использовать?

✅ Хорошо подходит для:

• Больших приложений с независимыми командами
• Когда разные части приложения используют разные стеки
• Проектов, где нужны независимые развёртывания

❌ Не подходит для:

• Маленьких приложений
• Когда команда одна
• Когда нужна быстрая разработка без усложнения архитектуры

Примеры в production

• Webpack Module Federation — используется в крупных компаниях (Airbnb, Shopify)
• Single-spa — фреймворк для микрофронтендов на Single Page Application
• Bit — платформа для разработки и обмена компонентами между проектами

Заключение

Микрофронтенды — это архитектурный паттерн для разработки больших, масштабируемых приложений. Module Federation в Webpack 5 — это современный стандарт, который значительно упрощает реализацию. Однако, это сложный подход, который имеет смысл только для больших проектов с независимыми командами разработки.