जावास्क्रिप्ट इंटरफ़ेस (JSI): अवलोकन और प्रतिक्रिया मूल निवासी की पुन: वास्तुकला की आवश्यकता

Nov 26 2022
रिएक्ट नेटिव को क्रॉस प्लेटफॉर्म सपोर्ट, ओटीए अपडेट, लाइव रीलोड, लागत दक्षता आदि जैसे कई फायदों के साथ बांधा गया है, लेकिन स्केलिंग रिएक्शन में सबसे बड़ी अड़चन देशी अनुप्रयोगों का प्रदर्शन रहा है क्योंकि आप अधिक मॉड्यूल जोड़ते हैं, जब एप्लिकेशन डेटा गहन हो जाता है या जब कई होते हैं पुल के ऊपर से गुजरना आवश्यक है। लेकिन मौजूदा आर्किटेक्चर कैसे काम करता है? रिएक्टिव नेटिव आर्किटेक्चर तीन थ्रेड्स पर निर्भर करता है: a) UI थ्रेड: यह मुख्य एप्लिकेशन थ्रेड है जिसका उपयोग android और iOS व्यूज को रेंडर करने के लिए किया जाता है।

रिएक्ट नेटिव को क्रॉस प्लेटफॉर्म सपोर्ट, ओटीए अपडेट, लाइव रीलोड, लागत दक्षता आदि जैसे कई फायदों के साथ बांधा गया है, लेकिन स्केलिंग रिएक्शन में सबसे बड़ी अड़चन देशी अनुप्रयोगों का प्रदर्शन रहा है क्योंकि आप अधिक मॉड्यूल जोड़ते हैं, जब एप्लिकेशन डेटा गहन हो जाता है या जब कई होते हैं पुल के ऊपर से गुजरना आवश्यक है।

लेकिन मौजूदा आर्किटेक्चर कैसे काम करता है?

रिएक्टिव नेटिव आर्किटेक्चर तीन थ्रेड्स पर निर्भर करता है: a) UI थ्रेड: यह मुख्य एप्लिकेशन थ्रेड है जिसका उपयोग android और iOS व्यूज को रेंडर करने के लिए किया जाता है। b) शैडो थ्रेड: यह एक तरह का बैकग्राउंड थ्रेड है जो होस्ट प्लेटफॉर्म पर रेंडर करने से पहले तत्वों के लेआउट ( योग का उपयोग करके) की गणना करता है। सी) जेएस थ्रेड: बंडल जेएस जो आपके रिएक्ट नेटिव एप्लिकेशन में सभी लॉजिक को हैंडल करने के लिए जिम्मेदार है।


स्रोत: फ्रीकोडकैंप

इन थ्रेड्स के बीच की बातचीत प्रत्यक्ष नहीं होती है और हर बार एक थ्रेड को दूसरे थ्रेड के साथ इंटरैक्ट करने की आवश्यकता होती है, इसे पुल पर जाने के लिए JSON को डेटा के क्रमांकन और डीरिएलाइज़ेशन के भारी कार्य से गुजरना पड़ता है। इसका परिणाम डेटा की अनावश्यक प्रतिलिपि में होता है और यह पुल बहुत आसानी से भीड़भाड़ कर सकता है क्योंकि संचालन async हैं और कोई सख्त टाइपिंग नहीं है।

वर्तमान वास्तुकला की कुछ सीमाएँ:
1. जावास्क्रिप्ट और देशी पक्ष एक दूसरे से अवगत नहीं हैं और अतुल्यकालिक JSON संदेशों पर निर्भर हैं।
2. स्टार्टअप पर सभी मॉड्यूल लोड होते हैं जो बातचीत के लिए समय बढ़ाता है।
3. कार्यों की कोई प्राथमिकता नहीं: अन्य कार्यों पर महत्वपूर्ण उपयोगकर्ता इंटरैक्शन को प्राथमिकता नहीं दी जा सकती है।
4. ब्रिज क्रमांकन
5. यूआई तत्व सीधे जेएस थ्रेड से सुलभ नहीं हैं।

