React Native میں Turbo Module — یہ کیا ہے، JSI کیسے کام کرتا ہے اور آرکیٹیکچر

Turbo Module کیا ہے؟

Turbo Module نئے React Native آرکیٹیکچر کا ایک جزو ہے جو JavaScript اور مقامی کوڈ کے درمیان مواصلت کے لیے کلاسک Bridge کی جگہ لیتا ہے۔ Bridge کے برعکس، جہاں ہر پیغام JSON میں سیریلائز کیا جاتا ہے اور غیر ہم آہنگی سے منتقل کیا جاتا ہے، Turbo Module JSI استعمال کرتا ہے — ایک پرت جو JavaScript کو C++ میں لکھے گئے فنکشنز کو براہ راست کال کرنے کی اجازت دیتی ہے۔

Turbo Module آرکیٹیکچر کو Meta ٹیم نے React Conf 2021 میں «The New Architecture» کوڈ نام کے تحت React Native کی ایک بڑی تنظیم نو کے حصے کے طور پر پیش کیا تھا۔ Turbo Module کے علاوہ، نئے آرکیٹیکچر میں Fabric (نیا رینڈرر)، Codegen (کوڈ جنریٹر) اور JSI (انٹرایکشن انٹرفیس) شامل ہیں۔ مل کر، یہ اجزاء 2015 سے React Native میں جمع ہونے والی کارکردگی کے مسائل کو حل کرتے ہیں۔

Turbo Module کلاسک مقامی ماڈیولز کے تین اہم مسائل حل کرتا ہے: غیر ہم آہنگی (تمام کالیں قطار سے گزرتی ہیں)، سیریلائزیشن (ہر کال کو JSON تبدیلی کی ضرورت ہوتی ہے)، اور لوڈنگ (تمام ماڈیول ایپلیکیشن شروع ہونے پر ابتدائی ہوتے ہیں)۔ Turbo Module کے ساتھ، مقامی طریقوں کو ہم آہنگی سے بلایا جاتا ہے، ڈیٹا کاپی کیے بغیر منتقل کیا جاتا ہے، اور ماڈیول ضرورت پر لوڈ ہوتے ہیں۔

JSI کیسے کام کرتا ہے

JSI (JavaScript Interface) ایک C++ API ہے جو JavaScript انجن (Hermes یا JSC) اور مقامی کوڈ کے درمیان ایک پرت بناتا ہے۔ JSI میزبان آبجیکٹ فراہم کرتا ہے — C++ آبجیکٹ جو عام JavaScript آبجیکٹ اور طریقوں کی طرح نظر آتے ہیں۔ جب JavaScript ایسے آبجیکٹ کے کسی طریقے کو کال کرتا ہے، تو JSI براہ راست متعلقہ C++ کوڈ کو سیریلائزیشن اور تھریڈ سوئچنگ کے بغیر عمل میں لاتا ہے۔

JSI اور Bridge کے درمیان بنیادی فرق ڈیٹا کاپی کی عدم موجودگی ہے۔ Bridge میں، ہر قدر کو JSON سٹرنگ میں سیریلائز کیا جاتا ہے، ایک قطار سے گزر کر ڈی سیریلائز کیا جاتا ہے۔ JSI میموری میں ڈیٹا کے پوائنٹر منتقل کرتا ہے، جس سے کارکردگی کے نقصان کے بغیر بڑے ڈیٹا والیوم کے ساتھ کام کرنا ممکن ہوتا ہے۔ Meta کے ٹیسٹوں کے مطابق، JSI کالیں Bridge کے ذریعے مساوی کالوں سے 5–10 گنا تیزی سے عمل میں آتی ہیں۔

HostObject اور ہم آہنگ کالیں

