Как поможет Micro Frontend при добавлении каждой новой фичи в релиз?

Как Micro Frontend помогает при добавлении каждой новой фичи в релиз

Micro Frontend (MFE) — это архитектурный подход, при котором большое фронтенд приложение разбивается на несколько меньших, независимых приложений, каждое из которых управляется отдельной командой. Это решает множество проблем, возникающих при добавлении новых фич.

Проблема без Micro Frontend

Монолитная архитектура:

• Одна большая кодовая база на 100k+ строк
• Все разработчики работают в одном репозитории
• Каждая новая фича требует изменения основного бандла
• Конфликты при мерже PR между разными фичами
• Длительные и рискованные релизы
• Невозможно развернуть одну фичу независимо

Монолит (проблема):
┌─────────────────────────────────────┐
│  Весь фронтенд (все фичи)          │
│  ├── Фича А                          │
│  ├── Фича Б                          │
│  ├── Фича В                          │
│  └── Шеринг кода (сложно)            │
└─────────────────────────────────────┘
Один релиз = весь код

Способ 1: Независимое развитие фич

Micro Frontend позволяет каждой команде развивать свою фичу отдельно:

Micro Frontend (решение):
┌──────────────────────────────────────────┐
│ Host Application (основной контейнер)     │
│ ┌──────────────────────────────────────┐ │
│ │ Feature A Module (Team A)            │ │
│ │ ├── Components                        │ │
│ │ ├── Services                          │ │
│ │ └── Tests                             │ │
│ └──────────────────────────────────────┘ │
│ ┌──────────────────────────────────────┐ │
│ │ Feature B Module (Team B)            │ │
│ │ ├── Components                        │ │
│ │ ├── Services                          │ │
│ │ └── Tests                             │ │
│ └──────────────────────────────────────┘ │
└──────────────────────────────────────────┘
Каждая фича развивается независимо

Пример с Module Federation (Webpack 5):

// Host app (основное приложение)
const config = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        // Загружаем фичи из удалённых приложений
        featureA: 'featureA@http://localhost:3001/remoteEntry.js',
        featureB: 'featureB@http://localhost:3002/remoteEntry.js'
      },
      shared: ['react', 'react-dom']  // Общие зависимости
    })
  ]
};

