Федеративные приложения в React

Данный опус представляет собой размышления на тему разработки приложений по принципам module federation с использованием React в качестве UI библиотеки.

Исходный код компонентов может быть распределён по нескольким репозиториям и целям для деплоя. Очень грубо говоря — при помощи Webpack module federation такие компоненты используются в коде, так будто они являются частью текущего локального бандла. Webpack в рантайме загружает и исполняет код распределённых компонентов, включая зависимости каждого компонента, если это необходимо.

Особенности федеративных приложений

1. Система разбита на несколько слабо связанных модулей: исходный код этих модулей может находиться в одном или в разных репозиториях.
2. Каждый модуль имеет собственную цель деплоя: уникальный адрес, по которому к этому модулю можно получить доступ.
3. Один модуль может быть использован в нескольких приложениях системы.
4. При релизе новой версии модуля, все использующие его модули автоматически получают новую версию.

• Ошибки на раннем этапе проектирования могут стоить больше, чем при монолитном подходе. Самые серьёзные ошибки — ошибки при проектировании публичного API модулей и модели их взаимодействия. Такие ошибки приведут к каскаду изменений, которые нужно будет внести в каждый из связанных модулей.

Данный компонент является федерэтед компонентом, построенным по принципам основы: он загружен с другого домена, а также имеет собственный вебворкер, общающийся с главным потоком.

Воркфлоу и деплой

Есть 2 репозитория: библиотека компонентов и использующее эту библиотеку компонентов приложение.

Библиотека компонентов точно так же, как и приложение должна быть задеплоена на определённый адрес, доступый приложению в рантайме.

Если приложение разрабатывается с использованием нескольких целей деплоя (например, тестовая и боевая), хорошей идеей будет и библиотеку разрабатывать с такими же целями деплоя.

Для сообщения приложению адреса, по которому находится нужная версия библиотеки могут быть использованы:

• переменные окружения, в котором происходит сборка приложения
• специализировання рантайм логика (например, в зависимости от текущего URL, на котором приложение запущено)

Для локальной работы над системой нужно подключить библиотеку средствами module federation:

• локальный сервер с библиотекой (webpack-dev-server, serve)
• удалённый сервер с текущей версией библиотеки.

Обмен информацией между модулями

Обмен информацией это общение. Обмен информацией должен обладать свойствами:

• получатель умеет интерпретировать любую полученную от отправителя информацию.

Должны ли они знать "смысл" информации? или достаточко соотносить переданную информацию и ответную реакцию.

• отправитель должен получить ответ от получателя, о том, что он собирается делать с полученной информацией, чтобы удостовериться, что получатель его понял.

• Главное = каждый запрос должен получать ответ *

Для того, чтобы организовать эффективное и гибкое общение между модулями введём стандарты обмена информацией между модулями.

API

Позволяет подключиться ко внутренней системе обмена сообщениями модуля. Предоставляет доступ к request функции модуля.