В чём разница между микрофронтендами и веб-компонентами как способами интеграции разного стека в одном приложении?

Введение

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

Микрофронтенды

Микрофронтенды — это архитектурный паттерн, при котором фронтенд разбивается на несколько независимых модулей (микрофронтендов). Каждый модуль может разрабатываться отдельной командой, использовать свой стек технологий и разворачиваться независимо. Интеграция происходит на уровне приложения: либо через iframe, либо через JavaScript-контракт, либо через серверную сборку.

Пример: у вас есть интернет-магазин. Модуль каталога написан на React, модуль корзины — на Vue, а модуль оплаты — на Angular. Все они собираются в единый интерфейс, но работают как отдельные приложения.

// Пример интеграции через JavaScript-контракт
// Микрофронтенд каталога (React)
window.microfrontendCatalog = {
  mount: (container) => {
    ReactDOM.render(<Catalog />, container);
  },
  unmount: (container) => {
    ReactDOM.unmountComponentAtNode(container);
  }
};

// Основное приложение вызывает mount при необходимости
window.microfrontendCatalog.mount(document.getElementById('catalog-root'));

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

Веб-компоненты — это набор стандартов браузера (Custom Elements, Shadow DOM, HTML Templates), позволяющих создавать собственные HTML-теги с инкапсулированной логикой и стилями. Они не зависят от фреймворка и могут использоваться в любом приложении, написанном на любом стеке.

Пример: вы создаёте компонент <user-card>, который отображает карточку пользователя. Этот компонент можно использовать и в React, и в Vue, и в чистом JavaScript.

// Определение веб-компонента
class UserCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div class="card">${this.getAttribute('name')}</div>`;
  }
}
customElements.define('user-card', UserCard);

// Использование в любом приложении
<user-card name="Иван"></user-card>

Ключевые различия

• Уровень интеграции: микрофронтенды интегрируют целые приложения, веб-компоненты — отдельные элементы интерфейса.
• Независимость: микрофронтенды позволяют независимо разрабатывать и деплоить целые модули, веб-компоненты — только переиспользуемые UI-части.
• Технологии: микрофронтенды могут использовать разные фреймворки, веб-компоненты — стандарт браузера, не зависящий от фреймворка.
• Сложность: микрофронтенды требуют сложной инфраструктуры (оркестрация, общий роутинг), веб-компоненты проще в использовании.

Когда что выбирать

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

Вывод

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