JSI: यह क्या है, कार्य सिद्धांत और आर्किटेक्चर

JSI क्या है?

JSI (JavaScript Interface) एक C++ लेयर है जो JavaScript इंजन (Hermes, JavaScriptCore, V8) को C++ ऑब्जेक्ट्स, फ़ंक्शंस और मेमोरी तक सीधे पहुंचने की क्षमता प्रदान करती है। Bridge के विपरीत, जो कॉल्स को JSON में सीरियलाइज़ करता था और उन्हें एसिंक्रोनस कतार के माध्यम से भेजता था, JSI JS कोड को सिंक्रोनस रूप से C++ मेथड्स कॉल करने और तुरंत परिणाम प्राप्त करने की अनुमति देता है।

JSI को React Native 0.64 में नए आर्किटेक्चर (New Architecture) के हिस्से के रूप में पेश किया गया था। मुख्य लक्ष्य Bridge द्वारा उत्पन्न अड़चन को समाप्त करना था: JS और नेटिव कोड के बीच प्रत्येक इंटरैक्शन में सीरियलाइज़ेशन, डीसीरियलाइज़ेशन और मैसेज कतार से गुज़रने में समय लगता था। JSI इस समस्या को JS इंजन को jsi::Value, jsi::Object और jsi::Function इंटरफ़ेस लागू करने वाले रैपर के माध्यम से C++ ऑब्जेक्ट्स तक सीधी पहुंच देकर हल करता है।

JSI Bridge का एक-से-एक प्रतिस्थापन नहीं है — यह एकीकरण के लिए मौलिक रूप से भिन्न दृष्टिकोण है। Bridge एक मेलबॉक्स की तरह काम करता था: JS संदेश भेजता था, वह कतार से गुज़रता था, नेटिव पक्ष उसे प्रोसेस करता था और उत्तर भेजता था। JSI एक पॉइंटर की तरह काम करता है: JS को C++ ऑब्जेक्ट का संदर्भ मिलता है और वह सामान्य JS फ़ंक्शंस की तरह सिंक्रोनस रूप से उसके मेथड्स कॉल कर सकता है। यह दो वातावरणों के बीच इंटरैक्शन आर्किटेक्चर में एक मौलिक अंतर है।

निर्माण का इतिहास

JSI की आवश्यकता मूल Bridge की सीमाओं से उत्पन्न हुई, जो React Native 2015 में स्थापित किया गया था। फ्रेमवर्क की लोकप्रियता बढ़ने और एप्लिकेशन के जटिल होने के साथ, प्रदर्शन की समस्या स्पष्ट हो गई: प्रत्येक नेटिव मॉड्यूल कॉल में सीरियलाइज़ेशन के लिए कम से कम 3–5 ms की आवश्यकता होती थी। सरल संचालन जैसे सेंसर मान पढ़ना या स्क्रीन आकार प्राप्त करना, यह स्वीकार्य था, लेकिन एनिमेशन, ग्राफ़िक्स कार्य और स्ट्रीमिंग डेटा प्रोसेसिंग के लिए यह महत्वपूर्ण था। React Native टीम ने 2019 में नए आर्किटेक्चर पर काम शुरू किया, और JSI इसकी नींव बन गया।

JavaScript इंजन समर्थन

JSI को JavaScript इंजनों पर एक एब्स्ट्रैक्शन लेयर के रूप में डिज़ाइन किया गया है। यह एक एकीकृत C++ API प्रदान करता है जो प्रत्येक विशिष्ट इंजन के लिए लागू किया जाता है: Hermes, JavaScriptCore (iOS), V8 (Android)। इसका मतलब है कि डेवलपर्स को इंजनों के बीच अंतर के बारे में चिंता करने की आवश्यकता नहीं है — Fabric और TurboModules सभी समर्थित इंजनों पर समान रूप से काम करते हैं।

JSI कैसे काम करता है?

JSI के मूल में होस्ट ऑब्जेक्ट्स (Host Objects) की अवधारणा है — C++ ऑब्जेक्ट्स जो JS वातावरण में नेटिव JS ऑब्जेक्ट्स के रूप में निर्यात किए जाते हैं। जब JS कोड ऐसे ऑब्जेक्ट की प्रॉपर्टी या मेथड तक पहुंचता है, तो JSI कॉल को इंटरसेप्ट करता है और इसे संबंधित C++ मेथड को सौंपता है। यह सिंक्रोनस रूप से, उसी थ्रेड में, बिना कॉन्टेक्स्ट स्विचिंग और JSON स्ट्रिंग के लिए मेमोरी आवंटित किए बिना होता है।

