Turbo Module در React Native — چیست، JSI چگونه کار می‌کند و معماری

Turbo Module چیست؟

Turbo Module جزئی از معماری جدید React Native است که Bridge کلاسیک را برای تعامل JavaScript با کد بومی جایگزین می‌کند. برخلاف Bridge که هر پیام به JSON سریال‌سازی شده و به صورت ناهمزمان ارسال می‌شود، Turbo Module از JSI استفاده می‌کند — لایه‌ای میانی که به JavaScript اجازه می‌دهد مستقیماً توابع نوشته شده به زبان C++ را فراخوانی کند.

معماری Turbo Module توسط تیم Meta در React Conf 2021 به عنوان بخشی از بازسازی گسترده‌تر React Native با نام رمز «The New Architecture» معرفی شد. علاوه بر Turbo Module، معماری جدید شامل Fabric (رندرکننده جدید)، Codegen (تولیدکننده کد) و JSI (رابط تعامل) است. این مؤلفه‌ها با هم مشکلات عملکردی را که از سال 2015 در React Native انباشته شده بود حل می‌کنند.

Turbo Module سه مشکل کلیدی Native Module های کلاسیک را حل می‌کند: ناهمزمانی (همه فراخوانی‌ها از صف عبور می‌کنند)، سریال‌سازی (هر فراخوانی نیاز به تبدیل JSON دارد) و بارگذاری (همه ماژول‌ها در شروع برنامه مقداردهی اولیه می‌شوند). با Turbo Module، متدهای بومی همزمان فراخوانی می‌شوند، داده‌ها بدون کپی‌کردن منتقل می‌شوند و ماژول‌ها بر اساس تقاضا بارگذاری می‌شوند.

JSI چگونه کار می‌کند

JSI (JavaScript Interface) یک API به زبان C++ است که لایه‌ای میانی بین موتور JavaScript (Hermes یا JSC) و کد بومی ایجاد می‌کند. JSI اشیاء میزبان — اشیاء C++ که مانند اشیاء و متدهای معمولی JavaScript به نظر می‌رسند — ارائه می‌دهد. وقتی JavaScript متد چنین شیئی را فراخوانی می‌کند، JSI مستقیماً کد C++ مربوطه را بدون سریال‌سازی و بدون جابجایی بین نخ‌ها اجرا می‌کند.

تفاوت کلیدی JSI با Bridge — عدم کپی‌کردن داده‌ها است. در Bridge هر مقدار به JSON سریال‌سازی، از طریق صف ارسال و سپس غیرسریال‌سازی می‌شود. JSI اشاره‌گرهایی به داده‌ها در حافظه منتقل می‌کند که امکان کار با حجم زیادی از داده را بدون کاهش عملکرد فراهم می‌کند. بر اساس آزمایش‌های Meta، فراخوانی‌های JSI ۵ تا ۱۰ برابر سریع‌تر از فراخوانی‌های مشابه از طریق Bridge هستند.

HostObject و فراخوانی‌های همزمان

JSI رابط HostObject را تعریف می‌کند — کلاس C++ که React Native در محیط JS به عنوان یک شیء معمولی ثبت می‌کند. وقتی کد JS به ویژگی یا متد HostObject دسترسی پیدا می‌کند، JSI فراخوانی را گرفته و کد C++ را اجرا می‌کند. این امکان انجام عملیات‌ها را به صورت همزمان، بدون انتظار برای صف Bridge فراهم می‌کند.

// مثال HostObject JSI — فراخوانی همزمان بومی
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 چگونه فراخوانی compressImage را از JavaScript پردازش می‌کند. تابع دو آرگومان (مسیر رشته و عدد کیفیت) دریافت می‌کند، تابع بومی compressNative را فراخوانی کرده و نتیجه را برمی‌گرداند — همه به صورت همزمان، بدون Bridge، بدون JSON. این مزیت کلیدی JSI نسبت به معماری کلاسیک است.

JSI بخشی از زمان اجرای اصلی React Native است و به موتور JavaScript خاصی وابسته نیست. هم با Hermes و هم با JavaScriptCore (JSC) کار می‌کند و رابط یکپارچه‌ای برای ارتباط با محیط بومی ارائه می‌دهد.

Turbo Module در مقابل Bridge: مقایسه

مقایسه Turbo Module و Bridge تحول معماری React Native را نشان می‌دهد. Bridge برای راه‌اندازی سریع React Native در سال 2015 طراحی شد، اما با افزایش پیچیدگی برنامه‌ها، محدودیت‌های آن بحرانی شد. Turbo Module این مشکلات را در سطح معماری حل می‌کند.

در عمل، تفاوت در فراخوانی‌های مکرر متدهای بومی بیشتر محسوس است — مثلاً هنگام پردازش رسانه یا کار با GPU. برای فراخوانی‌های نادر (یک بار در هر جلسه) تفاوت عملکرد ناچیز است. Turbo Module همچنین کار با داده‌های باینری بزرگ — تصاویر، ویدیوها، پروتکل‌های باینری — را ساده‌تر می‌کند که در Bridge نیاز به راه‌حل‌های پیچیده با سیستم فایل داشت.

مثال ایجاد Turbo Module

ایجاد Turbo Module با تعریف مشخصات در TypeScript آغاز می‌شود. Codegen به طور خودکار رابط‌های C++ و stubهای 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 را تحلیل کرده و HostObject C++، پروتکل Objective-C و رابط Java را تولید می‌کند. فقط پیاده‌سازی منطق بومی برای توسعه‌دهنده باقی می‌ماند. این رویکرد تضمین می‌کند که انواع در سمت JavaScript و بومی همیشه مطابقت دارند و خطاهای نگاشت دستی را حذف می‌کند.

// پیاده‌سازی TurboModule برای iOS (stub تولید شده)
@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 ایجاد می‌شود. این زمان راه‌اندازی برنامه را در مقایسه با رویکرد کلاسیک که همه Native Module ها بلافاصله بارگذاری می‌شوند، ۳۰–۵۰٪ کاهش می‌دهد.

مهاجرت از Bridge به Turbo Module

انتقال از Bridge به Turbo Module نیاز به بازنویسی کامل برنامه ندارد. React Native 0.73+ از هر دو معماری به صورت موازی پشتیبانی می‌کند — ماژول‌های Bridge به کار خود ادامه می‌دهند و ماژول‌های جدید می‌توانند به عنوان Turbo Module ایجاد شوند. این امکان مهاجرت تدریجی، ماژول به ماژول را فراهم می‌کند.

برای فعال‌سازی معماری جدید در پروژه React Native 0.76+، پرچم newArchEnabled را در فایل react-native.config.js روی true تنظیم کنید. پس از آن، همه Native Module های موجود از طریق 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 بازگردید.