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

Основные признаки:

• Множество независимых команд, работающих над разными частями пользовательского интерфейса.
• Различные технологические стеки (фреймворки, библиотеки) используются для разных частей одного приложения.
• Независимое развертывание отдельных частей UI.
• Разделение приложения на домены (компоненты, виджеты, страницы), каждый из которых разрабатывается и обслуживается изолированно.
• Использование оркестрации на стороне клиента или сервера (например, с помощью Webpack Module Federation, Iframes, Single-spa) для сборки и интеграции микрофронтендов.

Косвенные признаки могут включать:

• Монорепозиторий, где каждая часть UI находится в отдельной директории с собственными зависимостями.
• Сложность в синхронизации зависимостей между различными частями проекта.
• Появление "осколков" UI при медленной загрузке или ошибках в одном из микрофронтендов.

Можно посмотреть реализацию в коде:

// Пример с Single-spa
import { registerApplication, start } from 'single-spa';

registerApplication({
  name: '@myorg/app-header',
  app: () => import('@myorg/app-header'),
  activeWhen: ['/'],
});

registerApplication({
  name: '@myorg/app-dashboard',
  app: () => import('@myorg/app-dashboard'),
  activeWhen: ['/dashboard'],
});

start();

<!-- Пример с Iframe -->
<iframe src="https://app-header.mycompany.com/"></iframe>
<iframe src="https://app-dashboard.mycompany.com/"></iframe>

// Пример с Webpack Module Federation
// В webpack.config.js основного приложения (host)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        header: 'header@http://localhost:3001/remoteEntry.js',
        dashboard: 'dashboard@http://localhost:3002/remoteEntry.js',
      },
    }),
  ],
};