Kako funkcionira arhitektura React Native-a (bridge vs nova arhitektura)?

Question

Accepted Answer

React Native pokreće **JavaScript** i **nativni** kod koji moraju komunicirati. Originalna arhitektura koristila je asinkroni **bridge**; **nova arhitektura** (JSI, TurboModuli, Fabric) omogućava bržu, sinkronu komunikaciju. Razumijevanje ovoga pojašnjava ponašanje i performanse React Native-a.

## Originalna arhitektura: 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
```

## Nova arhitektura (JSI, TurboModuli, 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.
```

## Zašto je to važno (praktično)

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

## Zašto je to važno

Razumijevanje React Native arhitekture vrijedno je znanje za razinu seniora jer **objašnjava ponašanje i karakteristike performansi React Native-a**, produbljujući sposobnost razumijevanja i optimizacije aplikacija.

Fundamentalna struktura — React Native pokreće **JS thread** (vaš kod) i **nativnu stranu** (UI, nativne module) koja moraju **komunicirati** — ključ je za razumijevanje kako React Native funkcionira.

Razumijevanje **originalne bridge arhitekture** (gdje JS i nativni kod komuniciraju preko asinkroni bridge-a koji serijalizira poruke u JSON i prosleđuje ih) objašnjava historijske karakteristike performansi i ograničenja React Native-a: komunikacija je bila samo asinkrona, imala je serializacijski overhead, i bridge je mogao postati **usko grlo s intenzivnom prometom** (uzrokujući jank pri brzom scrollanju ili animacijama koje prosleđuju podatke) — što je **zašto minimiziranje bridge prelazaka i pokretanje animacija na nativnoj niti su bila važna poboljšanja**, povezujući arhitekturu s praktičnim savjetima za performanse.

Razumijevanje **nove arhitekture** (**JSI** omogućava direktne, sinkrone JS↔nativne pozive bez serijalizacijskog bridge-a; **TurboModuli** za lijenо učitavanje nativnih modula; **Fabric** za bolji rendering; Codegen za type-safe sučelja) postaje sve važnije jer postaje standardna — poboljšava performanse, smanjuje overhead, omogućava sinkrone pozive, i proizvodi glađi UI, što predstavlja značajnu evoluciju React Native-a.

Razumijevanje ove arhitekture **objašnjava performanse React Native-a** (zašto je bridge bio važan), **informira optimizaciju** (prakse koje slijede iz arhitekture), i pojašnjava kako se React Native izvršava — transformirajući React Native iz crne kutije u razumljiv sustav.

Budući da razumijevanje arhitekture (bridge i nove JSI-bazirane arhitekture) objašnjava karakteristike performansi React Native-a, informira optimizaciju, i odražava svjesnost važne evolucije, i budući da ta dubina elevira nekoga od korištenja React Native-a do razumijevanja njega, razumijevanje React Native arhitekture je vrijedno znanje za razinu seniora — objašnjava njeno ponašanje i performanse, informira optimizaciju, i odražava dubinu i svjesnost evolucije platforme očekivanu za senior React Native uloge.