В последнее время все активнее в обиход входит понятие экосистемы. Многие IT-компании предлагают различные цифровые решения для людей и бизнеса под одним брендом - от заказа еды до онлайн-сделок по покупке недвижимости.
Непосредственной составляющей подобных решений в рамках одной экосистемы является общий дизайн. Однако по мере роста компании увеличивается количество элементов экосистемы, и поддержка консистентности UI-составляющей становится непростой задачей.
В ДОМ.РФ мы создаем продукты для рынка недвижимости, в частности предназначенные для электронного взаимодействия между застройщиками, банками и государственными органами. Задачи и цели систем отличаются друг от друга, но их объединяет общий дизайн. Безусловно, создание библиотеки UI-компонентов с нуля в каждом новом сервисе является крайне сомнительной идеей по следующим причинам:
Стоимость разработки заметно увеличиваются;
Сроки разработки также увеличиваются;
Консистентность: возникает проблема поддержки UI в одном виде.
Казалось бы, создание отдельной библиотеки компонентов с вынесением всех UI-элементов в нее с возможностью дальнейшего подключения на проектах решает вышеперечисленные проблемы. Но что делать, если необходимо поддерживать определенные элементы библиотеки в актуальном состоянии на всех проектах одновременно в real-time?
Изображение 1. Виджет Topline
Один из таких элементов в нашей библиотеке компонентов – виджет Topline.
Если кратко, то он представляет собой совокупность некоторого количество компонентов, реализующих некую логику и подразумевающих использование на клиенте “из коробки”.
Но почему бы не вынести виджет в NPM-пакет и подключать его, как остальные элементы из UI-kit? Проблема заключается в том, что, с одной стороны, данный элемент периодически обновляется - например, добавляется новый сервис в боковую панель, который нужно отобразить на всех остальных проектах, или добавляется новый функционал, а с другой стороны, Topline должен быть актуальным абсолютно на всех проектах.
При изменениях в виджете обновлять его вручную на каждом проекте и производить редеплой, возможно, не самая сложная, но весьма трудоемкая задача. Более того, на каждом проекте потребуется вклиниваться с данным обновлением в его релизный цикл. При возникновении различного рода проблем на проекте релизный цикл может быть нарушен, соответственно неизвестно, когда изменения с виджетом доедут по продакшена.
Кроме того существует набор сервисов, активная разработка в рамках которых завершена, и за которыми уже не прикреплены разработчики. В данном случае потребуется найти ресурсы для обновления зависимостей и инициализировать новый релиз, что также отнимет драгоценное время.
Микрофронтенд с Webpack Module Federation
В вебпаке в 5-й версии появился полноценный инструмент для организации микрофронтенда. Подробно останавливаться на понятии микрофронтенда не будем, но если кратко, микрофронтенд – это микросервисный подход при разработке фронтовых приложений. В рамках одного приложения разные компоненты системы представляют собой независимые модули, разработка которых может вестись совершенно разными командами и с помощью разных инструментов.
Как эта технология может решить проблему с нашим виджетом? Одно из основных достоинств данного инструмента – подключение элементов в runtime. Это означает, что мы можем настроить интеграцию виджета таким образом, что при использовании сервиса у нас всегда будет подгружаться актуальный бандл с виджетом Topline.
Более того, в рамках приложения мы можем подключать виджет как самый обыкновенный React-компонент. Таким образом, мы можем передавать в виджет props.
Пример подключения
Подключение в конфиге вебпака нужного модуля:
plugins: [
name: 'eisgs_topline',
remotes: {
eisgs_topline: `eisgs_topline@${process.env.TOPLINE_URL}`,
},
shared: {
react: {
eager: true,
requiredVersion: packageJsonDependencies.react
},
},
]
Как видно из конфига, необходимо, чтобы бандл с виджетом был доступен по определенной ссылке. Соответственно, должен быть стабильный файловый сервер, на котором будет располагаться вышеуказанный бандл.
Также можно указать набор зависимостей с помощью shared, которые будут переданы из клиента в виджет (аналог Peer Dependencies).
На клиенте виджет подключается следующим образом:
<Topline
navConfig={navConfig}
profileConfig={profileConfig}
/> Подключаться модуль будет асинхронно, поэтому необходимо обернуть его в <Suspense>:
const ToplineModule = lazy(async () => import('eisgs_topline/topline'));
<Suspense fallback={<>Loading…</>}>
<ToplineModule
navConfig={navConfig}
profileConfig={profileConfig}
/>
</Suspense> Более подробную информацию о подключении можно найти в документации Webpack.
Изображение 2. Виджет Topline в реальном проекте. По сравнению с изображением №1 был добавлен функционал сервиса уведомлений.
Что делать, если возникли проблемы с подключением через федерации?
Так как бандл с виджетом располагается на файловом сервере, крайне желательно обработать сценарий, при котором бандл не будет выгружен по тем или иным причинам.
Для этих целей мы также публикуем виджет Topline в NPM, который подключается, если возникли проблемы с Module Federation:
const ToplineBoundary = () => (
<ToplineErrorBoundary fallback={<ToplineFallback />}>
<ToplineModule />
</ToplineErrorBoundary>
); При возникновении ошибки ErrorBoundary отрендерит Topline, подключенный через NPM. Стоит учесть, что в таком случае версия виджета будет задана явно через package.json.
Итого
Мы рассмотрели возможности Module Federation для решения проблем, связанных с консистентностью виджета, как можно подключить модуль с помощью данной технологии и как обрабатывать ситуации, при которых виджет не сможет быть загружен и подключен.
Безусловно, у данного решения есть свои недостатки:
Клиент должен собираться Webpack версии 5.0.0 или старше. Другие сборщики не подойдут;
Сервер, который будет раздавать бандл, должен быть стабильным;
Нужно настроить кэшировние бандла;
Особо тщательно следить, чтобы обновления не принесли с собой breaking changes (при передаче props);
Расшерить типы для TS с помощью федераций не получится.
Но несмотря на данные недостатки нами было принято решение использовать Module Federation для шеринга виджетов. Если говорить о Topline, то такой метод используется с весны 2021 года – на данный момент проблем с таким подходом не возникало, если не считать нескольких падений файлового хранилища, хранящего бандл – но на такой случай используется fallback.