Встраивал ли одно Frontend приложение в другое

Встраивание одного Frontend приложения в другое

Описание практики

Встраивание frontend приложения в другое приложение (микрофронтенды) - это архитектурный подход, который позволяет:

• Разбить большое приложение на несколько независимых микрофронтенд модулей
• Каждый модуль может быть разработан отдельной командой
• Каждый модуль может использовать свои технологии (React, Vue, Angular)
• Модули могут быть развернуты независимо

Подходы реализации

1. iframe встраивание

Самый простой способ - просто встроить одно приложение в iframe другого:

<!-- Главное приложение -->
<div id="app">
  <h1>Main App</h1>
  <iframe src="https://micro-app.example.com" width="100%" height="500"></iframe>
</div>

Плюсы:

• Полная изоляция стилей и JavaScript
• Просто реализовать
• Не нужны общие зависимости

Минусы:

• Сложная коммуникация между приложениями
• Трудно синхронизировать состояние
• Проблемы с responsiveness
• Ограниченная возможность делиться контекстом

// Коммуникация через postMessage
// В главном приложении
const iframe = document.querySelector('iframe');

iframe.contentWindow.postMessage(
  { type: 'user-logged-in', user: { id: 1, name: 'John' } },
  '*'
);

// В встроенном приложении
window.addEventListener('message', (event) => {
  if (event.data.type === 'user-logged-in') {
    console.log('User logged in:', event.data.user);
  }
});

2. Module Federation (Webpack 5)

Современный подход - динамическая загрузка модулей между приложениями:

// webpack.config.js хост-приложения
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      filename: 'remoteEntry.js',
      remotes: {
        mfe1: 'mfe1@http://localhost:3001/remoteEntry.js',
        mfe2: 'mfe2@http://localhost:3002/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

3. Web Components

Стандартный браузерный способ - создание custom elements:

class UserCardElement extends HTMLElement {
  connectedCallback() {
    this.render();
  }

  set user(user) {
    this._user = user;
    this.render();
  }

  render() {
    this.innerHTML = `
      <div class="user-card">
        <h2>${this._user.name}</h2>
        <p>${this._user.email}</p>
      </div>
    `;
  }
}

customElements.define('user-card', UserCardElement);

4. Single-SPA

Специальная библиотека для микрофронтендов:

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: '@myapp/navbar',
  app: () => System.import('@myapp/navbar'),
  activeWhen: '/'
});

start();

Практические примеры

// Пример с Qiankun (популярная библиотека для микрофронтендов)
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: '@myapp/react-app',
    entry: 'http://localhost:3001',
    container: '#react-app',
    activeRule: '/react'
  },
  {
    name: '@myapp/vue-app',
    entry: 'http://localhost:3002',
    container: '#vue-app',
    activeRule: '/vue'
  }
]);

start();

Распространенные проблемы

1. Конфликты стилей CSS - решение: CSS Modules, Shadow DOM, BEM
2. Дублирование зависимостей - решение: shared dependencies
3. Синхронизация состояния - решение: event bus, Redux, MobX
4. Коммуникация между приложениями - решение: postMessage, EventTarget

class EventBus extends EventTarget {
  emit(type, data) {
    this.dispatchEvent(new CustomEvent(type, { detail: data }));
  }
}

const bus = new EventBus();
bus.emit('user-logged-in', { id: 1, name: 'John' });

Заключение

Встраивание frontend приложений полезно для больших систем с несколькими независимыми командами, необходимости использования разных технологий и независимого развертывания модулей. Выбор подхода зависит от сложности проекта, требований к производительности и опыта команды.