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

Мікрофронтенд — це архітектурний підхід, при якому фронтенд-додаток розділений на кілька незалежних додатків (мікро-додатків), кожен з яких відповідає за свою частину функціональності. Ці додатки можуть розроблятися, тестуватися та розгортатися незалежно один від одного, але в підсумку об'єднуються в єдиний інтерфейс користувача.

Ключова ідея:

Мікрофронтенд — це застосування принципів архітектури мікросервісів до фронтенд-розробки. Кожна команда може працювати над своєю частиною додатка автономно, використовуючи свій власний стек технологій та випускаючи оновлення незалежно.

Основні концепції

Незалежні додатки

Кожен мікрофронтенд є автономним додатком зі своєю бізнес-логікою, стилями та залежностями. Його можна написати в будь-якому фреймворку (React, Vue, Angular тощо)

Ізоляція

Мікрофронтенди ізольовані один від одного: зміни в одному не повинні порушувати роботу інших. Це досягається через механізми інкапсуляції стилів, використовуючи Shadow DOM або CSS Modules.

Композиція

Існує оболонковий додаток (хост, контейнер), який об'єднує всі мікрофронтенди в єдиний інтерфейс. Він керує маршрутизацією та визначає, який мікрофронтенд показати на конкретному маршруті.

Незалежне розгортання

Кожен мікрофронтенд може оновлюватися та розгортатися окремо, не впливаючи на інші частини системи. Це прискорює цикл розробки та зменшує ризики.

Підходи до реалізації

Композиція на стороні сервера (SSI)

Мікрофронтенди збираються на стороні сервера за допомогою технологій, таких як Server-Side Includes (SSI), Edge-Side Includes (ESI) або шаблонізатори.

Плюси:

Проста реалізація
Хороша продуктивність (клієнт отримує готову сторінку)

Мінуси:

Складна взаємодія між мікрофронтендами на стороні клієнта
Менша гнучкість для динамічних оновлень

Інтеграція під час збірки

Мікрофронтенди публікуються як npm пакети та включаються в основний додаток під час збірки.

Плюси:

Легка інтеграція
Оптимізована збірка

Мінуси:

Втрата незалежності розгортання (необхідно перебудовувати весь додаток)
Не можна оновити один мікрофронтенд без перебудови

Інтеграція під час виконання через iframes

Кожен мікрофронтенд завантажується в окремому iframe.

Плюси:

Повна ізоляція (стилі, JavaScript, глобальні змінні)
Проста інтеграція

Мінуси:

Проблеми з продуктивністю
Складнощі з комунікацією та маршрутизацією
Погана доступність (a11y)

Інтеграція під час виконання через JavaScript (Module Federation)

Найсучасніший підхід: мікрофронтенди завантажуються динамічно під час виконання через Webpack Module Federation або подібні інструменти.

Плюси:

Незалежне розгортання
Спільні залежності (react, react-dom) завантажуються один раз
Гнучка композиція

Мінуси:

Складна настройка
Вимагає уважного управління версіями залежностей

Веб-компоненти

Мікрофронтенди реалізуються як Custom Elements (веб-компоненти).

Плюси:

Нативна підтримка браузером
Інкапсуляція через Shadow DOM

Мінуси:

Обмежена підтримка в старих браузерах
Складність інтеграції з деякими фреймворками

Приклад структури Module Federation

[FileTree]

[Webpack Config]

[Diagram]- Додатки

Оболонка (Host)
Налаштування Module Federation
Джерело
Основний додаток
Точка входу
Мікрофронтенд продуктів
Налаштування
Джерело
Список продуктів
Bootstrap
Мікрофронтенд кошика
Налаштування
Джерело
Кошик
Bootstrap
Мікрофронтенд оформлення замовлення
Налаштування
Джерело
Оформлення замовлення
Bootstrap

Переваги мікрофронтендів

Незалежність команд

Кожна команда працює над своїм мікрофронтендом автономно, не блокуючи інших. Це прискорює розробку та зменшує залежності. 2. Різноманітність технологій

Різні мікрофронтенди можуть використовувати різні фреймворки та бібліотеки. Наприклад, один на React, інший на Vue, третій на Angular. 3. Незалежне розгортання

Оновлення одного мікрофронтенда не вимагає повторного розгортання всього додатка. Це зменшує ризики та прискорює доставку нових функцій. 4. Масштабованість розробки

Великий проект можна розділити між кількома командами, кожна з яких зосереджується на своїй бізнес-області. 5. Спрощена міграція

Ви можете поступово мігрувати частини моноліту на нові технології без переписування всього додатка одночасно.

Недоліки та виклики

Складність інфраструктури

Необхідно налаштувати збірку, CI/CD, моніторинг та логування для кожного мікрофронтенда. 2. Збільшення розміру додатка