प्रत्येक होस्ट ऑब्जेक्ट jsi::HostObject इंटरफ़ेस को get, set और getPropertyNames मेथड्स के साथ लागू करता है। JS इंजन इन मेथड्स को हर बार कॉल करता है जब ऑब्जेक्ट की किसी प्रॉपर्टी तक पहुंचा जाता है। उदाहरण के लिए, JS में NativeModule.someMethod() कॉल करते समय, JSI इस कॉल को संबंधित होस्ट ऑब्जेक्ट मेथड के C++ कॉल में बदल देता है। वापसी मान jsi::Value के रूप में JS को वापस भेजा जाता है — एक सामान्य प्रकार जो संख्या, स्ट्रिंग, बूलियन, ऑब्जेक्ट या undefined का प्रतिनिधित्व कर सकता है।

JSI की एक महत्वपूर्ण विशेषता मैसेज कतार का अभाव है। Bridge एक एसिंक्रोनस कतार का उपयोग करता था: JS अनुरोध भेजता था, अन्य कार्यों पर स्विच करता था, नेटिव पक्ष अनुरोध प्रोसेस करता था, और परिणाम कॉलबैक के माध्यम से लौटाया जाता था। JSI सिंक्रोनस रूप से काम करता है: यदि JS JSI के माध्यम से नेटिव मॉड्यूल मेथड कॉल करता है, तो JS कोड निष्पादन परिणाम प्राप्त होने तक रुक जाता है। यह तर्क को सरल बनाता है (कॉलबैक की प्रतीक्षा करने की आवश्यकता नहीं) और रेस कंडीशन को समाप्त करता है, लेकिन सावधानी की आवश्यकता है — लंबी सिंक्रोनस कॉल्स JS थ्रेड को ब्लॉक करती हैं।

JSI मानों का जीवनचक्र

JSI के माध्यम से बनाए गए मान JS इंजन रनटाइम में रहते हैं और गार्बेज कलेक्टर द्वारा प्रबंधित किए जाते हैं। जब C++ कोड jsi::String या jsi::Object बनाता है और इसे JS को लौटाता है, तो वातावरण स्वचालित रूप से मेमोरी प्रबंधित करता है। यदि C++ कोड कॉल्स के बीच JS मान का संदर्भ रखना चाहता है, तो jsi::Value::getWeak() या रनटाइम रूट ऑब्जेक्ट पर संग्रहीत संदर्भ के साथ वैश्विक jsi::Object::setProperty का उपयोग किया जाता है। यह समय से पहले गार्बेज कलेक्शन को रोकता है।

थ्रेड सुरक्षा

JSI डिफ़ॉल्ट रूप से थ्रेड-सुरक्षित नहीं है। सभी JSI मेथड कॉल्स उस थ्रेड से होनी चाहिए जहां JS निष्पादित होता है (आमतौर पर React Native का JS थ्रेड)। यदि कोई नेटिव मॉड्यूल अलग थ्रेड पर बैकग्राउंड कार्य शुरू करता है, तो परिणाम TurboModules से runOnJS का उपयोग करके JS थ्रेड के माध्यम से वापस भेजा जाना चाहिए। यह सीमा सिंक्रोनिसिटी और सीरियलाइज़ेशन की अनुपस्थिति की कीमत है।

JSI बनाम Bridge: तुलना

JSI और Bridge के बीच अंतर मौलिक है और JS-नेटिव कोड इंटरैक्शन के सभी पहलुओं को प्रभावित करता है। Bridge एसिंक्रोनस था, डेटा को JSON में सीरियलाइज़ करता था और मैसेज कतार का उपयोग करता था; JSI सिंक्रोनस है, नेटिव संदर्भों के साथ काम करता है और सीरियलाइज़ेशन की आवश्यकता नहीं है।

React Native टीम के अनुसार, Facebook Marketplace ऐप में Bridge से JSI में माइग्रेशन ने JS और नेटिव पक्षों के बीच डेटा डुप्लिकेशन को समाप्त करके स्टार्टअप समय को 35% कम किया और मेमोरी खपत को 20% घटाया।

