Blog

Kasalukuyang serye

Lahat ng series
17 bahagi · Patuloy · susunod na bahagi: Okt 12Isinusulat pa

React Native Module Federation

Bumuo ng federated React Native app mula sa simula gamit ang Module Federation at Re.Pack: runtime remotes, ang shared-singleton contract, at host shell na may hawak ng navigation.

16 sa 17 nai-publish naMagsimula sa unang bahagiSusunod na part · Okt 12
Isang app na tumatakbo mula sa mga kopyang nakalagay sa loob nito habang pumapalya ang isa sa mga supply line nito

Fallback para sa mga federated remote: ang kopya sa binary at ang net sa session

Bumagsak ang CDN at nagsisimula pa rin ang app, mula sa kopya ng bawat remote na nakalagay sa binary. Sa isang CDN launch, ang remote na hindi ma-load ay lumilipat sa sarili nitong kopya habang nananatili sa CDN ang isa, at sa wakas ay nagre-retry na ang Try again.

Dalawang version ng app na tumatanggap ng kani-kanilang remote version mula sa iisang CDN habang nagbabago ang isang linya ng map

CDN delivery: ang version map, ang resolver, at ang live na flip

Sa bawat launch, tinatanong ng app sa CDN kung aling mga remote version ang puwede nitong patakbuhin. Pagkatapos, nagpapadala ang isang operator ng bago sa isang naka-install na app gamit ang isang directory at isang linya ng JSON, at ibinabalik ito sa parehong paraan. Kasama rin kung ano ang pinapayagan ng Apple at Google, sinipi mula sa kasalukuyang mga teksto.

Tatlong supply line na nagpapakain sa iisang federated app: isang dev server, isang registry, at isang CDN

Ang production build at ang tatlong mode ng isang federated React Native app

Umaalis ang mga remote sa dev server: binuo para sa production, sinasignan sa build, at sineserve mula sa CDN na isang directory at isang port lang. Nasa gitna ang registry, at isang table ang nagsasabi kung aling mga pagbabago ang nangangailangan pa rin ng app-store release.

Isang federated remote na umaabot sa native screen sa pamamagitan ng hatch ng host at tumatanggap ng resulta

shell.navigateTo: mga native screen mula sa federated remote sa React Native

JavaScript lang ang dala ng isang remote, kaya nagpapahiram ang host ng native screen sa pamamagitan ng isang promise: isang routing table, isang TurboModule, at isang Quick Battle sa SwiftUI at Compose na ginawa para mag-resolve ng promise ang bawat exit.

Isang malaking gauge na nakapatong sa tuntungan at tatlong panel na hugis telepono, may sariling maliit na gauge ang bawat isa, at may manipis na tubo mula sa bawat panel pabalik sa malaking gauge

Accessibility testing sa mga federated remote sa React Native

Isang shared testing package ang nagbibigay ng parehong WCAG bar sa bawat remote: sinusuri ang contrast, touch target at status semantics sa mga package na nagmamay-ari ng mga ito, sinusuri ng bawat team ang sarili nitong screen sa sarili nitong suite, at may isang pumalyang test na nakatuklas ng button na walang makasukat.

Isang design-system palette na pumupuno sa tatlong panel ng federated na app

Ang design system bilang federated singleton sa React Native

Tatlong federated na app ang may dalang tig-isang kopya ng parehong mga grey hanggang lumipat sa seam ang isang design-system package: gluestack-ui components at NativeWind sa ilalim ng Re.Pack, isang shared singleton, at isang theme toggle na sabay na nagre-repaint sa lahat ng remote.

Dalawang backend na pumupuno sa iisang shared na client cache sa mga federated na module

Dalawang backend, isang client? RTK Query vs Apollo sa React Native

Ang parehong PokéAPI data ay dumarating sa REST at GraphQL sa iisang RTK Query slice, isang tag ang nag-i-invalidate sa dalawa, at ang tapat na tanong: kailan sulit ang normalized na cache ng Apollo kung dalawang cache ang presyo habang lumilipat.

Ang parehong federated app na nakakabit sa dalawang magkaibang state stack

Mga state stack sa ilalim ng federation: ang parehong React Native app na binuo nang dalawang beses

Muling binubuo ng TanStack Query at Zustand ang app na kabubuo lang ng Redux Toolkit at RTK Query; gumagana pareho, at ang nagpapaiba sa kanila ay kung ano ang mangyayari kapag tumigil sa pagkoordina ang mga independent na team.

Isang federated remote na nagdadagdag ng sarili nitong slice sa isang shared store habang tumatawid dito ang isa pang remote

Client state sa kabila ng seam: mga remote na may dalang sariling slice sa React Native

Isang remote ang nag-i-inject ng slice na siya lang ang may-ari sa shared store, dala ng contract ang nag-iisang action na tumatawid, at dumarating ang write bilang prop; mag-dispatch bago pa mabuo ang slice at tahimik na mawawala ang add.

Isang federated app na iginuhit bilang mga teritoryo ng magkakaibang team, pinagdurugtong ng maninipis na shared rail at isang maliit na sentral na shell

Kanino ang alin: mga boundary, team at coupling sa isang federated React Native app

Kanino ang isang boundary, isang component, isang depinisyon ng data? Limang test para hatiin ang isang federated React Native app ayon sa linya ng mga team, at kung ano ang nagpapabago sa bawat sagot.

Isang host app na may hawak na isang shared store na pinupunan ng dalawang feature na hiwalay na inilabas ng live na API data

Isang shared store: server state sa mga federated remote sa React Native

Isang remote at isang installed na package ang nag-i-inject ng kani-kanilang endpoint sa iisang store ng host at nagshe-share ng isang cache; kapag namali ang pag-share, mag-ha-hang ang screen sa isang spinner na hindi nare-resolve kailanman.

RTK Query tags vs TanStack Query keys

Tags vs query keys: maliit na API difference na nagpapabago sa kung paano nagko-coordinate ang mga team

Mukhang interchangeable ang RTK Query tags at TanStack Query keys sa single-team na code. Sa multi-team na scale, iba ang nasisira nila kapag nawala sa sync ang mga team.

Mag-load pa ng mga post