React Native এ Bridge — এটি কি, কাজের নীতি এবং মিথস্ক্রিয়া

React Native এ Bridge কি?

Bridge হল React Native এর একটি গুরুত্বপূর্ণ আর্কিটেক্চারাল উপাদান যা JavaScript থ্রেড — যেখানে অ্যাপ্লিকেশনের ব্যবসা লজিক চলে — এবং নেটিভ iOS এবং Android থ্রেডের মধ্যে দুইমুখী অ্যাসিংক্রোনাস যোগাযোগ নিশ্চিত করে। 2015 এ React Native লঞ্চের পর থেকে, Bridge হল JS কোডের প্ল্যাটফর্ম API — ক্যামেরা, জিওলোকেশন, ফাইল সিস্টেম, নটিফিকেশন এবং অন্যান্য নেটিভ ক্ষমতার সাথে যোগাযোগ করার একমাত্র উপায়।

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 মিলিসেকেন্ড একটি একক গ্রুপ (batch) হিসেবে প্রেরণ করা হয়। এটি সিরিয়ালাইজেশন ওভারহেড কমায়, কারণ একাধিক কল একটি 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 এ যোগ করে। পঞ্জীকরণের পর, মডিউলটি NativeModules এর মাধ্যমে JavaScript থেকে উপলব্ধ হয়।

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 থেকে আলাদা করে, যা অলসভাবে লোড হয় এবং পুনরায় শুরু ছাড়া মডিউলের হট-রিলোড সমর্থন করে।