React Native में Bridge — यह क्या है, कार्य सिद्धांत और इंटरैक्शन

React Native में Bridge क्या है?

Bridge React Native में एक महत्वपूर्ण आर्किटेक्चरल तत्व है जो JavaScript थ्रेड — जहाँ एप्लिकेशन का बिजनेस लॉजिक चलता है — और नेटिव iOS और Android थ्रेड्स के बीच दो-तरफा असिंक्रोनस संचार प्रदान करता है। 2015 में React Native के लॉन्च के बाद से, JS कोड के लिए प्लेटफ़ॉर्म APIs — कैमरा, जीओलोकेशन, फ़ाइल सिस्टम, नॉटिफिकेशन और अन्य नेटिव क्षमताओं के साथ बातचीत करने का एकमात्र तरीका Bridge ही रहा है।

Bridge आर्किटेक्चर संदेश क्यू (message queue) के सिद्धांत पर आधारित है। जब JavaScript कोड एक नेटिव विधि को कॉल करता है, तो अनुरोध को एक JSON स्ट्रिंग में सीरियलाइज़ किया जाता है, एक क्यू में रखा जाता है, और असिंक्रोनस रूप से नेटिव पक्ष को भेजा जाता है। नेटिव कोड अनुरोध को संसाधित करता है, संबंधित ऑपरेशन करता है, और परिणाम को उसी क्यू के माध्यम से JS थ्रेड में वापस भेजता है। Meta की React Conf 2021 रिपोर्ट के अनुसार, एक औसत एप्लिकेशन में Bridge से प्रति सेकंड 10,000 संदेश गुजरते हैं।

Bridge के संचालन में शामिल मुख्य थ्रेड: JavaScript Thread (JS कोड निष्पादन), Native Thread (नेटिव ऑपरेशन निष्पादन) और Shadow Thread (Yoga का उपयोग करके लेआउट गणना). प्रत्येक थ्रेड स्वतंत्र रूप से काम करता है, जो UI की उत्तरदायीता सुनिश्चित करता है — नेटिव एनिमेशन JS गणनाओं से अवरुद्ध नहीं होते।

Bridge आर्किटेक्चर कैसे काम करती है

Bridge संचार के लिए तीन प्रमुख तंत्रों का उपयोग करता है: MessageQueue, JSON सीरियलाइजेशन और संदेश बैचिंग। MessageQueue React Native का एक आंतरिक घटक है जो JS और नेटिव पक्ष के बीच कॉल क्यू का प्रबंधन करता है। प्रत्येक नेटिव विधि कॉल को एक क्यू में रखा जाता है, सीरियलाइज़ किया जाता है, और प्रदर्शन अनुकूलन के लिए बैचों में भेजा जाता है।

MessageQueue और सीरियलाइजेशन

MessageQueue बैचिंग के सिद्धांत पर काम करता है: नेटिव विधि कॉल जमा होते हैं और प्रति 5–15 मिलिसेंड में एक ही समूह (बैच) के रूप में भेजे जाते हैं। यह सीरियलाइजेशन ओवरहेड को कम करता है, क्योंकि एक JSON पैकेज में एकाधिक कॉलें पैक हो जाती हैं। नेटिव पक्ष पर, संदेशों का डीसीरियलाइजेशन किया जाता है और उन्हें संबंधित मॉड्यूलों में वितरित किया जाता है।

मॉड्यूल पंजीकरण

नेटिव मॉड्यूल स्वचालित रूप से मैक्रोज या एनोटेशन्स के माध्यम से पंजीकृत होते हैं। iOS RCT_EXPORT_MODULE मैक्रो का उपयोग करता है, Android @ReactMethod एनोटेशन का उपयोग करता है। React Native एप्लिकेशन स्टार्टअप पर पंजीकृत मॉड्यूलों को स्कैन करता है और सभी उपलब्ध विधियों का एक कॉन्फ़िगरेशन JSON मैप बनाता है। यह मैप JS पर्यावरण में भेजा जाता है, और JavaScript को पता चलता है कि कौन सी विधियों को कॉल किया जा सकता है।

