React Native இன் architecture எவ்வாறு செயல்படுகிறது (bridge vs new architecture)?

Question

Accepted Answer

React Native **JavaScript** மற்றும் **native** code ஐ இயக்குகிறது, அவை தொடர்பு கொள்ள வேண்டும். அசல் architecture ஒரு asynchronous **bridge** ஐ பயன்படுத்தியது; **new architecture** (JSI, TurboModules, Fabric) வேகமான, synchronous தொடர்பை செயல்படுத்துகிறது. இது React Native இன் செயல்பாடு மற்றும் performance ஐ தெளிவுபடுத்துகிறது.

## அசல் 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 ஐ புரிந்துகொள்வது மூத்த-நிலை அறிவு மதிப்புடையது, ஏனெனில் இது **React Native இன் செயல்பாடு மற்றும் performance பண்புகளை விளக்குகிறது**, apps ஐ பற்றி சிந்திக்கும் மற்றும் optimize செய்யும் திறனை ஆழப்படுத்துகிறது.

அடிப்படை கட்டமைப்பு — React Native ஒரு **JS thread** (உங்கள் code) மற்றும் **native side** (UI, native modules) ஐ இயக்குகிறது, அவை **தொடர்பு கொள்ள** வேண்டும் — React Native எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்ள முக்கியமாகும்.

**அசல் bridge architecture** ஐ புரிந்துகொள்வது (JS மற்றும் native ஒரு asynchronous bridge மூலம் தொடர்பு கொள்கின்றன, அது messages ஐ JSON ஆக serialize செய்து pass செய்கின்றன) React Native இன் வரலாற்று performance பண்புகள் மற்றும் வரம்புகளை விளக்குகிறது: தொடர்பு asynchronous-only ஆக இருந்தது, serialization overhead ஐ கொண்டிருந்தது, மற்றும் bridge பெரிய traffic உடன் **병목 (bottleneck) ஆக இருக்க முடியும்** (வேகமான scrolling அல்லது animations data cross செய்யும் போது jank ஏற்படுத்தலாம்) — இதுவே **bridge crossings ஐ குறைப்பதும் animations ஐ native thread இல் இயக்குவதும் முக்கியமான optimizations ஆக இருந்த காரணம்**, architecture ஐ நடைமுறை performance advice ஆக இணைக்கிறது.

**புதிய architecture** ஐ புரிந்துகொள்வது (**JSI** direct, synchronous JS↔native calls ஐ serialization bridge இல்லாமல் enable செய்கிறது; **TurboModules** lazy native module loading க்கு; **Fabric** சிறந்த rendering க்கு; Codegen type-safe interfaces க்கு)점점 முக்கியமாக உள்ளது, ஏனெனில் இது default ஆக ஆகிவிடுகிறது — இது performance ஐ மேம்படுத்துகிறது, overhead ஐ குறைக்கிறது, synchronous calls ஐ enable செய்கிறது, மற்றும் மென்மையான UI ஐ உৎপादிக்கிறது, React Native இன் குறிப்பிடத்தக்க evolution ஐ பிரதிநிதித்வம் செய்கிறது।

இந்த architecture ஐ புரிந்துகொள்வது **React Native இன் performance ஐ விளக்குகிறது** (bridge ஏன் முக்கியமாக இருந்தது), **optimization ஐ inform செய்கிறது** (architecture ஐ தொடர்ந்து வரும் நடைமுறைகள்), மற்றும் React Native எவ்வாறு execute ஆகிறது என்பதை தெளிவுபடுத்துகிறது — React Native ஐ ஒரு black box இலிருந்து ஒரு புரிந்துகொள்ள விரும்பிய system ஆக மாற்றுகிறது.

Architecture ஐ புரிந்துகொள்வது (bridge மற்றும் new JSI-based architecture) React Native இன் performance பண்புகளை விளக்குகிறது, optimization ஐ inform செய்கிறது, மற்றும் அதன் முக்கியமான evolution இன் விழிப்புணர்வை பிரதிபலிக்கிறது, மற்றும் இந்த depth ஒருவரை React Native ஐ பயன்படுத்துவதிலிருந்து அதைப் புரிந்துகொள்ளுவதாக உயர்த்துவதால், React Native இன் architecture ஐ புரிந்துகொள்வது மதிப்புடைய மூத்த-நிலை அறிவு — அதன் செயல்பாடு மற்றும் performance ஐ விளக்குகிறது, optimization ஐ inform செய்கிறது, மற்றும் senior React Native roles க்கு எதிர்பார்க்கப்படும் depth மற்றும் platform evolution இன் விழிப்புணர்வை பிரதிபலிக்கிறது.