Мікро-фронтэнды на React з аб’ёмным саюзам Webpack

Большыя паверхні продукту рэдкасцю ўжо являюць сабой адны фронтэнд. Працэс аплывання, панелі керування, настройкі і элементы дызайну навакола яных часта належаць разным командам, кожная з якіх мае свой спіс задач, прычыны затрымакоў і календар распрацоўкі. Такая структура зазвычай называецца мікро-фронтэндамі: незалежна створаныя часткі інтэрфейсу, якія пры тым застаюцься частынай адного продукту, аналагам мікросервісаў з боку кліента.

Дзялейчы час інструменты React для такой модэлі былі незгодныя. Арганізацыі альбо выкарыстоўвалі ўсёе вялікі пакет SPA, альбо вбудоввалі окрэмыя прыкладнення ў iframes і прыймалі выкалецкі, якія гэта супакоўвало. Механізм Module Federation у Webpack 5 створыў трэці варыянт: незалежна створаныя і розмішчваныя JavaScript-прыкладнення, якія на час выканання складаюцца ў адны документ браузера. Розумеўшы, што робіць гэтае функцыянаванне — і чаму яно заменіла старэе рашэнняя — важна для кожнага, хто праектуе сістэмы React з удзелам калькі команд.

Проблема да появы Module Federation

Перш чым была створэна Federation, команды, якія хацелі здабываць незалежна доставку фронтэнда, мелі скромны выбар.

Стандартам быў монолітны SPA: адна база дадзеных, адна лінія апрацоўкі, адна процедура развярнення. Такі падход пасходзіў для маленькага групавога фармату. Колі адпаведальнасць становілася больш, выклікаліся працоўныя труднасці. Кожная функцыя выкарыстоўвала адну і тую ж версію коду. Часы компіляцыі зросталі разам з розмерам кодавой базы. Рэгрэсія ў аднай сферze могла зупініць працэс выпуску коду іншай команды. Скоўванне процедур развярнення між большом колам груп стаўало самастоятным аспектам управління праектам.

Іншым популярным рашэнням былі іфрамы. Убудова цэлага дочорганог прыемніка ўнутрь старшай старонкі даўала практычнаю незалежнасць у развярненні, таму так многія корпорацыі іх і выкарыстоўвалі. Але шточкі такога падходу быстра накапляліся:

• Ізоляцыя ўсёвышэйная. Кантэксты стаяў, DOM і JavaScript не сумешваюцца. Аднароўненне стану, коордынацыя дадзэнняў чы аплікаванне адной мовы дызайну ў родзічах і падрабочых элементах ператвараецца на складную інжынерную задачу заместа простаг перадачы параметраў.
• Залежнасці дублююцца. Кожны фрэйм часта завантажвае свой сабэйш React, спільныя бібліятэкі і CSS. Карыстальнікі неўпінна завантажаюць тыя ж байты.
• Кантакты з корыстувальнікам паслабляюцца. Перэмешчэнне по старонкі, фокусаванне, змена размеру, глыбокія лінкі і історыя дзеянняў межах фрэймоў выклікаюць патрэбу ў спецыяльных рашэннях, і ўсё рав часта выглядае некорэктна.
• SEO і доступнасць падвергаюцца негатыўнам наследкам. Контэнт у фрэймох важкае для індэксавання і менш адносовы для тэхналагій дапамогі.
• Комунікацыя адбываецца толькі праз паведамленні. Дадзеныя межа фрэймамі перадаюцца за дапамогою postMessage і ручна створаных протакалаў — без спільнай памяці, без спільнага кантэксту React.

Iframes спакавалі проблему незалежна праца, але створылі ўсё гorsую проблему чыстая інтэграцыя. Там, дзе не хватала, была незалежнасць пад час будовы і развяртання без адміністрацыі ўжо існуючага досвіду корыстніка, які базаваўся на адном дакумэнце.

Што такое Module Federation?

Module Federation, які быў аднаведэны ў Webpack 5, дазволяе окрэма створаным і развярнутым JavaScript-застосункам дзеліцца кодам пад час выканання, а не пад час компіляцыі.

На практыцы вы можэце запускаць калькі застосункоў — ад разных команд, працэсаў і версый — якія пры этым з’еднваюцца ў браузеры як адна продуктавая структура. Адны застосунак выклікае компонент, маршрут або дапаможны калект, а іншы выкарыстоўвае яго так, нібы ён знаходзіцца ў той жа пакет, не перабудовуючы сам застосунок, калі змянюецца первы.

Гэтае складанне пад час выканання ёсць стандартной тэхнічная база для сучасных React-мікрофронтэндоў.

Як гэта працюе: хосты, аддаленныя элементы і спакаваныя залежнасці

У федэрацыі выдзеляюць два ролі:

• Хост завантажае код, публікуемы ў іншых месцах. Часта цэе якраз той элемент, які падключае інтэрфейсы іншых каманд.
• Аддаленны элемент публікуе модулі для іншых: сторункі, компаненты, хукі або інструменты.

Адна прыкладная програма можа выступаць і тым, і іншым: адкрываць дзеякі модулі, выкарыстоўваючы адночасна іншыя.

