Напомним, что мы создали 3 приложения, заголовок, список продуктов и корзину, поместили все на страницу, нашу домашнюю страницу, и сопоставили все их URL-адреса с помощью маршрутизатора, но они по-прежнему не взаимодействуют друг с другом.
Теперь добавим общение. Вероятно, существует множество способов сделать это, но, как и в случае с остальными сообщениями в этом блоге, я выберу самый простой из известных мне способов: собственные CustomEvents.
В нашем приложении со списком продуктов измените src/App.js на следующее:
Теперь, когда кнопка нажата, мы запускаем отправку события window, передавая продукт, выбранный в detail.
Теперь в нашем приложении корзины нам нужно прослушать это событие. Измените его src/App.js на это:
Вот и все, мы отправляем события в окно из одного приложения и слушаем из другого, используя собственные API-интерфейсы браузера и простой JSON.
Причина, по которой я считаю, что это должно быть проще, так или где-то рядом, заключается в том, что он должен работать с любыми другими технологиями и фреймворками, например, вы можете отправлять сообщения из React в Angular. По этой же причине в настоящее время все используют JSON для связи на сервере, даже если никто не использует NodeJS!
Вот гифка, в которой приложения разговаривают друг с другом:
Круто, правда? Знаете, что еще круто? Нам удается заставить два приложения разговаривать, только изменив и повторно развернув два из них. Нам не пришлось ничего менять на домашней странице, в заголовке или в маршрутизаторе, это независимость!
Вот источники:
https://github.com/microfrontends/products-list
https://github.com/microfrontends/cart/tree/part-v
Если вам нужно больше идей для интеграции и взаимодействия между приложениями, я рекомендую подход Николаса Закаса в песочнице.
К сожалению, мне больше нечего показать, кроме тех, например, как мы тестируем это общение? Как здесь писать интеграционные или контрактные тесты? Я не знаю. Также неплохо было бы добавить сюда некоторые идеи из событийной архитектуры. Если вам есть чем поделиться, поделитесь с нами.
Последние мысли
Вот и все! Мы построили это, микрофронтенды, ура! Спасибо, что дочитали до этого места!
Если у вас возникли проблемы, прокомментируйте, чтобы я мог улучшить статьи, а также весь код доступен на github.com/microfrontends.
Не используйте ничего из этого, если оно вам не нужно.
Мне нравится Lean как можно больше, избегайте потерь, поэтому я снова рекомендую не использовать идеи, описанные здесь, до тех пор, пока они не понадобятся, это усложнит задачу. Если вы работаете в большой компании, эти идеи могут вам помочь, в противном случае Majestic Monolith может сослужить вам хорошую службу.
Если вы действительно используете какие-то идеи, адаптируйте их к своему вкусу и знайте, что есть некоторые нерешенные проблемы, с которыми вы, вероятно, столкнетесь.
Бонусная часть! Меняющиеся технологии
Я сказал, что мы можем использовать разные технологии для наших приложений, но я не доказал это, не так ли? Итак, теперь мы собираемся переписать тележку, используя самый крутой язык на свете: Вяз!
