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 تحت الاسم الرمزي «الهندسة المعمارية الجديدة». بالإضافة إلى Turbo Module، تتضمن الهندسة المعمارية الجديدة Fabric (عارض جديد)، وCodegen (مولد الكود)، وJSI (واجهة التفاعل). معًا، تحل هذه المكونات مشكلات الأداء التي تراكمت في React Native منذ عام 2015.

يحل Turbo 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 أسرع من 5 إلى 10 مرات من الاستدعاءات المكافئة عبر Bridge.

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 استدعاء 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++ و stubs 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. هذا يقلل وقت بدء تشغيل التطبيق بنسبة 30–50% مقارنة بالنهج الكلاسيكي حيث يتم تحميل جميع الوحدات الأصلية فورًا.

الانتقال من Bridge إلى Turbo Module

لا يتطلب الانتقال من Bridge إلى Turbo Module إعادة كتابة كاملة للتطبيق. يدعم React Native 0.73+ كلتا البنيتين بالتوازي — تستمر وحدات Bridge في العمل ويمكن إنشاء وحدات جديدة كـ Turbo Module. يتيح ذلك الانتقال تدريجيًا، وحدة تلو الأخرى.

لتمكين البنية الجديدة في مشروع React Native 0.76+، قم بتعيين العلم newArchEnabled إلى true في ملف react-native.config.js. بعد ذلك، تستمر جميع الوحدات الأصلية الحالية في العمل عبر 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 عبر علم تكوين.