Come funziona l'architettura di React Native (bridge vs nuova architettura)?

Question

IT Interview Practice · Accepted Answer

React Native esegue codice **JavaScript** e **nativo** che devono comunicare. L'architettura originale utilizzava un **bridge** asincrono; la **nuova architettura** (JSI, TurboModules, Fabric) abilita una comunicazione più veloce e sincrona. Comprendere questo chiarisce il comportamento e le prestazioni di React Native.

## L'architettura originale: il bridge

```text
React Native runs:
  → a JS THREAD (your React/JS code) and the NATIVE side (UI, native modules)
  → they communicate over a BRIDGE: messages are SERIALIZED (to JSON), passed ASYNC,
    and deserialized on the other side
Limitations:
  ✗ ASYNCHRONOUS only (can't call native synchronously)
  ✗ SERIALIZATION overhead; the bridge can be a BOTTLENECK with heavy traffic
  ✗ e.g. fast scrolling/animations passing data over the bridge → jank
```

## La nuova architettura (JSI, TurboModules, Fabric)

```text
The NEW ARCHITECTURE replaces the bridge:
  JSI (JavaScript Interface) → JS can call native code DIRECTLY and SYNCHRONOUSLY
    (no serialization bridge) → much faster JS↔native interop
  TURBOMODULES → native modules loaded lazily, via JSI (faster, on-demand)
  FABRIC → the new rendering system → better, more efficient UI rendering; sync layout
  CODEGEN → type-safe JS↔native interfaces
→ Result: better performance, less overhead, synchronous calls, smoother UI.
```

## Perché è importante (praticamente)

```text
→ Explains React Native's PERFORMANCE characteristics (why bridge traffic was costly)
→ The new architecture (default in recent RN) improves performance and interop
→ Informs optimization (minimize bridge crossings on the old architecture; native-thread
  animations) and understanding of how RN executes
```

## Perché è importante

Comprendere l'architettura di React Native è una conoscenza preziosa a livello senior perché **spiega il comportamento e le caratteristiche di prestazione di React Native**, approfondendo la capacità di ragionare su e ottimizzare le app.

La struttura fondamentale — React Native che esegue un **thread JS** (il tuo codice) e il **lato nativo** (UI, moduli nativi) che devono **comunicare** — è la chiave per comprendere come funziona React Native.

Comprendere l'**architettura originale del bridge** (dove JS e il codice nativo comunicano tramite un bridge asincrono che serializza i messaggi a JSON e li passa attraverso) spiega le caratteristiche storiche di prestazione e i limiti di React Native: la comunicazione era solo asincrona, aveva overhead di serializzazione, e il bridge poteva diventare un **collo di bottiglia con traffico intenso** (causando scatti durante lo scroll veloce o le animazioni che passano dati attraverso) — ecco **perché ridurre al minimo i passaggi del bridge ed eseguire le animazioni sul thread nativo erano ottimizzazioni importanti**, collegando l'architettura ai consigli pratici di prestazione.

Comprendere la **nuova architettura** (**JSI** che abilita chiamate dirette e sincrone JS↔native senza il bridge di serializzazione; **TurboModules** per il caricamento lazy dei moduli nativi; **Fabric** per un rendering migliore; Codegen per interfacce type-safe) è sempre più importante poiché sta diventando l'impostazione predefinita — migliora le prestazioni, riduce l'overhead, abilita le chiamate sincrone e produce un'interfaccia utente più fluida, rappresentando l'evoluzione significativa di React Native.

Comprendere questa architettura **spiega le prestazioni di React Native** (perché il bridge era importante), **informa l'ottimizzazione** (le pratiche che seguono dall'architettura), e chiarisce come React Native si esegue — trasformando React Native da una scatola nera a un sistema comprensibile.

Poiché comprendere l'architettura (il bridge e la nuova architettura basata su JSI) spiega le caratteristiche di prestazione di React Native, informa l'ottimizzazione, e riflette la consapevolezza della sua importante evoluzione, e poiché questa profondità eleva qualcuno dall'usare React Native al comprenderlo, comprendere l'architettura di React Native è una conoscenza preziosa a livello senior — spiegando il suo comportamento e le prestazioni, informando l'ottimizzazione, e riflettendo la profondità e la consapevolezza dell'evoluzione della piattaforma attesa per ruoli React Native senior.

L'architettura originale: il bridge

La nuova architettura (JSI, TurboModules, Fabric)

Perché è importante (praticamente)

Perché è importante

Domande correlate