Какие знаешь подходы встраивания одного Frontend приложения в другое

«Какие знаешь подходы встраивания одного Frontend приложения в другое» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Есть несколько подходов для встраивания одного фронтенд-приложения в другое: 1. **Iframe** - простой способ, но ограниченный в коммуникации между приложениями. Пример: ``` ``` 2. **Микрофронтенды** - разбиение на независимые модули, которые собираются в runtime. Используются технологии: * Module Federation (Webpack 5) * Single-SPA * Qiankun 3. **Компонентный подход** - когда дочернее приложение экспортирует компоненты, которые можно использовать в основном. Например, с React: ``` import { SubAppComponent } from 'sub-app'; function MainApp() { return ; } ``` 4. **Web Components** - стандартный способ создания переиспользуемых компонентов, работающих в любом фреймворке: ``` class MyElement extends HTMLElement { connectedCallback() { this.innerHTML = `

Sub-app content

`; } } customElements.define('sub-app', MyElement); ``` Выбор зависит от требований к изоляции, производительности и сложности интеграции.