Etiqueta: tutorial

12 artículos

Serie:

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.

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

Apps construidas por separado instalando paquetes versionados (un contrato tipado y una pantalla compartida) desde un mismo registro

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.

Una app host de React Native con una tab bar inferior, cada pestaña cargando un remote distinto en runtime

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.

Un host y un remote de React Native compartiendo una sola copia de una librería a través de un único share scope

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.

Una app host de React Native cargando una pantalla desde una app remote separada en runtime

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.