JSI HostObject انٹرفیس کی وضاحت کرتا ہے — ایک C++ کلاس جسے React Native JS ماحول میں ایک عام آبجیکٹ کے طور پر رجسٹر کرتا ہے۔ جب JS کوڈ کسی پراپرٹی تک رسائی حاصل کرتا ہے یا HostObject کے کسی طریقے کو کال کرتا ہے، تو JSI کال کو روکتا ہے اور C++ کوڈ کو عمل میں لاتا ہے۔ یہ Bridge کی قطار کا انتظار کیے بغیر ہم آہنگی سے آپریشن کرنے کی اجازت دیتا ہے۔

// JSI HostObject مثال — ہم آہنگ مقامی کال
class ImageCompressorHostObject : public jsi::HostObject {

    jsi::Value get(
        jsi::Runtime& rt,
        const jsi::PropNameID& propName
    ) override {
        auto name = propName.utf8(rt);
        if (name == "compressImage") {
            return jsi::Function::createFromHostFunction(
                rt,
                jsi::PropNameID::forUtf8(rt, name),
                2,
                [](jsi::Runtime& rt,
                   const jsi::Value& thisValue,
                   const jsi::Value* args,
                   size_t count) -> jsi::Value {
                    return jsi::Value(rt, compressNative(
                        args[0].asString(rt).utf8(rt),
                        args[1].asNumber()
                    ));
                }
            );
        }
        return jsi::Value::undefined();
    }
};

مندرجہ بالا کوڈ ظاہر کرتا ہے کہ JSI HostObject JavaScript سے compressImage کال کو کیسے ہینڈل کرتا ہے۔ فنکشن دو آرگیومنٹ (پاتھ سٹرنگ اور کوالٹی نمبر) لیتا ہے، مقامی فنکشن compressNative کو کال کرتا ہے اور نتیجہ لوٹاتا ہے — مکمل طور پر ہم آہنگ، Bridge کے بغیر، JSON کے بغیر۔ یہ کلاسک آرکیٹیکچر پر JSI کا بنیادی فائدہ ہے۔

JSI React Native مین رن ٹائم کا حصہ ہے اور کسی مخصوص JavaScript انجن پر منحصر نہیں ہے۔ یہ Hermes اور JavaScriptCore (JSC) دونوں کے ساتھ کام کرتا ہے، مقامی ماحول کے ساتھ تعامل کے لیے ایک متحد انٹرفیس فراہم کرتا ہے۔

Turbo Module بمقابلہ Bridge: موازنہ

Turbo Module اور Bridge کا موازنہ React Native آرکیٹیکچر کے ارتقا کو ظاہر کرتا ہے۔ Bridge کو 2015 میں React Native کے تیزی سے آغاز کے لیے ڈیزائن کیا گیا تھا، لیکن ایپلیکیشن کی پیچیدگی بڑھنے کے ساتھ اس کی حدود سنگین ہو گئیں۔ Turbo Module ان مسائل کو آرکیٹیکچر کی سطح پر حل کرتا ہے۔

عملی طور پر، فرق بار بار مقامی طریقوں کو کال کرنے پر سب سے زیادہ نمایاں ہوتا ہے — مثال کے طور پر، میڈیا پروسیسنگ یا GPU کے ساتھ کام کرتے وقت۔ نایاب کالز (فی سیشن ایک بار) کے لیے، کارکردگی کا فرق معمولی ہے۔ Turbo Module بڑے بائنری ڈیٹا — تصاویر، ویڈیوز، بائنری پروٹوکول — کے ساتھ کام کو بھی آسان بناتا ہے، جس کے لیے Bridge میں فائل سسٹم کے ساتھ حل درکار تھے۔

Turbo Module بنانے کی مثال

Turbo Module بنانا TypeScript میں ایک تصریح کی وضاحت سے شروع ہوتا ہے۔ Codegen اس تصریح کی بنیاد پر خود بخود C++ انٹرفیس اور Objective-C/Java سٹب تیار کرتا ہے۔ یہ ترقی کے طریقہ کار کو مکمل طور پر بدل دیتا ہے — ڈیولپر ایک بار API کی وضاحت کرتا ہے اور Codegen باقی سب کچھ بناتا ہے۔