डेटा प्रवाह

डेटा इस पथ का अनुसरण करता है: JavaScript NativeModules.CalendarModule.createCalendarEvent() कॉल करता है। विधि को मॉड्यूल आइडेंटिफायर, विधि नाम और आर्गुमेंट्स के साथ एक JSON संदेश में सीरियलाइज़ किया जाता है। संदेश MessageQueue में प्रवेश करता है। नेटिव थ्रेड पर, संदेश का डीसीरियलाइजेशन किया जाता है और संबंधित मॉड्यूल को भेजा जाता है। निष्पादन परिणाम को वापस सीरियलाइज़ किया जाता है और Promise या callback के रूप में JS थ्रेड को भेजा जाता है।

            // JavaScript से Bridge के माध्यम से नेटिव मॉड्यूल कॉल
import { NativeModules } from 'react-native';

const CalendarModule = NativeModules.CalendarModule;

CalendarModule.createCalendarEvent('Test Event', 'Office')
  .then(eventId => {
    console.log('इस आइडी के साथ इवेंट बनाया गया:', eventId);
  })
  .catch(error => {
    console.error('विफल:', error);
  });

नेटिव iOS पक्ष पर, मॉड्यूल RCT_EXPORT_MODULE मैक्रो के साथ एक Objective-C क्लास की तरह दिखता है। विधि को RCT_EXPORT_METHOD मैक्रो का उपयोग करके एक्सपोर्ट किया जाता है, और React Native स्वचालित रूप से इसे Bridge में पंजीकृत करता है। आर्गुमेंट स्थिति के अनुसार पास किए जाते हैं और समर्थित JSON प्रकारों से मेल खाना चाहिए: NSString, NSNumber, NSArray, NSDictionary, BOOL।

            // Bridge में iOS नेटिव मॉड्यूल पंजीकरण
@interface CalendarModule () RCT_EXPORT_MODULE()
@end

@implementation CalendarModule

RCT_EXPORT_METHOD(createCalendarEvent:(NSString *)name
                  location:(NSString *)location
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
  NSNumber *eventId = createEvent(name, location);
  resolve(eventId);
}

@end

Bridge की सीमाएं और समस्याएं

Bridge में कई मूलभूत प्रदर्शन सीमाएं हैं। मुख्य है अनिवार्य असिंक्रोनिटी और सीरियलाइजेशन। प्रत्येक नेटिव विधि कॉल डेटा को JSON स्ट्रिंग में बदलती है, जो विलंबनता और मेमरी खुर्च बढ़ाती है। बड़ी डेटा मात्रा वाले ऑपरेशनों के लिए, जैसे छवि प्रोसेसिंग या वीडियो कार्य, यह एक अड़चन बन जाता है।

सीरियलाइजेशन लागत

JSON सीरियलाइजेशन और डीसीरियलाइजेशन CPU समय और मेमरी की खपत करते हैं। प्रत्येक संदेश को JS पक्ष पर एक स्ट्रिंग में बदलना होता है, ब्रिज के माध्यम से प्रेषित करना होता है, और नेटिव पक्ष पर पार्स करना होता है। Callstack परीक्षणों (2022) के अनुसार, Bridge के माध्यम से 10,000 संख्याओं की एक अरे को सीरियलाइज़ करने में लगभग 30–50 मिलिसेंड लगते हैं, जो उच्च-आवृत्ति कॉल के लिए अस्वीकार्य है।

संदेश आकार सीमा

Bridge बड़े बය්नरी डेटा के स्थानांतरण के लिए अनुकूलित नहीं है। फ़ोटो, ऑडियो फ़ाइलें और वीडियो स्ट्रीम्स को वैकल्पिक दृष्टिकोणों की आवश्यकता होती है — उदाहरण के लिए, डिस्क पर एक फ़ाइल लिखना और पथ को स्ट्रिंग के रूप में पास करना। यह फ़ाइल सिस्टम पढ़ने और लिखने के संचालनों पर अतिरिक्त ओवरहेड बनाता है।

