Etiqueta: tutorial

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

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.