Sèrie · 19 parts · En curs
React Native Module Federation
Construeix una app React Native federada des de zero amb Module Federation i Re.Pack: remots en temps d'execució, el contracte de singleton compartit i un host shell que controla la navegació.
9 de 19 publicats Propera part · 17 d’agost del 2026
- Per què Module Federation a React Native Què aporten les micro-apps en temps d'execució a una app React Native, què costen i quan val la pena. Intro a la sèrie que construeix un setup federat de zero.
- El teu primer remote federat a React Native Dues apps React Native, una carregant la pantalla de l'altra en execució amb Module Federation 2.0 i Re.Pack. Cada pas copia i enganxa, fins a l'app en marxa.
- El contracte de singletons compartits a React Native Module Federation Comparteix react, react-native i una llibreria nativa entre un host i el seu remote com cal; fer-ho malament fa petar l'app en arrencar, no en silenci.
- El shell del host: remotes federats com a pestanyes a React Native Converteix el host d'una sola pantalla en un shell d'app: té la tab bar i la navegació, i cada pestanya és un remote construït, desplegat i carregat a part.
- El paquet de contractes: una frontera versionada entre remotes federats a React Native Cap app no veu què publiquen les altres. Dos paquets instal·lats per versió (un contracte tipat i la pantalla de detall compartida) donen a cada costat una sola definició; semver governa la deriva.
- Un sol store compartit: estat de servidor entre remotes federats a React Native Un remote i un paquet instal·lat injecten els seus endpoints en un sol store del host i comparteixen un sol cache; si t'equivoques compartint-lo, la pantalla es queda penjada en un spinner que no es resol mai.
- Qui és amo de què: fronteres, equips i acoblament en una app React Native federada Qui és amo d'una frontera, d'un component, d'una definició de dades? Cinc tests per tallar una app React Native federada per línies d'equip, i què mou cada resposta.
- L'estat de client creua la frontera: remotes que porten els seus propis slices a React Native Un remote injecta l'slice que només ell posseeix al store compartit, el contracte porta l'única acció que creua, i l'escriptura arriba com a prop; fes dispatch abans que l'slice existeixi i l'afegir es perd en silenci.
- Stacks d'estat sota federació: la mateixa app de React Native construïda dues vegades TanStack Query i Zustand reconstrueixen l'app que Redux Toolkit i RTK Query acaben de construir; tots dos funcionen, i el que els separa és el que passa quan equips independents deixen de coordinar-se.
- 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