React Native mimarisi nasıl çalışır (bridge vs yeni mimari)?

Question

Accepted Answer

React Native **JavaScript** ve **native** kodunu çalıştırır ve bunların iletişim kurması gerekir. Orijinal mimari asenkron bir **bridge** kullanırken, **yeni mimari** (JSI, TurboModules, Fabric) daha hızlı, senkron iletişimi sağlar. Bunu anlamak React Native'in davranışını ve performansını açıklar.

## Orijinal mimari: 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
```

## Yeni mimari (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.
```

## Neden önemli (pratik açıdan)

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

## Neden önemli

React Native mimarisini anlamak kıdemli seviye bilgisidir çünkü **React Native'in davranışı ve performans özelliklerini açıklar**, uygulamaları anlamlandırma ve optimize etme yeteneğini derinleştirir.

Temel yapı — **JS thread** (kodunuz) ve **native side** (UI, native modüller) çalıştıran React Native'in **iletişim kurması** gerektiği — React Native'in nasıl çalıştığını anlamanın anahtarıdır.

**Orijinal bridge mimarisini anlamak** (JS ve native'in asenkron bridge aracılığıyla iletişim kurduğu, mesajları JSON'a serileştirerek geçtiği) React Native'in tarihsel performans özelliklerini ve sınırlamalarını açıklar: iletişim yalnızca asenkron olabiliyordu, serileştirme ek yükü vardı ve bridge yoğun trafik durumunda **darboğaz haline gelebiliyordu** (hızlı kaydırma veya animasyonlarda veri geçişinde titremeli görünüm oluştururken) — bu **neden bridge geçişlerini en aza indirmek ve animasyonları native thread'de çalıştırmak önemli optimizasyonlardı**, mimarinin pratik performans önerileriyle bağlantı kurarak.

**Yeni mimariye hakim olmak** (**JSI** serileştirme bridge'i olmadan doğrudan, senkron JS↔native çağrıları sağlayan; **TurboModules** lazy native modül yüklemesi için; **Fabric** daha iyi render etme için; Codegen güvenli tip arayüzleri için) giderek daha önemlidir çünkü bu varsayılan haline gelmeye başlamıştır — performansı iyileştirir, ek yükü azaltır, senkron çağrıları sağlar ve daha sorunsuz UI üretir, React Native'in önemli gelişimini temsil eder.

Bu mimariye hakim olmak **React Native'in performansını açıklar** (neden bridge önemliydi), **optimizasyonu bilgilendirir** (mimariden türetilen uygulamalar) ve React Native'in nasıl çalıştığını netleştirir — React Native'i bilinmeyen bir kutudan anlaşılabilir bir sisteme dönüştürür.

Mimari anlayışı (bridge ve yeni JSI tabanlı mimari) React Native'in performans özelliklerini açıkladığı, optimizasyonu bilgilendirdiği ve platform evriminin önemli farkındalığını yansıttığı için, ve bu derinlik React Native'i kullanmaktan onu anlamaya yükselttiği için, React Native'in mimarisini anlamak kıdemli seviye bilgisidir — davranışını ve performansını açıklar, optimizasyonu bilgilendirir ve kıdemli React Native rollerinde beklenen derinlik ve platform evriminin farkındalığını yansıtır.