Serye · 34 bahagi · Isinusulat pa
React Native Module Federation
Bumuo ng federated React Native app mula sa simula gamit ang Module Federation at Re.Pack: runtime remotes, ang shared-singleton contract, at host shell na may hawak ng navigation.
16 sa 34 nai-publish na Susunod na part · Hunyo 1, 2026
- Bakit Module Federation sa React Native Ano ang ibinibigay ng runtime micro-apps sa React Native app, ano ang halaga nito, at kailan sulit ang palitan. Panimula sa series na bubuo ng federated setup.
- Why Module Federation in React Native
- Ang iyong unang federated remote sa React Native Dalawang React Native app, isa naglo-load ng screen ng isa pa sa runtime sa Module Federation 2.0 at Re.Pack. Bawat hakbang copy-paste, tapos tumatakbong app.
- Your first federated remote in React Native
- Ang shared-singleton contract sa React Native Module Federation I-share ang react, react-native at isang native library sa host at remote nito nang tama; ang maling paggawa ay nagpapa-crash sa app sa launch, hindi tahimik.
- The shared-singleton contract in React Native Module Federation
- Ang host shell: mga federated remote bilang tabs sa React Native Gawing tunay na app shell ang host: ito ang may-ari ng tab bar at navigation, at bawat tab ay remote na binuo, na-ship at nilo-load nang mag-isa.
- The host shell: federated remotes as tabs in React Native
- Ang contract package: isang versioned na seam sa pagitan ng mga federated remote sa React Native Walang app na nakakakita ng ini-ship ng iba. Dalawang package na na-install by version (isang typed na contract at ang shared na detail screen) ang nagbibigay sa bawat panig ng isang depinisyon; semver ang bahala sa drift.
- The contract package: a versioned seam between federated remotes in React Native
- Isang shared store: server state sa mga federated remote sa React Native Isang remote at isang installed na package ang nag-i-inject ng kani-kanilang endpoint sa iisang store ng host at nagshe-share ng isang cache; kapag namali ang pag-share, mag-ha-hang ang screen sa isang spinner na hindi nare-resolve kailanman.
- One shared store: server state across federated remotes in React Native
- Kanino ang alin: mga boundary, team at coupling sa isang federated React Native app Kanino ang isang boundary, isang component, isang depinisyon ng data? Limang test para hatiin ang isang federated React Native app ayon sa linya ng mga team, at kung ano ang nagpapabago sa bawat sagot.
- Who owns what: boundaries, teams and coupling in a federated React Native app
- Client state sa kabila ng seam: mga remote na may dalang sariling slice sa React Native Isang remote ang nag-i-inject ng slice na siya lang ang may-ari sa shared store, dala ng contract ang nag-iisang action na tumatawid, at dumarating ang write bilang prop; mag-dispatch bago pa mabuo ang slice at tahimik na mawawala ang add.
- Client state across the seam: remotes that bring their own slices in React Native
- Mga state stack sa ilalim ng federation: ang parehong React Native app na binuo nang dalawang beses Muling binubuo ng TanStack Query at Zustand ang app na kabubuo lang ng Redux Toolkit at RTK Query; gumagana pareho, at ang nagpapaiba sa kanila ay kung ano ang mangyayari kapag tumigil sa pagkoordina ang mga independent na team.
- State stacks under federation: the same React Native app built twice
- Dalawang backend, isang client? RTK Query vs Apollo sa React Native Ang parehong PokéAPI data ay dumarating sa REST at GraphQL sa iisang RTK Query slice, isang tag ang nag-i-invalidate sa dalawa, at ang tapat na tanong: kailan sulit ang normalized na cache ng Apollo kung dalawang cache ang presyo habang lumilipat.
- Two backends, one client? RTK Query vs Apollo in React Native
- Ang design system bilang federated singleton sa React Native Tatlong federated na app ang may dalang tig-isang kopya ng parehong mga grey hanggang lumipat sa seam ang isang design-system package: gluestack-ui components at NativeWind sa ilalim ng Re.Pack, isang shared singleton, at isang theme toggle na sabay na nagre-repaint sa lahat ng remote.
- The design system as a federated singleton in React Native
- Accessibility testing sa mga federated remote sa React Native Isang shared testing package ang nagbibigay ng parehong WCAG bar sa bawat remote: sinusuri ang contrast, touch target at status semantics sa mga package na nagmamay-ari ng mga ito, sinusuri ng bawat team ang sarili nitong screen sa sarili nitong suite, at may isang pumalyang test na nakatuklas ng button na walang makasukat.
- Accessibility testing across federated remotes in React Native
- shell.navigateTo: mga native screen mula sa federated remote sa React Native JavaScript lang ang dala ng isang remote, kaya nagpapahiram ang host ng native screen sa pamamagitan ng isang promise: isang routing table, isang TurboModule, at isang Quick Battle sa SwiftUI at Compose na ginawa para mag-resolve ng promise ang bawat exit.
- shell.navigateTo: native screens from a federated remote in React Native
- Ang production build at ang tatlong mode ng isang federated React Native app Umaalis ang mga remote sa dev server: binuo para sa production, sinasignan sa build, at sineserve mula sa CDN na isang directory at isang port lang. Nasa gitna ang registry, at isang table ang nagsasabi kung aling mga pagbabago ang nangangailangan pa rin ng app-store release.
- The production build and the three modes of a federated React Native app
- CDN delivery: ang version map, ang resolver, at ang live na flip Sa bawat launch, tinatanong ng app sa CDN kung aling mga remote version ang puwede nitong patakbuhin. Pagkatapos, nagpapadala ang isang operator ng bago sa isang naka-install na app gamit ang isang directory at isang linya ng JSON, at ibinabalik ito sa parehong paraan. Kasama rin kung ano ang pinapayagan ng Apple at Google, sinipi mula sa kasalukuyang mga teksto.
- CDN delivery: the version map, the resolver, and the live flip
- Fallback para sa mga federated remote: ang kopya sa binary at ang net sa session Bumagsak ang CDN at nagsisimula pa rin ang app, mula sa kopya ng bawat remote na nakalagay sa binary. Sa isang CDN launch, ang remote na hindi ma-load ay lumilipat sa sarili nitong kopya habang nananatili sa CDN ang isa, at sa wakas ay nagre-retry na ang Try again.
- Fallback for federated remotes: the copy in the binary and the net in the session
- Ang naka-sign na map at ang app na kusang nagro-rollback
- The signed map and the app that rolls itself back