Архитектура пользовательского интерфейса с несколькими отдельными компонентами

#javascript #reactjs #server #architecture #web-component

#javascript #reactjs #сервер #архитектура #веб-компонент

Вопрос:

Проблема

У меня есть сайт A, написанный на React.

Я хочу отображать меньшие компоненты React на сайте A всякий раз, когда пользователь переходит на определенную страницу на сайте A.

Каждый меньший компонент React находится в своем собственном репозитории, как и сайт A.

Вопрос

Как я могу динамически загружать эти компоненты на сайт A, когда сайт A находится в рабочей среде?

Какой рабочий процесс я могу настроить для разработки небольших компонентов React локально, внутри сайта A?

Я думал об использовании веб-компонентов (https://medium.com /@rchaves/building-microfrontends-part-iii-public-path-problem-1ce823be24c9) но не хочу, чтобы компоненты уже были где-то развернуты, и просто загружаю эти компоненты с сервера. Предпочтительно было бы решение, при котором я мог бы настроить что-то в своем конвейере, чтобы указывать на репозитории, где существуют меньшие компоненты, и упаковывать их вместе с кодом сайта A в один пакет всякий раз, когда создается какой-либо компонент.

Это также поднимает другую проблему многократной загрузки одних и тех же зависимостей (например, React, React DOM) из-за упаковки разных проектов.

Возможно, есть и другие идеи с использованием модулей npm, iframes и т.д.

Ответ №1:

Если вы хотите полной изоляции между основным приложением и более мелкими компонентами, iframes — это правильный путь, поскольку они могут гарантировать, что каждый компонент может иметь свои собственные версии React и зависимости.

Если вам нужно совместно использовать данные / взаимодействие между этими компонентами и основным приложением, то одним из способов является добавление его в качестве зависимости от npm. Но для этого потребуются единые версии фреймворка для всех компонентов. Или вы можете попробовать веб-компоненты.

1. для iframes потребовалось бы, чтобы меньшие компоненты были уже размещены в другом месте, а затем ссылались на этот URL, правильно? Не очень хорошо знаком с ними.

2. ДА. Они делают. Если эти компоненты могут сами по себе работать независимо (например, ads или Google maps), то их необходимо разместить снаружи, чтобы поместить в iframe.

3. Если этим компонентам требуются некоторые данные или необходимо взаимодействовать с основным приложением, то вам нужно добавить это в качестве зависимости приложения

Ответ №2:

У меня была похожая проблема с моим собственным проектом, и я обнаружил, что подмодули git работают очень хорошо.

Другой способ, который я рассмотрел и который может оказаться полезным, заключается в использовании частного пакета npm со всеми вашими меньшими компонентами в нем.