Введение
Благодаря технологиям микроинтерфейса на основе компонентов нам разрешено напрямую использовать удаленный компонент Angular или React в нашем приложении NextJS.
Что, если мы хотим интегрировать существующую удаленную страницу в наше приложение?
iframe — самый простой и традиционный способ добиться этого. Это не элегантно, но полезно, потому что этот способ не будет ограничен фреймворком, который мы использовали.
Об этой серии
Эта серия направлена на изучение различных технологий микроинтерфейса для соединения удаленных приложений в разных средах.
- Статья 1 (React + Next.js): Создание микро-фронтендов в NextJS и ReactJS с федерацией модулей Webpack 5
- Статья 2 (React + Angular): Агрегирование компонентов Angular в приложении NextJS/ReactJS с пользовательским элементом
- Статья 3 (React + чистый HTML/NodeJS): Интеграция удаленных страниц в качестве оверлея ReactJS через iframe с API postMessage
Обзор этой статьи
В этой статье мы рассмотрим следующие темы.
- Создать управляемую удаленную страницу в Node.js Express
- Создать оверлей ReactJS с помощью iframe
- Рефакторинг существующего приложения ReactJS/NextJS
До реализации
Связь между хост-приложением и встроенным приложением
На следующей диаграмме показан процесс связи хост-приложения (слева) и удаленной страницы (справа).
Есть несколько шагов.
IframeOverlayдобавляет прослушиватель событий для ожидания событияmessageс удаленной страницы.- Хост-приложение встраивает удаленную страницу
- Удаленная страница добавляет прослушиватель событий для ожидания события
messageот хоста…