• असिंक्रोनिटी — Bridge सिंक्रोनस कॉल का समर्थन नहीं करता, जिससे तुरंत प्रतिक्रिया की आवश्यकता वाले परिदृश्य जटिल हो जाते हैं।
• मेमरी — प्रत्येक संदेश क्यू में संसाधित होने तक संग्रहीत रहता है, जिससे मेमरी खपत बढ़ सकती है।
• डीबगिंग — Bridge में संदेश ट्रेसिंग मुश्किल है क्योंकि कॉल चैन थ्रेड्स के बीच टूट जाती है।

इन सीमाओं की पहचान ने Meta टीम को एक नई React Native आर्किटेक्चर विकसित करने के लिए प्रेरित किया, जिसमें Bridge को JSI (JavaScript Interface) और Turbo Module से बदला जाता है। JSI बिना सीरियलाइजेशन के सीधे नेटिव विधियों को कॉल करने की अनुमति देता है, जो Bridge की मुख्य कमी को समाप्त करता है।

Bridge बनाम Turbo Module: तुलना

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

Bridge और Turbo Module के बीच चयन React Native संस्करण पर निर्भर करता है। React Native 0.72 और पुराने संस्करणों पर परियोजनाओं के लिए, Bridge मुख्य तंत्र बना रहता है। React Native 0.73 से शुरू करके, Metro और नई आर्किटेक्चर समानांतर रूप से समर्थित हैं, जो क्रमिक माइग्रेशन की अनुमति देता है। Turbo Module में पूर्ण संक्रमण के लिए React Native 0.76+ में अपडेट करने और कॉन्फ़िगरेशन में नई आर्किटेक्चर को सक्षम करने की आवश्यकता है।

Bridge के माध्यम से Native Module सेटअप का उदाहरण

चलिए कैलेंडर मॉड्यूल के उदाहरण का उपयोग करके Bridge के माध्यम से Native Module बनाने और उपयोग करने का पूरा चक्र समझते हैं। मॉड्यूल एक इवेंट बनाएगा और उसका आइडेंटिफायर लौटाएगा। यह उदाहरण दोनों प्लेटफ़ॉर्मों — iOS और Android की सेटअप को शामिल करता है।

Android मॉड्यूल

Android पर, Native Module एक Java क्लास के रूप में बनाया जाता है जो ReactContextBaseJavaModule का विस्तार करता है। @ReactMethod एनोटेशन विधि को Bridge में एक्सपोर्ट करता है। Promise के लिए, com.facebook.react.bridge से Promise इंटरफ़ेस का उपयोग किया जाता है।

public class CalendarModule extends ReactContextBaseJavaModule {

    @Override
    public String getName() {
        return "CalendarModule";
    }

    @ReactMethod
    public void createCalendarEvent(
            String name,
            String location,
            Promise promise) {
        try {
            Integer eventId = createCalendarEventNative(name, location);
            promise.resolve(eventId);
        } catch (Exception e) {
            promise.reject("EVENT_ERROR", e.getMessage());
        }
    }
}

पंजीकरण और उपयोग

मॉड्यूल @ReactModule के माध्यम से या एप्लिकेशन पैकेज में मैनुअली पंजीकृत होता है। React Native स्वचालित रूप से इसे ढूंढता है और Bridge में जोड़ता है। पंजीकरण के बाद, मॉड्यूल JavaScript से NativeModules के माध्यम से उपलब्ध होता है।

public class CalendarPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        return Arrays.asList(
            new CalendarModule(reactContext)
        );
    }

    @Override
    public List<ViewManager> createViewManagers(
            ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

यह ध्यान देना महत्वपूर्ण है कि Bridge में नए मॉड्यूल जोड़ते समय एप्लिकेशन को पुनःशुरू करने की आवश्यकता होती है, क्योंकि कॉन्फ़िगरेशन मैप इनिशियलाइजेशन के दौरान केवल एक बार बनता है। यह इसे Turbo Module से अलग करता है, जो आलसी रूप से लोड होता है और बिना पुनःशुरू किए मॉड्यूल की हॉट-रिलॉड का समर्थन करता है।