React Native ਦੀ ਆਰਕੀਟੈਕਚਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ (bridge vs new architecture)?

Question

Accepted Answer

React Native **JavaScript** ਅਤੇ **native** ਕੋਡ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ ਜਿਸਨੂੰ ਆਪਸ ਵਿੱਚ ਸੰਚਾਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਮੂਲ ਆਰਕੀਟੈਕਚਰ ਵਿੱਚ ਇੱਕ asynchronous **bridge** ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਸੀ؛ **new architecture** (JSI, TurboModules, Fabric) ਤੇਜ਼, synchronous ਸੰਚਾਰ ਨੂੰ ਸਮਰੱਥ ਕਰਦੀ ਹੈ। ਇਸ ਨੂੰ ਸਮਝਣ ਨਾਲ 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 ਦੀ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ ਸੀਨੀਅਰ-ਪੱਧਰ ਦਾ ਮਹੱਤਵਪੂਰਨ ਗਿਆਨ ਹੈ ਕਿਉਂਕਿ ਇਹ **React Native ਦੇ ਵਿਵਹਾਰ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਪੱਸ਼ਟ ਕਰਦਾ ਹੈ**, ਅਤੇ ਐਪਸ ਬਾਰੇ ਸੋਚ-ਸਮਝ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਦੀ ਯੋਗਤਾ ਨੂੰ ਪ੍ਰਗਾੜ੍ਹਾ ਕਰਦਾ ਹੈ।

ਬੁਨਿਆਦੀ ਢਾਂਚਾ — React Native ਇੱਕ **JS thread** (ਤੁਹਾਡਾ ਕੋਡ) ਅਤੇ **native side** (UI, native modules) ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ **ਸੰਚਾਰ** ਕਰਨਾ ਪੈਂਦਾ ਹੈ — ਇਹ ਸਮਝਣਾ ਗੁੰਜਲਦਾਰ ਹੈ ਕਿ React Native ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ।

**ਮੂਲ bridge ਆਰਕੀਟੈਕਚਰ** ਨੂੰ ਸਮਝਣਾ (ਜਿੱਥੇ JS ਅਤੇ native ਇੱਕ asynchronous bridge ਦੁਆਰਾ ਸੰਚਾਰ ਕਰਦੇ ਹਨ ਜੋ messages ਨੂੰ JSON ਵਿੱਚ serialize ਕਰਦਾ ਹੈ ਅਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਪਾਰ ਕਰਦਾ ਹੈ) React Native ਦੀ ਐਤਿਹਾਸਕ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਸੀਮਾਵਾਂ ਨੂੰ ਸਮਝਾਉਂਦਾ ਹੈ: ਸੰਚਾਰ ਸਿਰਫ਼ asynchronous ਸੀ، serialization overhead ਸੀ, ਅਤੇ bridge ਰੁਖੀ ਰਫ਼ਤਾਰ (heavy traffic ਨਾਲ jank ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਸੀ ਤੇਜ਼ scrolling ਜਾਂ animations ਵਿੱਚ data ਪਾਸ ਕਰਦੇ ਸਮੇਂ) — ਜੋ **ਇਹ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਕਿਉਂ bridge crossings ਨੂੰ ਘੱਟ ਕਰਨਾ ਅਤੇ animations ਨੂੰ native thread ਉੱਤੇ ਚਲਾਉਣਾ ਮਹੱਤਵਪੂਰਨ optimizations ਸਨ**, ਜੋ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਵਿਹਾਰਕ ਪ੍ਰਦਰਸ਼ਨ ਸਲਾਹ ਨਾਲ ਜੋੜਦਾ ਹੈ।

**ਨਵੀਂ ਆਰਕੀਟੈਕਚਰ** (**JSI** direct, synchronous JS↔native calls ਨੂੰ serialization bridge ਤੋਂ ਬਿਨਾ ਸਮਰੱਥ ਕਰਦਾ ਹੈ؛ **TurboModules** lazy native module loading ਲਈ؛ **Fabric** ਬਿਹਤਰ ਰੈਂਡਰਿੰਗ ਲਈ؛ Codegen type-safe interfaces ਲਈ) ਨੂੰ ਸਮਝਣਾ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਹੋ ਰਿਹਾ ਹੈ ਜਿਵੇਂ ਕਿ ਇਹ ਪੂੰਜੀ ਬਣ ਰਿਹਾ ਹੈ — ਇਹ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਕਰਦਾ ਹੈ, overhead ਨੂੰ ਘੱਟ ਕਰਦਾ ਹੈ, synchronous calls ਨੂੰ ਸਮਰੱਥ ਕਰਦਾ ਹੈ, ਅਤੇ ਨਿਖਾਰਲੀ UI ਤਿਆਰ ਕਰਦਾ ਹੈ, ਜੋ React Native ਦੇ ਮਹੱਤਵਪੂਰਨ ਵਿਕਾਸ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ।
c ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ **React Native ਦੀ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਸਮਝਾਉਂਦਾ ਹੈ** (ਕਿਉਂ bridge ਮਾਇਨੇ ਰੱਖਦਾ ਸੀ), **optimization ਨੂੰ ਸੂਚਿਤ ਕਰਦਾ ਹੈ** (ਅਭਿਆਸ ਜੋ ਆਰਕੀਟੈਕਚਰ ਤੋਂ ਬਾਹਰ ਆਉਂਦੇ ਹਨ), ਅਤੇ ਸਪੱਸ਼ਟ ਕਰਦਾ ਹੈ ਕਿ React Native ਕਿਵੇਂ ਚਲਦਾ ਹੈ — React Native ਨੂੰ ਇੱਕ ਕਾਲਾ ਬਾਕਸ ਤੋਂ ਸਮਝਣ ਯੋਗ ਸਿਸਟਮ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।

ਕਿਉਂਕਿ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ (bridge ਅਤੇ nਵੀਂ JSI-ਆਧਾਰਤ ਆਰਕੀਟੈਕਚਰ) React Native ਦੀ ਪ੍ਰਦਰਸ਼ਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਮਝਾਉਂਦਾ ਹੈ, optimization ਨੂੰ ਸੂਚਿਤ ਕਰਦਾ ਹੈ, ਅਤੇ platform ਵਿਕਾਸ ਬਾਰੇ ਸਜਗਤਾ ਨੂੰ ਪ੍ਰਤਿਬਿੰਬਿਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਕਿਉਂਕਿ ਇਹ ਡੂੰਘੀ ਜਾਣਕਾਰੀ React Native ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਇਸ ਨੂੰ ਸਮਝਣ ਤੱਕ ਕਿਸੇ ਨੂੰ ਉਤਪੰਨ ਕਰਦੀ ਹੈ, React Native ਦੀ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਸਮਝਣਾ ਸੀਨੀਅਰ-ਪੱਧਰ ਦਾ ਮਹੱਤਵਪੂਰਨ ਗਿਆਨ ਹੈ — ਇਸ ਦੇ ਵਿਵਹਾਰ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਸਮਝਾਉਂਦਾ ਹੈ, optimization ਨੂੰ ਸੂਚਿਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਸੀਨੀਅਰ React Native ਭੂਮਿਕਾਵਾਂ ਲਈ ਉਮੀਦ ਕੀਤੀ ਗਈ ਡੂੰਘਾਈ ਅਤੇ ਸਜਗਤਾ ਨੂੰ ਪ੍ਰਤਿਬਿੰਬਿਤ ਕਰਦਾ ਹੈ।