Мікро-фронтэнды на 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 все ўсё залежыць ад таго, чы рэмотныя элементы є доступныя пад час запуску шэлу.