// Feature A приложение (разработка Team A)
const config = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'featureA',
      filename: 'remoteEntry.js',
      exposes: {
        // Экспортируем компоненты для Host
        './App': './src/App.jsx'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Способ 2: Независимые релизы

Каждая фича может быть развёрнута отдельно без перепаковки основного приложения:

# Team A развернула фичу A (фича B не затронута)
git push origin feature/payment
npm run build
deployed to http://features.example.com/featureA/v1.2.3

# Host приложение просто обновляет URL
// remoteEntry URL меняется, но основной код остаётся
featureA: 'featureA@http://features.example.com/featureA/v1.2.3/remoteEntry.js'

# Team B параллельно работает над своей фичей
git push origin feature/analytics
npm run build
deployed to http://features.example.com/featureB/v2.1.0

Способ 3: Избегание конфликтов при мерже

Без MFE:

// main.js (постоянные конфликты)
function App() {
  return (
    <>
      <Feature_A /> {/* Team A добавила */}
      <Feature_B /> {/* Team B добавила */}
      <Feature_C /> {/* Team C добавила */}
      {/* Каждое изменение = риск конфликта мерже */}
    </>
  );
}

С MFE:

// Host App (структурировано, нет конфликтов)
const routes = [
  { path: '/payment', module: featureA },
  { path: '/analytics', module: featureB },
  { path: '/notifications', module: featureC }
];

// Каждая фича изолирована в отдельном репозитории
// Конфликты мерже практически исключены

Способ 4: Независимое тестирование

Каждая команда тестирует свою фичу отдельно:

// Team A: Feature A tests
describe('Feature A', () => {
  test('Payment form validation', () => {
    render(<PaymentForm />);
    expect(screen.getByText('Pay Now')).toBeInTheDocument();
  });
});

// Team B: Feature B tests
describe('Feature B', () => {
  test('Analytics tracking', () => {
    trackEvent('page_view');
    expect(analyticsService.events.length).toBe(1);
  });
});

// Тесты не конфликтуют, можно запускать параллельно

Способ 5: Контролируемые зависимости

Каждая фича может иметь свои версии зависимостей (shared определяется явно):

// Host
new ModuleFederationPlugin({
  shared: {
    react: { singleton: true, requiredVersion: '^18.0.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
  }
})

// Feature A может использовать другие версии других пакетов
new ModuleFederationPlugin({
  shared: {
    'axios': { singleton: false },  // Не шарим axios
    '@material-ui/core': {}          // Шарим MUI
  }
})

Способ 6: Динамическая загрузка фич

Фичи загружаются динамически при необходимости:

// Host App
import { lazy } from 'react';

const FeatureA = lazy(() => import('featureA/App'));
const FeatureB = lazy(() => import('featureB/App'));

function App({ selectedFeature }) {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      {selectedFeature === 'A' && <FeatureA />}
      {selectedFeature === 'B' && <FeatureB />}
    </Suspense>
  );
}

Преимущества:

• Изначальный бандл размер меньше
• Фичи загружаются при необходимости
• Отключённые фичи не загружаются вообще

Способ 7: Управление версиями фич

Каждая фича имеет свою версию:

// Host App
const featureRegistry = {
  payment: {
    url: 'http://features.example.com/payment/v1.2.3/remoteEntry.js',
    required: true
  },
  analytics: {
    url: 'http://features.example.com/analytics/v2.1.0/remoteEntry.js',
    required: false,
    fallback: null
  },
  notifications: {
    url: 'http://features.example.com/notifications/v0.9.5/remoteEntry.js',
    required: false,
    fallback: <FallbackNotifications />
  }
};

// Развёртывание:
// 1. Новая версия Payment поднята на сервер
// 2. Host просто обновляет URL (сразу же доступна)
// 3. Остальные фичи не затронуты

Способ 8: Масштабирование команд

Каждая команда может работать в своем темпе:

Do (Dependecies & Deployment)
┌─────────────────┐
│  Team A         │
│  ├─ Dev: 2-3    │
│  ├─ Repo: A     │
│  └─ Release: ↑  │
└─────────────────┘

┌─────────────────┐
│  Team B         │
│  ├─ Dev: 4-5    │
│  ├─ Repo: B     │
│  └─ Release: ↑  │
└─────────────────┘

┌─────────────────┐
│  Team C         │
│  ├─ Dev: 3-4    │
│  ├─ Repo: C     │
│  └─ Release: ↑  │
└─────────────────┘

Все команды работают параллельно
Все релизы независимы

Способ 9: A/B тестирование фич

Разные пользователи могут видеть разные версии:

// Host App
function loadFeatureVersion(featureName, userId) {
  const versions = {
    payment: {
      'v1.0.0': 'http://...',  // 50% пользователей
      'v1.1.0': 'http://...'   // 50% пользователей
    }
  };
  
  const userGroup = userId % 2;
  const version = userGroup === 0 ? 'v1.0.0' : 'v1.1.0';
  
  return versions[featureName][version];
}

// Каждая версия может быть развёрнута независимо
// A/B тест проводится без переразвёртывания всего приложения

Способ 10: Откат фич без откатывания приложения

Если фича сломалась, её можно откатить назад:

// Host App
const featureVersions = {
  payment: 'v1.2.3'  // Текущая версия
};

// Произошла ошибка в v1.2.3
// Быстро меняем URL обратно на v1.2.2
const featureVersions = {
  payment: 'v1.2.2'  // Откатились
};

// Остальное приложение работает как ни в чём не бывало
// Team A может спокойно разобраться с проблемой в v1.2.3

Сравнение: Монолит vs Micro Frontend

Выводы

• Micro Frontend позволяет разным командам работать параллельно
• Каждая фича может быть развёрнута независимо без перезагрузки основного приложения
• Конфликты мерже практически исключены благодаря изоляции кода
• Module Federation (Webpack 5) — основной инструмент для MFE -릴зы становятся безопаснее и быстрее благодаря независимости
• Масштабирование команд становится линейным, а не экспоненциальным
• A/B тесты и откаты фич становятся простыми и безопасными
• MFE особенно полезна для крупных приложений с несколькими командами