Serye · 19 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.
9 sa 19 nai-publish na Susunod na part · Agosto 17, 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- The design system as a federated singleton
- Accessibility testing across federated remotes
- shell.navigateTo: RN ↔ native handoff
- The production build and the three modes
- Loading remotes from a CDN + version resolution
- The live two-version flip
- Offline fallback baked into the binary
- In-session fallback when a remote fails
- Signing the version-map + replay/rollback guard
- Health-based cross-launch auto-rollback