Serie · 34 partes · En curso
React Native Module Federation
Construye una app React Native federada desde cero con Module Federation y Re.Pack: remotes en tiempo de ejecución, el contrato de singleton compartido y un host shell que controla la navegación.
16 de 34 publicados Próxima parte · 1 de junio de 2026
- Por qué Module Federation en React Native Qué aportan a una app de React Native las micro-apps en runtime, qué cuestan y cuándo compensa. Intro de una serie que construye un setup federado desde cero.
- Why Module Federation in React Native
- Tu primer remote federado en React Native Dos apps de React Native, una carga la pantalla de la otra en runtime con Module Federation 2.0 y Re.Pack. Cada paso se copia y pega, hasta una app en marcha.
- Your first federated remote in React Native
- El contrato de singletons compartidos en React Native Module Federation Comparte react, react-native y una librería nativa entre un host y su remote de la forma correcta; hacerlo mal rompe la app al arrancar, no en silencio.
- The shared-singleton contract in React Native Module Federation
- El shell del host: remotes federados como pestañas en React Native El host pasa de una pantalla a shell de la app: lleva la tab bar y la navegación, y cada pestaña es un remote construido, desplegado y cargado aparte.
- The host shell: federated remotes as tabs in React Native
- El paquete de contratos: una frontera versionada entre remotes federados en React Native Ninguna app ve lo que publican las demás. Dos paquetes instalados por versión (un contrato tipado y la pantalla de detalle compartida) dan a cada lado una sola definición y dejan que semver gobierne la deriva.
- The contract package: a versioned seam between federated remotes in React Native
- Un store compartido: estado de servidor entre remotes federados en React Native Un remote y un paquete instalado inyectan sus endpoints en un solo store del host y comparten una caché; si lo compartes mal, la pantalla se queda colgada en un spinner que nunca se resuelve.
- One shared store: server state across federated remotes in React Native
- Quién es dueño de qué: fronteras, equipos y acoplamiento en una app React Native federada ¿Quién es dueño de una frontera, de un componente, de una definición de datos? Cinco tests para cortar una app React Native federada por líneas de equipo, y qué mueve cada respuesta.
- Who owns what: boundaries, teams and coupling in a federated React Native app
- El estado de cliente cruza la frontera: remotes que traen sus propios slices en React Native Un remote inyecta el slice que solo él posee en el store compartido, el contrato define la única acción que cruza, y la escritura entra por una prop; despacha antes de que el slice exista y la acción se pierde en silencio.
- Client state across the seam: remotes that bring their own slices in React Native
- Stacks de estado bajo federación: la misma app de React Native construida dos veces TanStack Query y Zustand reconstruyen la app que Redux Toolkit y RTK Query acaban de construir; ambos funcionan, y lo que los separa es lo que pasa cuando equipos independientes dejan de coordinarse.
- State stacks under federation: the same React Native app built twice
- ¿Dos backends, un cliente? RTK Query vs Apollo en React Native Los mismos datos de PokéAPI llegan por REST y por GraphQL a través de un solo slice de RTK Query, un tag invalida en los dos, y la pregunta honesta es cuándo la caché normalizada de Apollo justifica dos cachés durante la transición.
- Two backends, one client? RTK Query vs Apollo in React Native
- El design system como singleton federado en React Native Tres apps federadas repiten las mismas decisiones de color hasta que el design system pasa a ser un paquete en la frontera: componentes de gluestack-ui y NativeWind sobre Re.Pack, un único singleton compartido y un toggle de tema que cambia el aspecto de todos los remotes a la vez.
- The design system as a federated singleton in React Native
- Tests de accesibilidad entre remotes federados en React Native Un paquete de tests compartido pone el mismo listón WCAG en todos los remotes: contraste, áreas táctiles y semántica de estado se comprueban en los paquetes que los definen, cada equipo comprueba sus pantallas en su propia suite, y un test en rojo destapó un botón que nadie podía medir.
- Accessibility testing across federated remotes in React Native
- shell.navigateTo: pantallas nativas desde un remote federado en React Native Un remote solo entrega JavaScript, así que el host le presta una pantalla nativa a través de una única promesa: una tabla de rutas, un TurboModule y un Quick Battle en SwiftUI y Compose construido para que cada salida resuelva la promesa.
- shell.navigateTo: native screens from a federated remote in React Native
- La build de producción y los tres modos de una app React Native federada Los remotes dejan el servidor de desarrollo: construidos para producción, firmados en tiempo de build y servidos desde una CDN que es un directorio y un puerto. El registro queda en medio, y una tabla dice qué cambios siguen costando una publicación en la tienda.
- The production build and the three modes of a federated React Native app
- Entrega por CDN: el mapa de versiones, el resolver y el cambio en vivo En cada arranque, la app pregunta a la CDN qué versiones de los remotes puede ejecutar. Después, un operador envía una nueva a una app ya instalada con un directorio y una línea de JSON, y la revierte de la misma forma. Además, lo que permiten Apple y Google, citado de los textos vigentes.
- CDN delivery: the version map, the resolver, and the live flip
- Fallback para remotes federados: la copia en el binario y la red de seguridad en la sesión La CDN se cae y la app arranca igualmente, desde una copia de cada remote incluida en el binario. En un arranque en modo CDN, un remote que no llega a cargarse pasa a su propia copia mientras el otro sigue en la CDN, y Try again por fin reintenta.
- Fallback for federated remotes: the copy in the binary and the net in the session
- El mapa firmado y la app que hace rollback sola
- The signed map and the app that rolls itself back