React Native-এ Turbo Module — এটি কী, JSI কীভাবে কাজ করে এবং আর্কিটেকচার

Turbo Module কী?

Turbo Module হল নতুন React Native আর্কিটেকচারের একটি উপাদান যা JavaScript এবং নেটিভ কোডের মধ্যে যোগাযোগের জন্য ক্লাসিক Bridge-কে প্রতিস্থাপন করে। Bridge-এর বিপরীতে, যেখানে প্রতিটি বার্তা JSON-এ সিরিয়ালাইজ করা হয় এবং অ্যাসিঙ্ক্রোনাসভাবে প্রেরণ করা হয়, Turbo Module JSI ব্যবহার করে — একটি স্তর যা JavaScript-কে C++-এ লেখা ফাংশন সরাসরি কল করার অনুমতি দেয়।

Turbo Module আর্কিটেকচারটি Meta টিম দ্বারা React Conf 2021-এ «The New Architecture» কোডনামের অধীনে React Native-এর একটি বৃহত্তর পুনর্গঠনের অংশ হিসাবে উপস্থাপিত হয়েছিল। Turbo Module ছাড়াও, নতুন আর্কিটেকচারে Fabric (নতুন রেন্ডারার), Codegen (কোড জেনারেটর) এবং JSI (ইন্টারঅ্যাকশন ইন্টারফেস) অন্তর্ভুক্ত। একসাথে, এই উপাদানগুলি 2015 সাল থেকে React Native-এ জমে থাকা পারফরম্যান্স সমস্যাগুলি সমাধান করে।

Turbo Module ক্লাসিক নেটিভ মডিউলের তিনটি মূল সমস্যা সমাধান করে: অ্যাসিঙ্ক্রোনিসিটি (সমস্ত কল একটি সারির মাধ্যমে যায়), সিরিয়ালাইজেশন (প্রতিটি কলের জন্য JSON রূপান্তর প্রয়োজন), এবং লোডিং (সমস্ত মডিউল অ্যাপ্লিকেশন স্টার্টআপে ইনিশিয়ালাইজ হয়)। Turbo Module-এর সাথে, নেটিভ মেথডগুলি সিঙ্ক্রোনাসভাবে কল করা হয়, ডেটা কপি ছাড়াই স্থানান্তরিত হয় এবং মডিউলগুলি প্রয়োজন অনুসারে লোড হয়।

JSI কীভাবে কাজ করে

JSI (JavaScript Interface) হল একটি C++ API যা JavaScript ইঞ্জিন (Hermes বা JSC) এবং নেটিভ কোডের মধ্যে একটি স্তর তৈরি করে। JSI হোস্ট অবজেক্ট প্রদান করে — C++ অবজেক্ট যা সাধারণ JavaScript অবজেক্ট এবং মেথডের মতো দেখায়। যখন JavaScript এই ধরনের একটি অবজেক্টের মেথড কল করে, JSI সিরিয়ালাইজেশন এবং থ্রেড সুইচিং ছাড়াই সরাসরি সংশ্লিষ্ট C++ কোড এক্সিকিউট করে।

JSI এবং Bridge-এর মধ্যে মূল পার্থক্য হল ডেটা কপির অনুপস্থিতি। Bridge-এ, প্রতিটি মান JSON স্ট্রিং-এ সিরিয়ালাইজ করা হয়, একটি সারির মাধ্যমে পাস করা হয় এবং ডিসিরিয়ালাইজ করা হয়। JSI মেমোরিতে ডেটার পয়েন্টার পাস করে, যা পারফরম্যান্স ক্ষতি ছাড়াই বড় ডেটা ভলিউম নিয়ে কাজ করতে দেয়। Meta-এর পরীক্ষা অনুসারে, JSI কলগুলি Bridge-এর মাধ্যমে সমতুল্য কলের চেয়ে 5–10 গুণ দ্রুত এক্সিকিউট হয়।

HostObject এবং সিঙ্ক্রোনাস কল

JSI HostObject ইন্টারফেস সংজ্ঞায়িত করে — একটি C++ ক্লাস যা React Native JS পরিবেশে একটি সাধারণ অবজেক্ট হিসাবে রেজিস্টার করে। যখন JS কোড একটি প্রপার্টি অ্যাক্সেস করে বা HostObject-এর মেথড কল করে, JSI কলটি ইন্টারসেপ্ট করে এবং C++ কোড এক্সিকিউট করে। এটি Bridge সারির জন্য অপেক্ষা না করে সিঙ্ক্রোনাসভাবে অপারেশন সম্পাদনের অনুমতি দেয়।

