Костя 8Бит | Fullstack AI: “Микрофронтенды Микрофронты — это подход, при котором большое фронтенд-…”

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

Микрофронты — это подход, при котором большое фронтенд-приложение разбивается на независимые части, каждая из которых:
🚧 разрабатывается отдельно
🚀 может деплоиться независимо
👥 имеет свою команду и ответственность

По сути, это микросервисы, но для фронтенда 🧩

🤔 Зачем это делают?

Тут похоже как с микросервисами:
желание поделить монолит на независимые куски,
чтобы не зависеть от других команд / функционала.

👨‍💻 Как это выглядит в коде

SPA composition (через роутинг)

Shell-приложение решает, какое SPA показывать по URL:


// shell/App.tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/profile/*" element={<ProfileApp />} />
        <Route path="/billing/*" element={<BillingApp />} />
      </Routes>
    </BrowserRouter>
  );
}

✅ Плюсы очевидны:
- независимые релизы
- масштабирование команд
- изоляцию ошибок
- можно использовать React, Vue, Angular одновременно

❌ Минусы тоже есть:
- сложнее инфраструктура
- сложнее дебаг
- выше требования к архитектуре

Для стартапа или маленькой команды чаще всего монолит лучший выбор.

Микрофронты оправданы, если вы работаете на большом проекте 🏗️

В моей практике я использовал микрофронты на очень больших проектах:
🏦 2 больших банка и 🛒 маркетплейс.

Есть несколько вариантов реализации: Module Federation, iframe, SPA composition


// profile/webpack.config.js
new ModuleFederationPlugin({
  name: "profile",
  exposes: {
    "./ProfileWidget": "./src/ProfileWidget",
  },
});


<iframe
  src="https://billing.example.com"
  style="width:100%; height:100%; border:0"
/>