React Native ची आर्किटेक्चर कशी काम करते (bridge विरुद्ध नई आर्किटेक्चर)?

Question

Accepted Answer

React Native **JavaScript** आणि **native** कोड चलवते जे संवाद करायला हवे. मूळ आर्किटेक्चर एक अतुल्यकालीन **bridge** वापरते; **नई आर्किटेक्चर** (JSI, TurboModules, Fabric) तेजस्वी, समकालीन संवाद सक्षम करते. हे React Native च्या वर्तनाचे आणि कार्यक्षमतेचे स्पष्टीकरण देते.

## मूळ आर्किटेक्चर: 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
```

## नई आर्किटेक्चर (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 च्या आर्किटेक्चरचे समज हे मूल्यवान senior-level ज्ञान आहे कारण हे **React Native च्या वर्तनाचे आणि कार्यक्षमतेचे वैशिष्ट्य स्पष्ट करते**, अ‍ॅप्स समज घेण्याची आणि ऑप्टिमाइজ करण्याची क्षमता गहन करते.

मूलभूत संरचना — React Native **JS thread** (आपला कोड) चलवत आहे आणि **native side** (UI, native modules) जे **संवाद** करायला हवे — हे समजून घेण्यासाठी की React Native कसे काम करते, हा मुख्य आहे.

**मूळ bridge आर्किटेक्चर** समजून घेणे (जेथे JS आणि native एक अतुल्यकालीन bridge द्वारे संवाद करतात जो संदेशांना JSON वर परिवर्तित करते आणि त्यांना पार करते) React Native च्या ऐतिहासिक कार्यक्षमता वैशिष्ट्य आणि मर्यादा स्पष्ट करते: संवाद केवळ अतुल्यकालीन होता, serialization ओव्हरहेड होता, आणि bridge भारी रहदारीसह **bottleneck बनू शकता** (वेगवान स्क्रोलिंग किंवा animations मध्ये jank कारण डेटा पार करणे) — जे **bridge crossings कमी करणे आणि animations native thread वर चलवणे महत्वाचे ऑप्टिमाइजेशन होते**, आर्किटेक्चरला व्यावहारिक कार्यक्षमता सल्ल्याशी जोडते.

**नई आर्किटेक्चर** समजून घेणे (**JSI** serialization bridge शिवाय थेट, समकालीन JS↔native कॉल सक्षम करत आहे; **TurboModules** lazy native module लोडिंगसाठी; **Fabric** चांगल्या रेंडरिंगसाठी; Codegen type-safe इंटरफेससाठी) हे वाढत आहे महत्वाचे कारण हे डिफॉल्ट बनत आहे — यापासून कार्यक्षमता सुधारते, ओव्हरहेड कमी करते, समकालीन कॉल सक्षम करते, आणि गुळगुळीत UI तयार करते, React Native च्या महत्वाचा उत्क्रांती प्रतिनिधित्व करते.

हे आर्किटेक्चर समजून घेणे **React Native च्या कार्यक्षमता स्पष्ट करते** (bridge का महत्वाचा होता), **ऑप्टिमाइजेशन माहिती देते** (आर्किटेक्चरचे अनुसरण करणारी व्यावहार), आणि React Native कसे क्रमांकित होते हे स्पष्ट करते — React Native ला black box पासून समजू शकणार्या प्रणाली मध्ये रूपांतरित करते.

आर्किटेक्चर (bridge आणि नई JSI-आधारित आर्किटेक्चर) समजून घेणे React Native च्या कार्यक्षमता वैशिष्ट्य स्पष्ट करते, ऑप्टिमाइजेशन माहिती देते, आणि प्लॅटफॉर्म उत्क्रांतीची जागरूकता दर्शवते, आणि कारण हे एखाद्याला React Native वापरणे पासून ते समजून घेण्यासाठी समृद्ध करते, आर्किटेक्चर React Native समजून घेणे मूल्यवान senior-level ज्ञान आहे — त्याच्या वर्तनाचे आणि कार्यक्षमतेचे स्पष्टीकरण देते, ऑप्टिमाइजेशन माहिती देते, आणि senior React Native भूमिकासाठी अपेक्षित गहनता आणि जागरूकता दर्शवते.