// JSI HostObject উদাহরণ — সিঙ্ক্রোনাস নেটিভ কল
class ImageCompressorHostObject : public jsi::HostObject {

    jsi::Value get(
        jsi::Runtime& rt,
        const jsi::PropNameID& propName
    ) override {
        auto name = propName.utf8(rt);
        if (name == "compressImage") {
            return jsi::Function::createFromHostFunction(
                rt,
                jsi::PropNameID::forUtf8(rt, name),
                2,
                [](jsi::Runtime& rt,
                   const jsi::Value& thisValue,
                   const jsi::Value* args,
                   size_t count) -> jsi::Value {
                    return jsi::Value(rt, compressNative(
                        args[0].asString(rt).utf8(rt),
                        args[1].asNumber()
                    ));
                }
            );
        }
        return jsi::Value::undefined();
    }
};

উপরের কোডটি দেখায় কিভাবে JSI HostObject JavaScript থেকে compressImage কল হ্যান্ডল করে। ফাংশন দুটি আর্গুমেন্ট নেয় (একটি পাথ স্ট্রিং এবং একটি কোয়ালিটি নম্বর), নেটিভ ফাংশন compressNative কল করে এবং ফলাফল রিটার্ন করে — সম্পূর্ণ সিঙ্ক্রোনাস, Bridge ছাড়া, JSON ছাড়া। এটি ক্লাসিক আর্কিটেকচারের তুলনায় JSI-এর মূল সুবিধা।

JSI React Native মূল রানটাইমের অংশ এবং কোনো নির্দিষ্ট JavaScript ইঞ্জিনের উপর নির্ভর করে না। এটি Hermes এবং JavaScriptCore (JSC) উভয়ের সাথে কাজ করে, নেটিভ পরিবেশের সাথে ইন্টারঅ্যাকশনের জন্য একটি ইউনিফাইড ইন্টারফেস প্রদান করে।

Turbo Module বনাম Bridge: তুলনা

Turbo Module এবং Bridge-এর তুলনা React Native আর্কিটেকচারের বিবর্তন দেখায়। Bridge 2015 সালে React Native-এর দ্রুত লঞ্চের জন্য ডিজাইন করা হয়েছিল, কিন্তু অ্যাপ্লিকেশন জটিলতা বাড়ার সাথে সাথে এর সীমাবদ্ধতাগুলি গুরুতর হয়ে ওঠে। Turbo Module এই সমস্যাগুলি আর্কিটেকচার স্তরে সমাধান করে।

বাস্তবে, পার্থক্যটি ঘন ঘন নেটিভ মেথড কলের সাথে সবচেয়ে লক্ষণীয় — উদাহরণস্বরূপ, মিডিয়া প্রসেসিং বা GPU-এর সাথে কাজ করার সময়। বিরল কলের জন্য (প্রতি সেশনে একবার), পারফরম্যান্স পার্থক্য নগণ্য। Turbo Module বড় বাইনারি ডেটা — ইমেজ, ভিডিও, বাইনারি প্রোটোকল — নিয়ে কাজকেও সহজ করে, যার জন্য Bridge-এ ফাইল সিস্টেমের সাথে ওয়ার্কঅ্যারাউন্ডের প্রয়োজন হত।

Turbo Module তৈরির উদাহরণ

একটি Turbo Module তৈরি করা TypeScript-এ একটি স্পেসিফিকেশন সংজ্ঞায়িত করার মাধ্যমে শুরু হয়। Codegen এই স্পেসিফিকেশনের ভিত্তিতে স্বয়ংক্রিয়ভাবে C++ ইন্টারফেস এবং Objective-C/Java স্টাব জেনারেট করে। এটি ডেভেলপমেন্ট পদ্ধতি সম্পূর্ণরূপে পরিবর্তন করে — ডেভেলপার একবার API বর্ণনা করে এবং Codegen বাকি সবকিছু তৈরি করে।

// ImageCompressor.ts — Turbo Module স্পেসিফিকেশন
import type { TurboModule } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  compressImage(
    imagePath: string,
    quality: Double
  ): Promise<string>;
}

