На чем в проекте написаны Micro Frontends

Архитектура Micro Frontends в проекте

В современном проекте Micro Frontends реализованы с использованием комбинации технологий, что позволяет достичь гибкости, независимости команд и эффективного масштабирования. Основная архитектура построена на следующих ключевых технологиях и подходах:

Основные технологии и подходы

1. React как основной фреймворк для UI-компонентов Большинство независимых модулей (микрофронтов) разработаны с использованием React 18+ с поддержкой современных функций, таких как:
   • Concurrent Features для оптимизации рендеринга
   • React Server Components для гибридного рендеринга
   • Хуки (hooks) как стандартный подход к состоянию и жизненному циклу

// Пример структуры микрофронта на React
import { lazy, Suspense } from 'react';

const ProductCatalogMFE = lazy(() => import('@mfe/product-catalog'));
const UserProfileMFE = lazy(() => import('@mfe/user-profile'));

function AppShell() {
  return (
    <div className="app-container">
      <Suspense fallback={<LoadingSpinner />}>
        <Route path="/products" component={ProductCatalogMFE} />
        <Route path="/profile" component={UserProfileMFE} />
      </Suspense>
    </div>
  );
}

1. Webpack Module Federation для динамической интеграции Для сборки и динамического подключения модулей используется Webpack 5 Module Federation, который позволяет:
   • Независимо компилировать каждый микрофронт
   • Динамически загружать модули во время выполнения
   • Управлять зависимостями между микрофронтами

// Конфигурация Module Federation для микрофронта
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'productCatalog',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductCatalog': './src/components/ProductCatalog',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

1. TypeScript для статической типизации Все микрофронты разрабатываются с использованием TypeScript 4.9+, что обеспечивает:
   • Статическую проверку типов между независимыми модулями
   • Совместное использование типов через Shared Types Library
   • Улучшенную поддержку инструментов разработки

// Пример интерфейсов, общих для всех микрофронтов
export interface SharedUser {
  id: string;
  email: string;
  role: 'admin' | 'user';
}

export interface ProductEntity {
  sku: string;
  name: string;
  price: number;
  category: ProductCategory;
}

Организационная структура и инструменты

1. Инфраструктура и DevOps подходы
   • Монорепозиторий (Monorepo) с использованием Nx для управления зависимостями и скриптами сборки
   • Контейнеризация через Docker для независимой разработки и тестирования каждого микрофронта
   • CI/CD pipelines на основе GitLab CI для автоматического тестирования и развертывания

# Пример Docker конфигурации для микрофронта
version: '3.8'
services:
  mfe-product-catalog:
    build:
      context: ./mfe/product-catalog
      dockerfile: Dockerfile.dev
    ports:
      - '3001:3000'
    volumes:
      - './mfe/product-catalog:/app'

Коммуникация и состояние

1. Межмодульная коммуникация и управление состоянием
   • Событийная система на основе Custom Events для коммуникации между микрофронтами
   • Redux Toolkit с модульной структурой для управления состоянием внутри каждого микрофронта
   • React Context для передачи данных на верхнем уровне (App Shell)

// Пример событийной коммуникации между микрофронтами
export function emitCartUpdate(eventData) {
  const event = new CustomEvent('cart-updated', {
    detail: { items: eventData.items, total: eventData.total },
    bubbles: true,
  });
  document.dispatchEvent(event);
}

// Подписчик в другом микрофронте
document.addEventListener('cart-updated', (event) => {
  updateHeaderCartCounter(event.detail.total);
});

Стилизация и UI

1. Стилизация и UI компоненты
   • CSS Modules и Sass для изолированных стилей каждого микрофронта
   • Shared UI Library на основе Storybook для общих компонентов (кнопки, формы, модалки)
   • Tailwind CSS для утилитарных стилей в некоторых модулях

Тестирование и качество

1. Тестирование и обеспечение качества
   • Cypress для интеграционного и E2E тестирования взаимодействия микрофронтов
   • Vitest и React Testing Library для unit тестирования компонентов
   • ESLint и Prettier с общими конфигурациями для всех модулей

// Пример интеграционного теста с Cypress
describe('Micro Frontends Integration', () => {
  it('should load product catalog MFE correctly', () => {
    cy.visit('/products');
    cy.get('[data-testid="product-grid"]').should('be.visible');
    cy.contains('Product Catalog').should('exist');
  });
});

Особенности реализации

Ключевой особенностью нашей архитектуры является гибридный подход к рендерингу:

• Клиентский рендеринг для интерактивных модулей (админка, личный кабинет)
• SSR (Server-Side Rendering) для SEO-оптимизированных модулей (каталог товаров, статьи)
• Edge Computing через Cloudflare Workers для географически распределенного рендеринга

Эта многоуровневая архитектура позволяет нам масштабировать разработку (10+ независимых команд), обеспечивать быстрое время загрузки (средний LCP < 1.2s) и поддерживать высокую надежность (изоляция ошибок между модулями). Каждый микрофронт имеет автономный цикл разработки, но интегрируется через четкие API контракты и общие инфраструктурные решения.