Архитектура микрофронтендов

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

Основные принципы микрофронтендов

  1. Независимость модулей Каждый микрофронтенд обладает собственной кодовой базой, состоянием и зависимостями. Это позволяет обновлять отдельные части приложения без затрагивания остальных.

  2. Изоляция стилей и зависимостей Использование Preact в сочетании с модульными стилями и CSS-in-JS обеспечивает минимизацию конфликтов. Модули могут подключать собственные версии библиотек, не влияя на глобальное пространство.

  3. Композиция через контейнер Основное приложение или «контейнер» выступает как оболочка, которая подгружает микрофронтенды и управляет их жизненным циклом. Preact позволяет эффективно рендерить компоненты динамически, используя ленивую загрузку через preact.lazy() и Suspense.

Интеграция микрофронтендов с Preact

1. Использование модульных сборок Каждый микрофронтенд компилируется отдельно через сборщик (Vite, Webpack, Rollup) в формат ES-модулей. Контейнер динамически импортирует их:

import { h, render } from 'preact';

async function loadMicroFrontend(url, mountPoint) {
  const { default: MicroApp } = await import(url);
  render(<MicroApp />, document.querySelector(mountPoint));
}

2. Коммуникация между микрофронтендами Для обмена данными между модулями используется:

  • События DOM: создание кастомных событий CustomEvent.
  • Общий стор: библиотека типа Redux или Zustand может использоваться как глобальное состояние.
  • Сервис-воркеры и локальное хранилище: для передачи состояния между изолированными микрофронтендами без прямой зависимости.

3. Роутинг и маршрутизация Preact Router позволяет каждому микрофронтенду иметь свой локальный роутинг. Контейнер управляет только базовой маршрутизацией, а микрофронтенды отвечают за внутренние пути.

import { Router } from 'preact-router';
import Home from './Home';
import Dashboard from './Dashboard';

const App = () => (
  <Router>
    <Home path="/" />
    <Dashboard path="/dashboard/*" />
  </Router>
);

Структура проекта

Проект микрофронтендов может выглядеть следующим образом:

/container
  /src
    index.js
    App.js
/microfrontend-header
  /src
    Header.js
/microfrontend-dashboard
  /src
    Dashboard.js

Каждый микрофронтенд компилируется независимо, а контейнер загружает их через динамический импорт.

Оптимизация и производительность

  • Ленивая загрузка компонентов через preact.lazy снижает время первой загрузки.
  • Минимизация зависимостей: каждый микрофронтенд должен включать только необходимые пакеты, чтобы избежать дублирования.
  • Кэширование модулей: использование HTTP-кэша или service workers позволяет ускорить повторную загрузку микрофронтендов.

Управление состоянием

Несмотря на независимость, микрофронтенды часто требуют синхронизации состояния:

  • Локальное состояние: Preact Hooks (useState, useReducer) для модульного управления.
  • Глобальное состояние: Zustand, Redux или Context API контейнера. Важно избегать тесной связи между модулями, сохраняя изоляцию.

Преимущества подхода

  • Масштабируемость разработки команд.
  • Возможность постепенной миграции больших приложений.
  • Независимый деплой отдельных частей.
  • Упрощение поддержки и обновления UI-компонентов.

Ограничения

  • Более сложная архитектура сборки и деплоя.
  • Увеличение объема клиентских запросов при загрузке нескольких микрофронтендов.
  • Требования к согласованности UI и общих стилей между командами.

Архитектура микрофронтендов с Preact сочетает лёгкость и высокую производительность с модульностью и независимостью разработки, делая её удобной для крупных проектов с распределёнными командами.

Оглавление