प्रतिक्रिया मूल निवासी की वर्तमान वास्तुकला

जेएसआई का परिचय

रिएक्ट नेटिव के लिए नया आर्किटेक्चर

जेएसआई जावास्क्रिप्ट और मूल भाग कैसे इंटरैक्ट करता है इसमें एक बड़ा बदलाव लाता है। यह जेएस और सी ++ के बीच इंटरफेस की मदद से दो क्षेत्रों के बीच सीधा संचार प्रदान करता है। जावास्क्रिप्ट इंटरफ़ेस का उपयोग करते हुए, जेएस होस्ट ऑब्जेक्ट्स के संदर्भ को पकड़ सकता है और उन पर कॉल विधियों को कॉल कर सकता है। होस्ट ऑब्जेक्ट की मदद से अब हम जावास्क्रिप्ट संदर्भ में देशी वस्तुओं का उपयोग कर सकते हैं। पुल जो सबसे बड़ी बाधा थी, उसे भागों में विभाजित किया गया है:

कपड़ा

फेसबुक द्वारा बनाया गया नया रेंडरिंग सिस्टम जो यूआई मैनेजर का री-आर्किटेक्चर है। यह रेंडरर सी ++ में कार्यान्वित किया गया है और कोर प्लेटफॉर्म के बीच साझा किया गया है। पिछले कार्यान्वयन लेआउट निर्माण में JSON के क्रमांकन और पुल के पार कूदने जैसे कई कदम शामिल थे, जिनमें पुल के अवरुद्ध होने पर प्रमुख मुद्दे थे जैसे: एक अनंत सूची के माध्यम से स्क्रॉल करते समय फ़्रेम गिरना। नया कार्यान्वयन UI प्रबंधक को सीधे C++ में शैडो ट्री बनाने की अनुमति देता है, जो विभिन्न क्षेत्रों में छलांग की संख्या को कम करके अनुभव को बहुत बढ़ाता है। ऑपरेशंस सिंक्रोनस और थ्रेड-सेफ होते हैं जिन्हें रिएक्ट (जावास्क्रिप्ट) से रेंडरर (सी ++) में निष्पादित किया जाता है, आमतौर पर जावास्क्रिप्ट थ्रेड पर। इसमें डेटा का कम क्रमांकन भी शामिल है क्योंकि जावास्क्रिप्ट मान सीधे JSI से चुने जा सकते हैं। यह प्रत्यक्ष नियंत्रण कार्यों की प्राथमिकता में भी मदद करता है, रेंडरर अब यह सुनिश्चित करने के लिए कुछ उपयोगकर्ता इंटरैक्शन को प्राथमिकता दे सकता है कि उन्हें समयबद्ध तरीके से संभाला जाए। यह सूचियों, नेविगेशन और जेस्चर हैंडलिंग में प्रदर्शन में काफी सुधार करेगा।

टर्बो मॉड्यूल

पिछले कार्यान्वयन में, हमारे पास मूल मॉड्यूल का संदर्भ नहीं था, इसलिए प्रत्येक मॉड्यूल स्टार्टअप पर लोड किया गया था जो टीटीआई (इंटरएक्टिव का समय) बढ़ाता है, लेकिन टर्बो मॉड्यूल के साथ हम मॉड्यूल को आलसी लोड कर सकते हैं और जब भी इसकी आवश्यकता होती है जो मदद करेगा स्टार्टअप समय में सुधार करने में। उदाहरण के लिए: यदि आपके पास एक लिंक से एक दस्तावेज़ को प्रिंट करने के लिए एक मॉड्यूल है, तो हम अब इस मॉड्यूल को तब लोड कर सकते हैं जब हम प्रिंट स्क्रीन पर उतरते हैं, न कि उस एप्लिकेशन के स्टार्टअप पर जो पिछले आर्किटेक्चर में किया जा रहा था। सी ++ में मॉड्यूल लिखने की क्षमता भी लाभ में जोड़ती है क्योंकि यह प्लेटफॉर्म पर डुप्लिकेट कार्यान्वयन को कम करती है।

