Tilan ja reitityksen jakaminen remote-sovellusten välillä

Jokainen Module Federation -remote on itsenäisesti rakennettu ja julkaistu sovellus. Sen tila (React useState, Context ja Zustand-säilöt) elää omassa JavaScript-moduulin näkyvyysalueessaan. Host ja remotet eivät jaa tilaa automaattisesti – jakaminen on suunniteltava erikseen.

Yksinkertaisin tilan jakamisen mekanismi on URL: mikä tahansa remote voi lukea URL-parametreja, kyselymerkkijonoja ja hash-arvoja ilman remotejen välistä viestintää. Tämä sopii hyvin ensisijaiseen navigointitilaan, suodattimien arvoihin ja kaikkeen tilaan, jonka pitäisi olla mahdollista tallentaa kirjanmerkiksi ja jakaa linkkinä.

Selaimen EventTargetin kautta välitettävien CustomEvents-tapahtumien avulla remotet voivat viestiä ilman suoria importteja. Remote kutsuu window.dispatchEvent(new CustomEvent('cart:updated', { detail: cart })), ja mikä tahansa muu moduuli (host tai toinen remote) kuuntelee tapahtumaa kutsulla window.addEventListener('cart:updated', handler). Yhteistä moduulia ei tarvita.

Luokaa oma "state remote", joka tarjoaa Zustand- tai Jotai-säilön. Sekä host että muut remotet tuovat sen jaetusta state remotesta ja saavat saman store-instanssin, koska kyseessä on jaettu singleton. Tämä on tehokas ratkaisu monimutkaiseen jaettuun tilaan (todennus, ostoskori ja käyttäjäasetukset), mutta lisää käyttöönottoriippuvuuden.

Shell (host) omistaa kaiken jaetun tilan ja välittää sen remoteille propseina tai Contextin kautta. Remotet saavat callbackit, kuten onCartUpdate, ja navigointitoiminnot propseina. Näin tila pysyy keskitettynä hostissa, mutta hostin on tunnettava remotejen API:t, mikä luo tiukan kytkennän.

React Routerin history- ja location-tila tarjotaan Router-komponentilla (BrowserRouter tai createBrowserRouter). Module Federation -kokoonpanossa saa olla täsmälleen yksi Router. Jos se sijoitetaan jokaiseen remoteen, syntyy useita keskenään kilpailevia reitityskonteksteja, mikä aiheuttaa navigointiristiriitoja.

Arkkitehtuurisääntö on seuraava: host (shell) tarjoaa Routerin. Remotet saavat hostilta reitityspropsit tai lukevat URL:n suoraan. Remote ei saa koskaan luoda omaa BrowserRouter-komponenttia – se olisi ristiriidassa hostin Routerin kanssa ja rikkoisi koko sovelluksen navigoinnin.

React Context -arvot ovat sidoksissa tiettyyn React-instanssiin ja Context-objektiin. Jotta Context toimisi hostin ja remoten välillä, molempien on tuotava sama Context-objekti samasta lähteestä – tyypillisesti jaetusta state remotesta tai jaettujen apuohjelmien paketista. React-singleton varmistaa, että sama Context toimii kaikissa remoteissa.

Selkeässä Module Federation -arkkitehtuurissa shell (host) omistaa HTML-kuoren, Router-palveluntarjoajan, Auth-kontekstin, teeman/design token -tarjoajan ja yleisen navigoinnin. Remotet omistavat omien toiminnallisuusalueidensa sisällön. Shell kokoaa remotet osaksi asettelua tuntematta niiden toteutuksen yksityiskohtia.

Module Federationin suurin antipattern on tiukka host–remote-kytkentä: host tuo tyyppejä remotesta, remote tuo komponentteja hostista tai ne jakavat yhteisen npm-paketin, joka molempien on päivitettävä samanaikaisesti. Tällaiset kytkennät kumoavat itsenäisen käyttöönoton tarkoituksen.

Määritelkää hostin ja remotejen välille selkeät sopimukset: propsit, jotka remote-komponentti hyväksyy, CustomEvents-tapahtumat, jotka se lähettää, sekä URL-parametrit, joita se lukee. Dokumentoikaa nämä sopimukset jaetun types-paketin TypeScript-rajapintoina. Näin tiimit voivat kehittyä itsenäisesti sovitun sopimuksen puitteissa.

Tilan jakamiseen Module Federation -remotejen välillä voidaan käyttää URL-tilaa (yksinkertaisin vaihtoehto), CustomEvents-tapahtumia (löyhästi kytketty), jaetun tilan remotea (keskitetty säilö) tai hostin omistamaa tilaa, joka välitetään propseina. Hostin on omistettava ainoa Router-palveluntarjoaja – remotet eivät saa koskaan luoda omaa. Selkeät TypeScript-rajapintojen avulla määritetyt viestintäsopimukset pitävät tiimit erillään ja mahdollistavat aidosti itsenäisen käyttöönoton.