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 को ऐतिहासिक कार्यक्षमता विशेषताहरू र सीमाहरू व्याख्या गर्छ: संचार एसिङ्क्रोनस-मात्र थियो, सिरिलाइजेशन ओभरहेड थियो, र bridge **भारी ट्राफिकको साथ bottleneck बन्न सक्ने थियो** (छिटो स्क्रोलिङ् वा एनिमेशनमा jank का कारण डेटा पार गर्दा) — जुन **किन bridge क्रसिङ्ग कम गर्नु र एनिमेशन native thread मा चलाउनु महत्त्वपूर्ण अनुकूलन थिए**, आर्किटेक्चरलाई व्यावहारिक कार्यक्षमता सल्लाहसँग जोडिरहेको।

**नयाँ आर्किटेक्चर** बुझ्नु (**JSI** सिरिलाइजेशन bridge बिना सीधा, सिङ्क्रोनस JS↔native कलहरू सक्षम गर्दै; **TurboModules** आलस native मडिउल लोडिङ्का लागि; **Fabric** राम्रो रेन्डरिङ्का लागि; Codegen type-safe इन्टरफेसहरूका लागि) क्रमशः महत्त्वपूर्ण हुँदैछ किनभने यो पूर्वनिर्धारित बन्दैछ — यो कार्यक्षमता सुधार गर्छ, ओभरहेड कम गर्छ, सिङ्क्रोनस कलहरू सक्षम गर्छ, र सहज UI उत्पादन गर्छ, React Native को महत्त्वपूर्ण विकास प्रतिनिधित्व गर्दै।

यो आर्किटेक्चर बुझ्दा **React Native को कार्यक्षमता व्याख्या गर्छ** (किन bridge महत्त्वपूर्ण थियो), **अनुकूलन सूचित गर्छ** (आर्किटेक्चर अनुसरण गर्ने अभ्यास), र स्पष्ट गर्छ कसरी React Native कार्यान्वयन हुन्छ — React Native लाई ब्ल्याक बक्स बाट समझ्न सकिने प्रणाली मा रूपान्तरित गर्दै।

आर्किटेक्चर बुझ्नु (bridge र नयाँ JSI-आधारित आर्किटेक्चर) React Native को कार्यक्षमता विशेषताहरू व्याख्या गर्छ, अनुकूलन सूचित गर्छ, र प्ल्याटफर्म विकासको महत्त्वपूर्ण जागरूकता प्रतिबिम्बित गर्छ, र यो गहिराई एकलाई React Native प्रयोग गर्नेबाट यो बुझ्नमा उन्नत गर्छ, React Native को आर्किटेक्चर बुझ्नु मूल्यवान senior-level ज्ञान हो — यसको व्यवहार र कार्यक्षमता व्याख्या गर्दै, अनुकूलन सूचित गर्दै, र senior React Native भूमिकाहरूको लागि अपेक्षित प्ल्याटफर्म विकासको गहिराई र जागरूकता प्रतिबिम्बित गर्दै।