Аддаленныя элементы задаюць параметры экспорту ў налашчэннях Webpack; хосты указваюць, якія аддаленныя элементы трэба завантажыць і якія сімволы — імпортаваць. Завантажэнне адбываецца ў браузеры па URL-адрэсе входу аддаленнага элемента. Для складання хоста не патрэбны выконвальныя кантэнты аддаленнага элемента — толькі стабільная точка входу, яку можна запрашаць пад час запуску прыкладной программы.

Спакуяныя залежнасці дапамагают завершыць картыну. Калі і хост, і удалёны вычынкі патрабуюць React, можна запрашваць Federation абы выкарыстоўваў адну інстанцыю React замест двох. эта пазбавляе ад дублірацыі у стылі iframe, пры тым як заўсёды дазволяе командам разлічвацца ў версіях, калі гэта неабходна.

Module Federation проты Iframes

Самэ гэта паўстанавляе прычыну, чаму столькі каманд пакінулі iframes, калі Federation стаў болей развітым. Вы захоўваеце незалежнасць у разгружэнні, якая раней была прыемнаю для iframes, не жэртвуячы якасцю інтэграціі. Удалёны вычынкі дадаюць даныя праеўшчанне ў DOM хоста, дзеліцца адным светам JavaScript і можу пераўжываць пакеты-падрыхтавальнікі, стан і пакеты дызайну — задачы, якія раней былі складнымі або немагчымымі праз межы iframe.

Чаму большыя каманды яго выкарыстоўваюць

Маленькія продукты рэдка калі патрабуюць такой тэхнікі. Арганізацыі з многамя складамі фронтэнду на адной плошчы выкарыстоўваюць Federation, каб усунуць структурныя перашкоды:

• Незалежная розгортка. Адміністратары далявых сервераў можу выкласты правакі без перабудовы артыфактав усіх іншых каманд.
• Автаномія каманд. Кожная група падтрымлівае свой власны тэмп, сістэму CI і, ў меры можлівасцяў, выбір інструментаў.
• Шырэйшая складанне. Адсутнасць звязку межа далявымі серверамі значыць, што незначныя змены не выклікают перабудову всей сістэмы.
• Пашаговая модэрнізацыя. Старыя структуры можу поступова дадаць новыя далявыя серверы, замест таго каб усё пераканаліць за раз.
• Гнеккавасць стака. Найпростае — аднаўляць спадчынную палату, але каманды іноды налажваюць працу межа вялікімі версіямі або, з большымі зусіллямі, рознымі палатамі, чырз межы Федэрацыі.

Практычныя прыклады выкарыстоўвання

Сайты для торгавлі частаўка дозволяюць камандам, які адпавядаюць за каталог, працэс пакупкі і адзначэння ўчастнікаў, выкорыстоваць аддзельныя інструменты керування. Продукты тыпу SaaS выдаюць віджэты для панелей керування або панелі налашчэння ад каманд, якія розрабатываюць функцыі, не патрэбнае адкрываючы основную структуру для кожных змян. Працэсы міграцыі аддзеляюць часткі старых SPA-продуктов у окрэмыя інструменты керування, паказваючы ў той жа час старую версію прыладкі.

Короткая падсумовка ключавых прынтэў

Ценнасць федэрацыі можна выразіць за дзеякімі пунктамі: рэальная можлівасць незалежнага размешчэння коду, спяльны час адработкі, які запобегае дуплікацыі бібліятэк і нестабільнай перадачы даных межаў разных прыладак, а таксама корыстнікавы досвяд, які заставаецца сэродзейным для адной прыладкі. Хоць яна і дае обявленую автаномію, ў яе немае наследкав у вачынку інтэграціі і падвышанняя продуктыўнасці.

Заключэнне

Пераход з iframes на Module Federation ўскладнівае архітэктуру фронтэнду: незалежна розгортка і цялеспрамованы UX больш не павінны быць працоўнасуперакты. Webpack 5 зробіў такую комбінацыю прыемлівайя для організацый, якія актывна вікорыстоўваюць React і якім ужэ не падходзіць адна загальная бандл-файловая структура. Калі ўжыццё расшыраецца, а такія інструменты, як Rspack і Module Federation 2.0, розвіваюць ідэі спакульнага аднароджэння коду, розумеў, чаму адбылася такая зміна, дапамагае кожнаму, хто праектуе велікія React-сістэмы, свядома выбіраць межы адпаведальнасці, замест таго каб прымусова вярнуцца да iframes чы ўсе больш растучага моналіту.

Спробуйце самі

Мінімальны прыклад хоста/ранейвайна доступны на react_module_federation.

Клонуйце яго локальна:

git clone https://github.com/ModithaM/react_module_federation.git
cd react_module_federation

Спачатку запускайце ранейвайн, каб яго відкрытыя элементы пачалі працаваць раней, чым хост запітае про модулі:

cd remote
npm install
npm start

У другай тэрмінале запускайце хост:

cd host
npm install
npm start

Ачынайце хост у браузеры; ён павінен завантажваць даляветныя компоненты пад час выканання і паказваць апісаны вышэй зв’язак. Парадак мае значэнне: хост, які запускаецца самастаём, не мае чаго завантажваць пакуль даляветны элементы не будуць доступныя, што ўсё ж такі ёсць корыстным нагадваннем пра тое, што незалежнасць Federation все ўсё залежыць ад таго, чы рэмотныя элементы ёсць доступныя пад час запуску шэлу.