Codegen-এর মাধ্যমে কোড জেনারেশন

Codegen TypeScript স্পেসিফিকেশন বিশ্লেষণ করে এবং C++ HostObject, Objective-C প্রোটোকল এবং Java ইন্টারফেস জেনারেট করে। ডেভেলপারের শুধুমাত্র নেটিভ লজিক ইমপ্লিমেন্ট করতে হয়। এই পদ্ধতি গ্যারান্টি দেয় যে JavaScript এবং নেটিভ সাইডের টাইপ সবসময় মেলে, ম্যানুয়াল ম্যাপিং ত্রুটিগুলি দূর করে।

// iOS-এর জন্য TurboModule ইমপ্লিমেন্টেশন (জেনারেটেড স্টাব)
@interface ImageCompressorModule ()
    RCT_EXPORT_MODULE(ImageCompressor)
@end

@implementation ImageCompressorModule

RCT_EXPORT_METHOD(compressImage:(NSString *)imagePath
                  quality:(NSNumber *)quality
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
    NSData *compressed = [ImageProcessor compressAtPath:imagePath
                                                    quality:quality.doubleValue];
    resolve([NSString stringWithUTF8String:compressed.UTF8String]);
}

@end

একটি গুরুত্বপূর্ণ সুবিধা হল লেজি লোডিং। Turbo Module অ্যাপ্লিকেশন স্টার্টআপে ইনিশিয়ালাইজ হয় না, বরং শুধুমাত্র JavaScript থেকে প্রথম অ্যাক্সেসে তৈরি হয়। এটি ক্লাসিক পদ্ধতির তুলনায় অ্যাপ্লিকেশন স্টার্টআপ সময় 30–50% কমিয়ে দেয় যেখানে সমস্ত নেটিভ মডিউল অবিলম্বে লোড হয়।

Bridge থেকে Turbo Module-এ স্থানান্তর

Bridge থেকে Turbo Module-এ রূপান্তরের জন্য অ্যাপ্লিকেশনটি সম্পূর্ণরূপে পুনরায় লেখার প্রয়োজন নেই। React Native 0.73+ উভয় আর্কিটেকচার সমান্তরালভাবে সমর্থন করে — Bridge মডিউলগুলি কাজ করতে থাকে এবং নতুন মডিউলগুলি Turbo Module হিসাবে তৈরি করা যেতে পারে। এটি ধীরে ধীরে, মডিউল প্রতি মডিউল স্থানান্তর করতে দেয়।

React Native 0.76+ প্রকল্পে নতুন আর্কিটেকচার সক্ষম করতে, react-native.config.js ফাইলে newArchEnabled ফ্ল্যাগটি true-এ সেট করুন। এর পরে, সমস্ত বিদ্যমান নেটিভ মডিউল Bridge-এর মাধ্যমে কাজ করতে থাকে এবং নতুন মডিউলগুলি Turbo Module হিসাবে তৈরি করা যেতে পারে। Codegen স্বয়ংক্রিয়ভাবে উভয় অপশন হ্যান্ডল করে।

// react-native.config.js — নতুন আর্কিটেকচার সক্ষম করুন
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

JavaScript থেকে সবচেয়ে বেশি কল করা মডিউলগুলি থেকে স্থানান্তর শুরু করার সুপারিশ করা হয় — তারা সবচেয়ে বড় পারফরম্যান্স লাভ পাবে। বিরলভাবে কল করা মডিউলগুলি (প্রতি সেশনে একবার) উল্লেখযোগ্য পারফরম্যান্স ক্ষতি ছাড়াই Bridge-এ রাখা যেতে পারে।

• Codegen — নেটিভ ইন্টারফেসের স্বয়ংক্রিয় জেনারেশনের জন্য TypeScript স্পেসিফিকেশন ব্যবহার করুন।
• E2E পরীক্ষা — বিশেষ করে React Native আপডেটের পরে, উভয় আর্কিটেকচারে মডিউলের কাজ পরীক্ষা করুন।
• ব্যাকআপ পরিকল্পনা — Turbo Module-এর সাথে সমস্যা হলে, কনফিগারেশন ফ্ল্যাগের মাধ্যমে অস্থায়ীভাবে Bridge-এ ফিরে যেতে পারেন।