Bridge कब आवश्यक था

Bridge कोई “गलती” नहीं था — यह React Native 2015 के निर्माण के समय उचित एक आर्किटेक्चरल निर्णय था। दो अलग-अलग भाषाओं वाले प्लेटफ़ॉर्म के लिए नेटिव डेवलपमेंट को एक सार्वभौमिक आदान-प्रदान प्रारूप की आवश्यकता थी। JSON एक सीरियलाइज़ेशन प्रारूप के रूप में सभी प्लेटफ़ॉर्म पर उपलब्ध था और इंटरैक्शन को एकीकृत करने की अनुमति देता था। समस्या बाद में स्पष्ट हुई, जब React Native का उपयोग प्रति सेकंड हजारों नेटिव मॉड्यूल कॉल वाले जटिल एप्लिकेशन के लिए किया जाने लगा।

पिछड़ा संगतता

React Native पिछड़ी संगतता बनाए रखता है: Bridge के लिए लिखे गए नेटिव मॉड्यूल संगतता लेयर के माध्यम से नए आर्किटेक्चर में काम करना जारी रखते हैं। हालांकि, नए मॉड्यूल के लिए सीधे TurboModules के माध्यम से JSI का उपयोग करने की अनुशंसा की जाती है। मौजूदा मॉड्यूल का माइग्रेशन मॉड्यूल की व्यावसायिक तर्क को बदले बिना इंटरैक्शन प्रोटोकॉल को बदलना है।

React Native आर्किटेक्चर में JSI

JSI एक मूलभूत लेयर है जिस पर नए React Native आर्किटेक्चर के सभी घटक बनाए गए हैं। JSI के बिना, न तो Fabric (नया रेंडरर) और न ही TurboModules (अनुकूलित नेटिव मॉड्यूल) संभव होते। JSI सभी स्तरों पर JS के C++ के साथ इंटरैक्ट करने का एक एकीकृत तरीका प्रदान करता है।

Fabric और JSI

Fabric React Native का नया रेंडरर है जो C++ UI प्रस्तुतियों तक सिंक्रोनस पहुंच के लिए JSI का उपयोग करता है। पुराने आर्किटेक्चर में, रेंडरिंग Bridge के माध्यम से होती थी: JS React एलिमेंट बनाता था, उन्हें JSON में सीरियलाइज़ करता था, Bridge के माध्यम से भेजता था, नेटिव पक्ष डीसीरियलाइज़ करता था और UI बनाता था। Fabric JSI के माध्यम से सीधे JS से C++ शैडो ट्री ऑब्जेक्ट्स बनाता है, Yoga के माध्यम से सिंक्रोनस रूप से लेआउट की गणना करता है और तैयार फ्रेम्स को नेटिव रेंडरर को भेजता है — बिना एक भी सीरियलाइज़ेशन के।

TurboModules और JSI

TurboModules React Native नेटिव मॉड्यूल का विकास है। Bridge में मॉड्यूल पंजीकृत करने और JSON के माध्यम से उसके मेथड्स कॉल करने के बजाय, TurboModules लेज़ी लोडिंग और प्रत्यक्ष आह्वान के लिए JSI का उपयोग करता है। जब JS कोड पहली बार मॉड्यूल तक पहुंचता है, तो JSI एक होस्ट ऑब्जेक्ट बनाता है — यह नेटिव मॉड्यूल लोड करता है और इसके मेथड्स को C++ फ़ंक्शंस के रूप में प्रस्तुत करता है। लेज़ी लोडिंग का अर्थ है कि मॉड्यूल पहली पहुंच तक मेमोरी का उपभोग नहीं करता — यह विशेष रूप से दर्जनों नेटिव मॉड्यूल वाले एप्लिकेशन के लिए महत्वपूर्ण है, जिनमें से कई केवल विशिष्ट स्क्रीन में उपयोग किए जाते हैं।

JSI के माध्यम से कोड जनरेशन

नए आर्किटेक्चर में JSI के साथ काम करने के लिए Codegen का उपयोग किया जाता है — एक उपकरण जो JavaScript विशिष्टताओं से C++ बाइंडिंग उत्पन्न करता है। डेवलपर TypeScript या Flow में नेटिव मॉड्यूल इंटरफ़ेस का वर्णन करता है, और Codegen JSI-संगत होस्ट ऑब्जेक्ट लागू करने वाला C++ कोड उत्पन्न करता है। यह नियमित कार्य को स्वचालित करता है और गारंटी देता है कि JS और C++ पक्षों पर प्रकार सिंक्रनाइज़ हैं।

