Микро-интерфейс с ReactJS
В этом посте мы обсудим, как реализовать Micro Frontend с Reactjs.
Micro Frontend - это концепция, заимствованная из мира микросервисов, где большие монолитные сервисы разбиваются на более мелкие независимые сервисы. В настоящее время, когда мы разрабатываем фронтенд-проекты, весь наш код находится в общем месте, и в итоге мы создаем большой монолитный проект.
Чтобы преодолеть этот недостаток, мы можем думать о нашем приложении как о разных независимых приложениях, а затем интегрировать все разные части, чтобы получить окончательное приложение.
Чтобы этот пост относился к Micro Frontend, в следующей настройке я не буду обсуждать некоторые вещи, такие как настройка React Project с помощью Webpack, предполагая, что читатель имеет некоторые базовые знания.
Чтобы продемонстрировать, как создать Micro Frontend, рассмотрим приложение, которое отображает какой-либо продукт и его цену, и у него есть 2 маршрута: один - домой, а другой - «/ v2», в котором будет отображаться другая версия продукта и его цена.
Теперь, прежде чем идти дальше, мы обсудим, как react вводит свой dom, в вашем index.js / main.js (файле записи) вы указываете основной контейнер и идентификатор div, в который response вводит dom.
вы определяете этот div внутри своего HTML-файла
Итак, в основном React находит div с идентификатором «root» и внедряет DOM внутри этого div, и если вы проверите свое приложение-реакцию в своем браузере, вы заметите, что также вводится сценарий пакета.
Итак, теперь подумайте, что у вас есть два разных реакционных проекта: один отображает продукт, а другой показывает цену, и они работают независимо на разных серверах, поэтому в нашем основном приложении мы можем добавить 2 разных div с идентификатором, который используется в самом проекте и может внедрять js-пакет проектов.
Итак, теперь сначала запустите приложения ProductDisplay и productPrice, а затем запустите основное приложение, после чего вы увидите, что оба проекта выполняются.
Маршрутизация также работает с микро-интерфейсом.
Вместо того, чтобы напрямую внедрять скрипт в index.html, мы можем также внедрить скрипт в componentDidMount, написав injectScript
Итак, теперь вы можете разбить свое приложение на разные независимые приложения, но, очевидно, вы не хотите разбивать отображение продукта и его цену на два разных приложения, а вместо этого вы можете разбить корзину, обзор продукта.
Вы можете просмотреть код здесь
