Micro Front Ends - подход

Question

У меня есть старое устаревшее приложение, встроенное в AngularJS (Angular 1), внесение изменений в структуру или любые другие важные изменения на данном этапе невозможно.

Создано новое приложение используя более новый стек и его отдельное приложение. Мне нужно отрендерить это новое приложение в старом устаревшем приложении.

Я мог бы добиться этого с помощью iframe-

<div id="i-am-old-app">
    <iframe src="www.mynewapp.com/index.html"></iframe>
</div>

Я мог бы использовать собственный веб-компонент.

<div id="i-am-old-app">
    <my-new-app-web-component></my-new-app-web-component>
</div>

Какие еще наилучшие подходы я мог бы использовать? Основная цель - иметь производительное приложение, и новое развертывание в старом приложении не требуется, если новое приложение имеет обновление кода.

Answer 1

Вы можете попробовать использовать один из следующих подходов

1. https://martinfowler.com/articles/micro-frontends.html
2. https://single-spa.js.org/

Второй - это фреймворк для архитектуры микро-интерфейса. Первый - это самостоятельная реализация микро-фронтендов. Это хорошо объяснено, и в нем есть действительно классный пример, который действительно помогает вначале :)