JSI के साथ कोड उदाहरण

आइए देखें कि व्यवहार में JSI के साथ काम कैसा दिखता है। इस उदाहरण में, हम एक सरल C++ क्लास बनाते हैं जिसे JSI के माध्यम से JS में निर्यात किया जाता है, और React Native में JavaScript कोड से इसकी मेथड कॉल करते हैं।

// Calculator.h — C++ क्लास हेडर JS से सुलभ
class Calculator {
public:
    double add(double a, double b) { return a + b; }
    double multiply(double a, double b) { return a * b; }
};

Calculator क्लास में दो अंकगणितीय मेथड्स हैं। हमें इसे JS से सुलभ बनाने की आवश्यकता है। इसके लिए, एक होस्ट ऑब्जेक्ट बनाया जाता है जो Calculator को रैप करता है और JSI के माध्यम से इसके मेथड्स प्रस्तुत करता है।

// CalculatorHostObject.cpp — JSI रैपर कार्यान्वयन
class CalculatorHostObject : public jsi::HostObject {
private:
    Calculator calc;

public:
    jsi::Value get(jsi::Runtime& runtime,
        const jsi::PropNameID& name) override {
        auto propName = name.utf8(runtime);

        if (propName == "add") {
            return jsi::Function::createFromHostFunction(
                runtime, name, 2,
                [this](jsi::Runtime& runtime,
                    const jsi::Value& thisVal,
                    const jsi::Value* args,
                    size_t count) -> jsi::Value {
                    return jsi::Value(calc.add(
                        args[0].asNumber(),
                        args[1].asNumber()));
                });
        }
        return jsi::Value::undefined();
    }
};

इस कोड में, get मेथड हर बार कॉल किया जाता है जब JS ऑब्जेक्ट की प्रॉपर्टी तक पहुंचता है। यदि प्रॉपर्टी का नाम “add” है, तो एक C++ फ़ंक्शन लौटाया जाता है जो JS से दो तर्क लेता है और calc.add() को कॉल करता है। मान jsi::Value के रूप में लौटाया जाता है — JSI स्वचालित रूप से double को JS संख्या में बदल देता है।

JavaScript से कॉल करना

JS वातावरण में होस्ट ऑब्जेक्ट पंजीकृत करने के बाद, कॉल एक सामान्य JS फ़ंक्शन की तरह दिखता है। कोड जनरेशन चरण में सभी प्रकारों की जाँच की जाती है, जो रनटाइम के दौरान प्रकार बेमेल त्रुटियों को समाप्त करती है।

// JavaScript — JSI के माध्यम से C++ कैलकुलेटर को कॉल करना
import { Calculator } from 'react-native-calculator'

const result = Calculator.add(5, 3)
console.log(result) // 8 — सिंक्रोनस, बिना देरी के

const product = Calculator.multiply(4, 2.5)
console.log(product) // 10 — तत्काल परिणाम

ध्यान दें: परिणाम तुरंत लौटाया जाता है, बिना Promise, बिना await, बिना कॉलबैक के। यह एक सिंक्रोनस कॉल है जो Bridge आर्किटेक्चर में असंभव थी। लंबे समय तक चलने वाले संचालन (फ़ाइल पढ़ना, नेटवर्क अनुरोध) के लिए, एसिंक्रोनस पैटर्न का उपयोग किया जाना चाहिए — JSI भारी कार्यों के लिए बैकग्राउंड थ्रेड की आवश्यकता को समाप्त नहीं करता है।

व्यवहार में, अधिकांश डेवलपर्स JSI होस्ट ऑब्जेक्ट्स मैन्युअल रूप से नहीं लिखते हैं — यह कार्य Codegen द्वारा किया जाता है, जो TypeScript विशिष्टताओं के आधार पर C++ रैपर उत्पन्न करता है। हालांकि, JSI अंदरूनी रूप से कैसे काम करता है, यह समझना प्रभावी प्रदर्शन डिबगिंग और जटिल नेटिव मॉड्यूल बनाते समय आवश्यक है जिन्हें C++ लाइब्रेरी (Skia, FFmpeg, OpenCV) तक सीधी पहुंच की आवश्यकता होती है।