React Native کی architecture کیسے کام کرتی ہے (bridge بمقابلہ نئی architecture)?

Question

Accepted Answer

React Native **JavaScript** اور **native** code چلاتا ہے جنہیں ایک دوسرے سے communicate کرنا ہوتا ہے۔ اصل architecture ایک asynchronous **bridge** استعمال کرتی تھی؛ **نئی architecture** (JSI، TurboModules، Fabric) تیز رفتار، synchronous communication کو فعال بناتی ہے۔ یہ سمجھنا React Native کے رویے اور کارکردگی کو واضح کرتا ہے۔

## اصل architecture: 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
```

## نئی 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.
```

## عملی لحاظ سے یہ کیوں اہم ہے

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

## یہ کیوں اہم ہے

React Native کی architecture کو سمجھنا senior-level کا قیمتی علم ہے کیونکہ یہ **React Native کے رویے اور کارکردگی کی خصوصیات کی وضاحت کرتا ہے**، apps کو بہتر بنانے اور سوچنے کی صلاحیت کو گہرا کرتا ہے۔

بنیادی ڈھانچہ — React Native ایک **JS thread** (آپ کا code) اور **native side** (UI، native modules) چلاتا ہے جنہیں **communicate** کرنا ہوتا ہے — یہ React Native کے کام کرنے کا طریقہ سمجھنے کی کلید ہے۔

**اصل bridge architecture** کو سمجھنا (جہاں JS اور native ایک asynchronous bridge کے ذریعے communicate کرتے ہیں جو messages کو JSON میں serialize کر کے پاس کرتا ہے) React Native کی تاریخی کارکردگی کی خصوصیات اور حدود کی وضاحت کرتا ہے: communication صرف asynchronous تھی، serialization کا اضافی بوجھ تھا، اور bridge بھاری traffic کے ساتھ **bottleneck** بن سکتا تھا (تیز scroll یا animations میں data منتقل کرتے وقت jank کا سبب بن سکتا تھا) — جو **یہ ہے کہ bridge crossings کو کم کرنا اور animations کو native thread پر چلانا اہم optimizations تھے**، architecture کو عملی کارکردگی کے مشورے سے جوڑتے ہوئے۔

**نئی architecture** کو سمجھنا (**JSI** براہ راست، synchronous JS↔native calls کو serialization bridge کے بغیر فعال بناتا ہے؛ **TurboModules** lazy native module loading کے لیے؛ **Fabric** بہتر rendering کے لیے؛ Codegen type-safe interfaces کے لیے) تیزی سے اہم ہو رہا ہے کیونکہ یہ default بن رہی ہے — یہ کارکردگی کو بہتر بناتی ہے، overhead کو کم کرتی ہے، synchronous calls کو فعال بناتی ہے، اور ہموار UI تیار کرتی ہے، React Native کی اہم ترقی کی نمائندگی کرتی ہے۔

یہ architecture کو سمجھنا **React Native کی کارکردگی کی وضاحت کرتا ہے** (bridge کیوں اہم تھا)، **optimization کو inform کرتا ہے** (وہ طریقے جو architecture سے آتے ہیں)، اور واضح کرتا ہے کہ React Native کیسے چلتا ہے — React Native کو ایک black box سے ایک سمجھنے کے قابل نظام میں تبدیل کرتے ہوئے۔

کیونکہ architecture کو سمجھنا (bridge اور نئی JSI-based architecture) React Native کی کارکردگی کی خصوصیات کی وضاحت کرتا ہے، optimization کو inform کرتا ہے، اور platform کی ترقی سے آگاہی کو ظاہر کرتا ہے، اور کیونکہ یہ گہرائی کوئی شخص کو React Native استعمال کرنے سے اسے سمجھنے تک بلند کرتی ہے، React Native کی architecture کو سمجھنا قیمتی senior-level کا علم ہے — اس کے رویے اور کارکردگی کی وضاحت کرتے ہوئے، optimization کو inform کرتے ہوئے، اور senior React Native roles کے لیے متوقع گہرائی اور آگاہی کو ظاہر کرتے ہوئے۔