Blog

Sèrie en curs

Totes les sèries
17 parts · En curs · propera part: 12 d’oct.En curs

React Native Module Federation

Construeix una app React Native federada des de zero amb Module Federation i Re.Pack: remots en temps d'execució, el contracte de singleton compartit i un host shell que controla la navegació.

16 de 17 publicatsComença per la part 1Propera part · 12 d’oct.
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 federada dibuixada com a territoris d'equips diferents, units per fins raïls compartits i una petita shell central

Qui respon de què: fronteres, equips i acoblament en una app React Native federada

Qui respon d'una frontera, d'un component, d'una definició de dades? Cinc tests per tallar una app React Native federada per línies d'equip, i què mou cada resposta.

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.

Tags de RTK Query vs query keys de TanStack Query

Tags vs query keys: una petita diferència d'API que canvia com es coordinen els equips

Les tags de RTK Query i les query keys de TanStack Query semblen intercanviables en codi d'un sol equip. A escala de diversos equips, canvien què falla quan els equips es desincronitzen.

Carrega més articles