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 पर वापस जा सकते हैं।