А, ну вот, опять эти ваши встраивания приложений! Слушай, как будто в детском саду: "Мама, а можно я свою игрушку к тебе в песочницу положу?". Так вот, есть несколько способов, как одну фронтенд-хрень в другую воткнуть, и все они — сплошное веселье. **Первый способ, для ленивых и бесхитростных.** **Iframe**, блядь. Просто берёшь и суёшь одно приложение в окошко внутри другого, как телевизор в стену. Проще пареной репы, но общение между ними — это пиздец, танцы с бубном через `postMessage`. Примерно так это выглядит: ``` ``` Всё. Но это как жить с соседом через стену: кричишь — может, услышит, а может, и нет. Ограничения, блядь, на каждом шагу. **Второй способ — для мазохистов и архитекторов космических масштабов.** **Микрофронтенды**, ёпта! Это когда твоё приложение разбивают на кучу маленьких, которые потом, как зомби, в рантайме собираются в одного здорового монстра. Технологии? Да овердохуища их! * Module Federation в Webpack 5 — сейчас все на него молятся. * Single-SPA — старичок, но ворчун. * Qiankun — китайская экзотика, но тоже в деле. **Третий подход — для тех, кто любит порядок.** **Компонентный подход**. Представь, что дочернее приложение — это такой ящик с детальками Лего (компонентами). Ты их импортируешь в основное приложение и собираешь, что душе угодно. На React, например, это выглядит почти прилично: ``` import { SubAppComponent } from 'sub-app'; function MainApp() { return ; } ``` Красота, да? Только совместимость версий библиотек проверяй, а то будет тебе "чих-пых тебя в сраку" на ровном месте. **Ну и четвёртый, для универсальных солдат.** **Web Components**, стандартные, блядь, как гвоздь пятидесятка. Создаёшь свой тег, и он будет работать где угодно — хоть в React, хоть в Angular, хоть на голом HTML. Пишешь какую-то такую муть: ``` class MyElement extends HTMLElement { connectedCallback() { this.innerHTML = `

Sub-app content

`; } } customElements.define('sub-app', MyElement); ``` И потом просто тыкаешь в размету ``. Вроде бы красота, но иногда с полифиллами и стилями — просто пиздец, волнение ебать. **Короче, выбор-то от чего зависит?** Да всё просто, как три копейки: * Нужна полная изоляция, чтобы они друг другу мозги не выносили? Iframe тебе в помощь. * Хочешь гибкости и мощной интеграции, но готов за это кровь из глаз пускать? Микрофронтенды или компоненты. * Нужно, чтобы работало везде и всегда, и похуй на изящество? Web Components, ёпта. Вот и вся наука. Дальше только практика, где всё обычно оказывается сложнее, чем в этих умных книжках. Удачи, не облажайся.