कोडजेन

यह सब एक साथ चिपकाने के लिए और दोनों क्षेत्रों को संगत बनाने के लिए रिएक्टिव नेटिव टीम ने जेएस और नेटिव पक्ष के बीच अनुकूलता को स्वचालित करने के लिए एक प्रकार का चेकर बनाया। इस टूल को कोडजेन कहा जाता है। यह एक मॉड्यूलर दृष्टिकोण का उपयोग करता है, जिसका अर्थ है कि किसी भी वैधानिक रूप से टाइप की गई जावास्क्रिप्ट भाषा को उस सिस्टम के लिए पार्सर का उपयोग करके समर्थित किया जा सकता है। सत्य के स्रोत के रूप में टाइप किए गए जावास्क्रिप्ट का उपयोग करके, यह जनरेटर फैब्रिक और टर्बोमॉड्यूल्स द्वारा आत्मविश्वास के साथ संदेश भेजने के लिए आवश्यक इंटरफ़ेस फ़ाइलों को परिभाषित कर सकता है। कोडजेन संकलन समय प्रकार की सुरक्षा भी प्रदान करता है जिसका अर्थ है कि दोनों वातावरण बिना किसी रनटाइम चेक के कमांड निष्पादित कर सकते हैं जिसका मतलब है कि छोटे कोड आकार को शिप करना और तेजी से निष्पादन करना।
चूंकि अब हमारे पास सी ++ कोड है और सी ++ दृढ़ता से टाइप किया गया है, इसलिए हम अपने जेएस कोड को टाइप करने के लिए मजबूर कर रहे हैं, क्योंकि हमें प्रकारों को परिभाषित करना है और कोड में कहीं भी नहीं लिख सकते हैं। यह मूल रूप से आपके लिए एक इंटरफ़ेस बनाता है और अब चूंकि वे जेनरेट किए गए हैं और सी ++ में हैं, अब हम मूल रूप से भेजे जा रहे डेटा पर भरोसा कर सकते हैं और हमें डेटा को सत्यापित करने के लिए आगे और पीछे जाने की आवश्यकता नहीं है। इसका अर्थ यह भी है कि प्रकार की जाँच का उपयोग करके हम विकास के चरण के दौरान उन मुद्दों की आसानी से पहचान कर सकते हैं जिनके परिणामस्वरूप घातक दुर्घटनाएँ या खराब उपयोगकर्ता अनुभव हो सकते हैं।

जेएसआई के कुछ प्रमुख फायदे

  1. जावास्क्रिप्ट कोड किसी भी मूल यूआई तत्वों का संदर्भ रख सकता है और उस पर विधियों को कॉल करता है (वेब ​​​​में डोम मैनिपुलेशन के समान)
  2. देशी कोड के लिए तेज़ और प्रत्यक्ष बाइंडिंग जो प्रदर्शन में बहुत सुधार कर सकती है, उदाहरण के लिए MMKV JSI का उपयोग करता है जो कि Asyncstorage की तुलना में ~30x तेज़ है।
  3. जावास्क्रिप्ट कोर के अलावा अन्य इंजनों का उपयोग किया जा सकता है।
  4. जरूरत पड़ने पर नेटिव मॉड्यूल लोड किए जा सकते हैं।
  5. जेएस और नेटिव कोड को संगत बनाने के लिए स्टेटिक टाइप चेकिंग।

रिएक्ट नेटिव जेएसआई वर्तमान में प्रायोगिक रोलआउट चरण में है और जैसे-जैसे अधिक परियोजनाएं इस परिवर्तन को अपनाती हैं, हमें नई वास्तुकला की सीमाओं और प्रभाव के बारे में अधिक जानकारी मिलेगी, लेकिन एक बात निश्चित है कि रिएक्ट नेटिव और क्रॉस प्लेटफॉर्म एप्लिकेशन डेवलपमेंट का भविष्य रोमांचक लगता है।