// ImageCompressor.ts — Turbo Module تصریح
import type { TurboModule } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  compressImage(
    imagePath: string,
    quality: Double
  ): Promise<string>;
}

Codegen کے ذریعے کوڈ جنریشن

Codegen TypeScript تصریح کا تجزیہ کرتا ہے اور C++ HostObject، Objective-C پروٹوکول اور Java انٹرفیس تیار کرتا ہے۔ ڈیولپر کو صرف مقامی منطق کو نافذ کرنا باقی رہ جاتا ہے۔ یہ طریقہ اس بات کی ضمانت دیتا ہے کہ JavaScript اور مقامی طرف کی اقسام ہمیشہ مماثل ہوں، دستی میپنگ کی غلطیوں کو ختم کرتا ہے۔

// iOS کے لیے TurboModule نفاذ (پیدا کردہ سٹب)
@interface ImageCompressorModule ()
    RCT_EXPORT_MODULE(ImageCompressor)
@end

@implementation ImageCompressorModule

RCT_EXPORT_METHOD(compressImage:(NSString *)imagePath
                  quality:(NSNumber *)quality
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
    NSData *compressed = [ImageProcessor compressAtPath:imagePath
                                                    quality:quality.doubleValue];
    resolve([NSString stringWithUTF8String:compressed.UTF8String]);
}

@end

ایک اہم فائدہ سست لوڈنگ ہے۔ Turbo Module ایپلیکیشن شروع ہونے پر ابتدائی نہیں ہوتا، بلکہ صرف JavaScript سے پہلی رسائی پر بنایا جاتا ہے۔ یہ کلاسک طریقہ کے مقابلے میں ایپلیکیشن شروع ہونے کا وقت 30–50% کم کرتا ہے جہاں تمام مقامی ماڈیول فوری طور پر لوڈ ہو جاتے ہیں۔

Bridge سے Turbo Module میں منتقلی

Bridge سے Turbo Module میں منتقلی کے لیے ایپلیکیشن کو مکمل طور پر دوبارہ لکھنے کی ضرورت نہیں ہے۔ React Native 0.73+ دونوں آرکیٹیکچرز کو متوازی طور پر سپورٹ کرتا ہے — Bridge ماڈیولز کام کرتے رہتے ہیں اور نئے ماڈیول Turbo Module کے طور پر بنائے جا سکتے ہیں۔ یہ آہستہ آہستہ، ماڈیول بہ ماڈیول منتقلی کی اجازت دیتا ہے۔

React Native 0.76+ پروجیکٹ میں نئے آرکیٹیکچر کو فعال کرنے کے لیے، react-native.config.js فائل میں newArchEnabled پرچم کو true پر سیٹ کریں۔ اس کے بعد، تمام موجودہ مقامی ماڈیول Bridge کے ذریعے کام کرتے رہتے ہیں اور نئے ماڈیول Turbo Module کے طور پر بنائے جا سکتے ہیں۔ Codegen خود بخود دونوں آپشنز کو ہینڈل کرتا ہے۔

// react-native.config.js — نیا آرکیٹیکچر فعال کریں
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

JavaScript سے سب سے زیادہ کال کیے جانے والے ماڈیولز سے منتقلی شروع کرنے کی سفارش کی جاتی ہے — انہیں سب سے بڑا کارکردگی فائدہ ملے گا۔ نایاب طور پر کال کیے جانے والے ماڈیولز (فی سیشن ایک بار) کو اہم کارکردگی کے نقصان کے بغیر Bridge پر چھوڑا جا سکتا ہے۔

• Codegen — مقامی انٹرفیس کی خودکار تخلیق کے لیے TypeScript تصریحات استعمال کریں۔
• E2E ٹیسٹ — خاص طور پر React Native اپ ڈیٹ کے بعد، دونوں آرکیٹیکچرز پر ماڈیولز کے کام کی جانچ کریں۔
• بیک اپ پلان — Turbo Module کے ساتھ مسائل کی صورت میں، کنفیگریشن پرچم کے ذریعے عارضی طور پر Bridge پر واپس جا سکتے ہیں۔