Comment fonctionne l'architecture de React Native (bridge vs nouvelle architecture) ?

Question

Accepted Answer

React Native exécute du code **JavaScript** et du code **natif** qui doivent communiquer. L'architecture d'origine utilisait un **bridge** asynchrone ; la **nouvelle architecture** (JSI, TurboModules, Fabric) permet une communication plus rapide et synchrone. Comprendre cela clarifier le comportement et les performances de React Native.

## L'architecture originale : le 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 nouvelle architecture (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.
```

## Pourquoi c'est important (pratiquement)

```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
```

## Pourquoi c'est important

Comprendre l'architecture de React Native est une connaissance précieuse au niveau senior car elle **explique le comportement et les caractéristiques de performance de React Native**, approfondissant la capacité à raisonner sur les applications et à les optimiser.

La structure fondamentale — React Native exécutant un **thread JS** (votre code) et le **côté natif** (UI, modules natifs) qui doivent **communiquer** — est la clé pour comprendre le fonctionnement de React Native.

Comprendre l'**architecture du bridge d'origine** (où JS et natif communiquent via un bridge asynchrone qui sérialise les messages en JSON et les transmet) explique les caractéristiques et limitations historiques de performance de React Native : la communication était asynchrone uniquement, avait une surcharge de sérialisation, et le bridge pouvait devenir un **goulot d'étranglement avec beaucoup de trafic** (causant du saccadé lors d'un défilement rapide ou des animations passant des données à travers) — ce qui explique **pourquoi minimiser les traversées du bridge et exécuter les animations sur le thread natif étaient des optimisations importantes**, connectant l'architecture aux conseils de performance pratiques.

Comprendre la **nouvelle architecture** (**JSI** permettant des appels JS↔natif directs et synchrones sans le bridge de sérialisation ; **TurboModules** pour le chargement lazy des modules natifs ; **Fabric** pour un meilleur rendu ; Codegen pour les interfaces type-safe) devient de plus en plus important car elle devient la norme — elle améliore les performances, réduit la surcharge, active les appels synchrones et produit une UI plus fluide, représentant une évolution significative de React Native.

Comprendre cette architecture **explique les performances de React Native** (pourquoi le bridge était important), **informe l'optimisation** (les pratiques qui découlent de l'architecture), et clarifier la façon dont React Native s'exécute — transformant React Native d'une boîte noire en un système compréhensible.

Puisque comprendre l'architecture (le bridge et la nouvelle architecture basée sur JSI) explique les caractéristiques de performance de React Native, informe l'optimisation, et reflète la conscience de son évolution importante, et puisque cette profondeur élève d'utiliser React Native à le comprendre, comprendre l'architecture de React Native est une connaissance précieuse au niveau senior — expliquant son comportement et ses performances, informant l'optimisation, et reflétant la profondeur et la conscience de l'évolution de la plateforme attendues pour les rôles React Native senior.