React Native میں Bridge — یہ کیا ہے، کام کرنے کا اصول اور تعامل

React Native میں Bridge کیا ہے؟

Bridge React Native کا ایک اہم آرکیٹیکچرل عنصر ہے جو JavaScript تھریڈ — جہاں ایپلیکیشن کا کاروباری منطق چلتا ہے — اور نیٹیو iOS اور Android تھریڈز کے درمیان دو طرفہ غیر ہم وقت ساز مواصلات فراہم کرتا ہے۔ 2015 میں React Native کے اجراء کے بعد سے، Bridge JS کوڈ کے پلیٹ فارم APIs — کیمرہ، جغرافیائی محل وقوع، فائل سسٹم، اطلاعیں اور دیگر نیٹیو صلاحیتوں — کے ساتھ تعامل کا واحد طریقہ رہا ہے۔

Bridge فن تعمیر پیغام قطار (message queue) کے اصول پر مبنی ہے۔ جب JavaScript کوڈ کسی نیٹیو طریقہ کو کال کرتا ہے، درخواست JSON سٹرنگ میں سیریلائز ہو جاتی ہے، قطار میں ڈال دی جاتی ہے، اور غیر ہم وقت ساز طور پر نیٹیو جانب بھیج دی جاتی ہے۔ نیٹیو کوڈ درخواست پر کارروائی کرتا ہے، متعلقہ آپریشن انجام دیتا ہے، اور نتیجہ اسی قطار کے ذریعے JS تھریڈ کو واپس بھیجتا ہے۔ React Conf 2021 میں Meta کی رپورٹ کے مطابق، ایک اوسط ایپلیکیشن میں فی سیکنڈ 10,000 پیغامات تک Bridge سے گزرتے ہیں۔

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 سے ممتاز کرتا ہے، جو سست لوڈ ہوتا ہے اور دوبارہ شروع کیے بغیر ماڈیولز کی ہاٹ ریلوڈ کو سپورٹ کرتا ہے۔