Без використання спільних залежностей ті ж самі бібліотеки (React, lodash) можуть завантажуватися кілька разів. 3. Складність комунікації

Мікрофронтенди повинні якимось чином обмінюватися даними та подіями. Потрібен добре продуманий механізм (наприклад, event bus, спільний стан). 4. Проблеми з версіонуванням

Різні мікрофронтенди можуть використовувати різні версії однієї й тієї ж бібліотеки, що призводить до конфліктів. 5. Дублювання коду

Загальні UI компоненти та утиліти потрібно або витягувати в окремі пакети, або дублювати в кожному мікрофронтенді. 6. Складність тестування

E2E тести повинні враховувати взаємодію всіх мікрофронтендів. Інтеграційні тести стають більш складними.

Коли використовувати мікрофронтенди

Попередження:

Мікрофронтенди не є панацеєю. Вони додають складність і не підходять для всіх проектів.

Підходять для:

Великих додатків з кількома командами
Проектів, що вимагають незалежності розгортання
Поступової міграції з застарілого коду на нові технології
Складних корпоративних систем з різними бізнес-областями

Не підходять для:

Малих проектів або MVP
Команд з 1-3 розробників
Проектів з простою структурою, де модульна архітектура є достатньою

Найкращі практики

Визначте межі

Розділіть мікрофронтенди за бізнес-областями (продукти, оформлення замовлення, профіль користувача), а не за технічними шарами.

Використовуйте спільні залежності

Налаштуйте спільні залежності в Module Federation, щоб уникнути дублювання бібліотек.

Створіть дизайн-систему

Загальні UI компоненти (кнопки, поля вводу, модальні вікна) повинні бути в окремій бібліотеці, яку використовують всі мікрофронтенди.

Плануйте комунікацію

Використовуйте event bus (наприклад, на основі CustomEvents) або спільний стан (Redux, Zustand) для обміну даними між мікрофронтендами.

Моніторинг та логування

Налаштуйте централізований моніторинг (Sentry, DataDog) для відстеження помилок у всіх мікрофронтендах.

Угоди про версіонування

Узгодьте політику оновлення залежностей і використовуйте semver для контролю сумісності.

Приклад комунікації між мікрофронтендами

typescript

// Спільний Event Bus (спільна бібліотека)
class EventBus {
  private events: Map<string, Function[]> = new Map();

  emit(event: string, data?: any) {
    const handlers = this.events.get(event) || [];
    handlers.forEach(handler => handler(data));
  }

  on(event: string, handler: Function) {
    const handlers = this.events.get(event) || [];
    handlers.push(handler);
    this.events.set(event, handlers);
  }

  off(event: string, handler: Function) {
    const handlers = this.events.get(event) || [];
    const index = handlers.indexOf(handler);
    if (index > -1) {
      handlers.splice(index, 1);
    }
    this.events.set(event, handlers);
  }
}

export const eventBus = new EventBus();

// У мікрофронтенді продуктів
import { eventBus } from '@shared/event-bus';

function addToCart(product: Product) {
  eventBus.emit('cart:add', product);
}

// У мікрофронтенді кошика
import { eventBus } from '@shared/event-bus';

useEffect(() => {
  const handler = (product: Product) => {
    setCartItems([...cartItems, product]);
  };
  
  eventBus.on('cart:add', handler);
  
  return () => {
    eventBus.off('cart:add', handler);
  };
}, [cartItems]);

Альтернативи мікрофронтендам

Перед впровадженням мікрофронтендів розгляньте простіші підходи:

FSD (Feature-Sliced Design) — для структурування моноліту
Модульна архітектура — для розділення на незалежні модулі в межах одного додатка
Monorepo зі спільними пакетами — для повторного використання коду між проектами

Резюме:

Мікрофронтенди є потужним інструментом для масштабування великих команд та складних додатків. Вони дозволяють командам працювати незалежно та автономно розгортати зміни. Однак вони додають значну складність до інфраструктури, тестування та розробки. Використовуйте мікрофронтенди лише тоді, коли їх переваги (незалежність команд, різноманітність технологій) переважають витрати на впровадження та обслуговування.

Корисні ресурси

Зміст

Основні концепціїПідходи до реалізаціїКомпозиція на стороні сервера (SSI)Інтеграція під час збіркиІнтеграція під час виконання через iframesІнтеграція під час виконання через JavaScript (Module Federation)Веб-компонентиПриклад структури Module FederationПереваги мікрофронтендівНедоліки та викликиКоли використовувати мікрофронтендиНайкращі практикиПриклад комунікації між мікрофронтендамиАльтернативи мікрофронтендамКорисні ресурсиСхожі статті

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань