Etiqueta: Re.Pack

15 articles

Sèrie:

Una app que funciona des de les còpies que porta a dins mentre falla una de les seves línies de subministrament

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.

Dues versions de l'app reben, cadascuna, les seves versions dels remotes des de la mateixa CDN mentre canvia una línia del mapa

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.

Tres línies de subministrament alimenten una sola app federada: un servidor de desenvolupament, un registre i una CDN

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.

Un remote federat arriba a una pantalla nativa a través de l'escotilla del host i en rep el resultat

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.

Un mesurador gran sobre un peu i tres panells amb forma de mòbil, cadascun amb el seu mesurador petit, amb un tub prim que surt de cada panell cap al mesurador gran

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.

Una paleta de design system que alimenta tres panells d'apps federades

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.

Dos backends alimentant un únic cache de client compartit entre mòduls federats

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

La mateixa app federada connectada a dos stacks d'estat diferents

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.

Un remote federat que afegeix el seu propi slice a un store compartit mentre un altre remote hi creua

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.

Una app host que manté un sol store compartit que dues features publicades per separat omplen amb dades en directe d'una API

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.

Apps construïdes per separat instal·lant paquets versionats (un contracte tipat i una pantalla compartida) des d'un mateix registre

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.

Una app host de React Native amb una tab bar inferior, cada pestanya carregant un remote diferent en temps d'execució

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.

Un host i un remote de React Native compartint una sola còpia d'una biblioteca a través d'un únic share scope

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.

Una app host de React Native carregant una pantalla d'una app remote separada en temps d'execució

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.

Module Federation a React Native

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.