Sèrie · 34 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ó.
16 de 34 publicats Propera part · 1 de juny 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.
- Why Module Federation in React Native
- 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.
- Your first federated remote in React Native
- El contracte de singletons compartits a React Native Module Federation Comparteix react, react-native i una biblioteca nativa entre un host i el seu remote com cal; fer-ho malament fa petar l'app en arrencar, no en silenci.
- The shared-singleton contract in React Native Module Federation
- 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.
- The host shell: federated remotes as tabs in React Native
- 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.
- The contract package: a versioned seam between federated remotes in React Native
- 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.
- One shared store: server state across federated remotes in React Native
- Qui respon de què: fronteres, equips i acoblament en una app React Native federada Qui respon 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.
- Who owns what: boundaries, teams and coupling in a federated React Native app
- L'estat de client creua la frontera: remotes que porten els seus propis slices a React Native Un remote injecta a l'store compartit l'slice que només és seu, 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.
- Client state across the seam: remotes that bring their own slices in React Native
- 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.
- State stacks under federation: the same React Native app built twice
- Dos backends, un client? RTK Query vs Apollo a React Native Les mateixes dades de PokéAPI arriben per REST i per GraphQL a través d'un sol slice de RTK Query, un tag invalida en tots dos, i la pregunta honesta és quan el cache normalitzat d'Apollo justifica dos caches durant la transició.
- Two backends, one client? RTK Query vs Apollo in React Native
- El design system com a singleton federat a React Native Tres apps federades repeteixen les mateixes decisions de color fins que el design system passa a ser un paquet a la frontera: components de gluestack-ui i NativeWind sobre Re.Pack, un únic singleton compartit i un toggle de tema que canvia l'aspecte de tots els remotes alhora.
- The design system as a federated singleton in React Native
- Tests d'accessibilitat entre remotes federats a React Native Un paquet de tests compartit posa el mateix llistó WCAG a tots els remotes: contrast, àrees tàctils i semàntica d'estat es comproven als paquets que els defineixen, cada equip comprova les seves pantalles a la seva suite, i un test en vermell va destapar un botó que ningú no podia mesurar.
- Accessibility testing across federated remotes in React Native
- shell.navigateTo: pantalles natives des d'un remote federat a React Native Un remote només lliura JavaScript, així que el host li presta una pantalla nativa a través d'una única promesa: una taula de rutes, un TurboModule i un Quick Battle en SwiftUI i Compose construït perquè cada sortida resolgui la promesa.
- shell.navigateTo: native screens from a federated remote in React Native
- La build de producció i els tres modes d'una app React Native federada Els remotes deixen el servidor de desenvolupament: construïts per a producció, signats en temps de build i servits des d'una CDN que és un directori i un port. El registre queda al mig, i una taula diu quins canvis encara costen una publicació a la botiga.
- The production build and the three modes of a federated React Native app
- Lliurament per CDN: el mapa de versions, el resolver i el canvi en viu A cada arrencada, l'app pregunta a la CDN quines versions dels remotes pot executar. Després, un operador n'envia una de nova a una app ja instal·lada amb un directori i una línia de JSON, i la reverteix de la mateixa manera. A més, què permeten Apple i Google, citat dels textos vigents.
- CDN delivery: the version map, the resolver, and the live flip
- Fallback per a remotes federats: la còpia al binari i la xarxa de seguretat a la sessió La CDN cau i l'app arrenca igualment, des d'una còpia de cada remote inclosa al binari. En una arrencada en mode CDN, un remote que no es carrega passa a la seva còpia mentre l'altre continua a la CDN, i Try again per fi reintenta.
- Fallback for federated remotes: the copy in the binary and the net in the session
- El mapa signat i l'app que fa rollback sola
- The signed map and the app that rolls itself back