Jak funguje architektura React Native (bridge vs nová architektura)?

Question

Accepted Answer

React Native spouští **JavaScript** a **nativní** kód, které si musí vzájemně komunikovat. Původní architektura používala asynchronní **bridge**; **nová architektura** (JSI, TurboModules, Fabric) umožňuje rychlejší, synchronní komunikaci. Pochopení tohoto objasňuje chování a výkon React Native.

## Původní architektura: 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
```

## Nová architektura (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.
```

## Proč na tom záleží (prakticky)

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

## Proč na tom záleží

Pochopení architektury React Native je cenná znalost na seniorské úrovni, protože **vysvětluje chování a charakteristiky výkonu React Native**, prohloubuje schopnost uvažovat o aplikacích a optimalizovat je.

Fundamentální struktura — React Native spuštěné na **JS vlákně** (váš kód) a na **nativní straně** (UI, nativní moduly), které si musí **komunikovat** — je klíčem k pochopení, jak React Native funguje.

Pochopení **původní architektury bridge** (kde JS a nativní kód komunikují přes asynchronní bridge, který serializuje zprávy na JSON a předává je) vysvětluje historické charakteristiky a omezení výkonu React Native: komunikace byla pouze asynchronní, měla režii serializace a bridge mohl být **úzkým místem při vysokém provozu** (způsobující jank při rychlém posouvání nebo animacích s přenosem dat) — což je **důvod, proč byly důležité optimalizace minimalizující přechody přes bridge a spouštění animací na nativním vlákně**, propojující architekturu s praktickými radami na výkon.

Pochopení **nové architektury** (**JSI** umožňující přímá, synchronní JS↔nativní volání bez serializačního bridge; **TurboModules** pro lazy loading nativních modulů; **Fabric** pro lepší vykreslování; Codegen pro type-safe rozhraní) je stále důležitější, protože se stává výchozím — zlepšuje výkon, snižuje režii, umožňuje synchronní volání a vytváří plynulejší UI, což představuje významný vývoj React Native.

Pochopení této architektury **vysvětluje výkon React Native** (proč bridge záležel), **informuje optimalizaci** (postupy vyplývající z architektury) a objasňuje, jak se React Native spouští — transformuje React Native z černé skříňky v srozumitelný systém.

Pa pochopení architektury (bridge a nové JSI architektury) vysvětluje charakteristiky výkonu React Native, informuje optimalizaci a odráží povědomí o jejím důležitém vývoji, a jelikož tato hloubka zvyšuje poznání React Native z pouhého používání k jeho porozumění, je pochopení architektury React Native cenná znalost na seniorské úrovni — vysvětluje její chování a výkon, informuje optimalizaci a odráží hloubku a povědomí o vývoji platformy očekávaných na seniorských pozicích v React Native.