Blog

Serie actual

Todas las series
17 partes · En curso · próxima parte: 12 octEn 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 17 publicadosEmpieza por la parte 1Próxima parte · 12 oct
Una app que funciona desde las copias que lleva dentro mientras falla una de sus líneas de suministro

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.

Dos versiones de la app reciben cada una sus propias versiones de los remotes desde la misma CDN mientras cambia una línea del mapa

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.

Tres líneas de suministro alimentan una sola app federada: un servidor de desarrollo, un registro y una CDN

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.

Un remote federado llega a una pantalla nativa a través de la escotilla del host y recibe su resultado

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.

Un gran medidor sobre un pie y tres paneles con forma de móvil, cada uno con su propio medidor pequeño, con un tubo fino que sale de cada panel hacia el medidor grande

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.

Una paleta de design system que alimenta tres paneles de apps federadas

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.

Dos backends alimentando una única caché de cliente compartida entre módulos federados

¿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.

La misma app federada conectada a dos stacks de estado distintos

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.

Un remote federado que añade su propio slice a un store compartido mientras otro remote accede a ese slice desde el otro lado de la frontera

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.

Una app federada dibujada como territorios de equipos distintos, unidos por finos raíles compartidos y una pequeña shell central

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.

Una app host con un único store compartido que dos features publicadas por separado llenan con datos en vivo de una API

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.

Tags de RTK Query vs query keys de TanStack Query

Tags vs query keys: una pequeña diferencia de API que cambia cómo se coordinan los equipos

Los tags de RTK Query y las query keys de TanStack Query parecen intercambiables en código de un solo equipo. A escala multiequipo cambian qué falla cuando los equipos se desincronizan.

Cargar más artículos