React Native-də Turbo Module — nədir, JSI necə işləyir və arxitektura

Turbo Module nədir?

Turbo Module — React Native-in yeni arxitekturasının komponentidir, JavaScript-in native kodla əlaqəsi üçün klassik Bridge-i əvəz edir. Bridge-dən fərqli olaraq, hər mesaj JSON-a seriyalaşdırılır və asinxron ötürülür, Turbo Module isə JSI — JavaScript-ə birbaşa C++ dilində yazılmış funksiyaları çağırmağa imkan verən təbəqədən istifadə edir.

Turbo Module arxitekturası Meta komandası tərəfindən React Conf 2021-də “The New Architecture” kod adı altında React Native-in daha geniş miqyaslı yenidən qurulmasının bir hissəsi kimi təqdim edilmişdir. Turbo Module-dən əlavə, yeni arxitektura Fabric (yeni renderer), Codegen (kod generatoru) və JSI (kommunikasiya interfeysi) daxildir. Birlikdə bu komponentlər 2015-ci ildən React Native-də yığılan performans problemlərini həll edir.

Turbo Module klassik Native Module-lərin üç əsas problemini həll edir: asinxronluq (bütün çağırışlar növbədən keçir), seriyalaşdırma (hər çağırış JSON çevrilməsi tələb edir) və yükləmə (bütün modullar tətbiq başlayanda işə salınır). Turbo Module ilə native metodlar sinxron çağırılır, məlumatlar kopyalanmadan ötürülür və modullar tələb əsasında yüklənir.

JSI necə işləyir

JSI (JavaScript Interface) — JavaScript mühərriki (Hermes və ya JSC) ilə native kod arasında təbəqə yaradan C++ API-dir. JSI host-obyektlər — adi JavaScript obyektləri və metodları kimi görünən C++ obyektləri təmin edir. JavaScript belə bir obyektin metodunu çağırdıqda, JSI birbaşa müvafiq C++ kodunu seriyalaşdırma və thread keçidi olmadan icra edir.

JSI ilə Bridge arasında əsas fərq — məlumatların kopyalanmamasıdır. Bridge-də hər dəyər JSON-a seriyalaşdırılır, növbədən ötürülür və deseriyalaşdırılır. JSI yaddaşdakı məlumatlara göstəricilər ötürür, bu da böyük həcmli məlumatlarla performans itkisi olmadan işləməyə imkan verir. Meta-nın testlərinə görə, JSI çağırışları Bridge vasitəsilə analoji çağırışlardan 5–10 dəfə sürətlidir.

HostObject və sinxron çağırışlar

JSI HostObject interfeysini təyin edir — React Native-in JS mühitində adi obyekt kimi qeydiyyatdan keçirdiyi C++ sinfi. JS kodu HostObject-in xassəsinə müraciət etdikdə və ya metodunu çağırdıqda, JSI çağırışı ələ keçirir və C++ kodunu icra edir. Bu, Bridge növbəsini gözləmədən sinxron əməliyyatları yerinə yetirməyə imkan verir.

// JSI HostObject nümunəsi — sinxron native çağırış
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();
    }
};

Yuxarıdakı kod JSI HostObject-in JavaScript-dən compressImage çağırışını necə emal etdiyini göstərir. Funksiya iki arqument qəbul edir (yol sətri və keyfiyyət nömrəsi), compressNative funksiyasını çağırır və nəticəni qaytarır — hamısı sinxron, Bridge və JSON olmadan. Bu, JSI-nin klassik arxitekturaya nisbətən əsas üstünlüyüdür.

JSI React Native əsas icra mühitinin bir hissəsidir və konkret JavaScript mühərrikindən asılı deyil. O, həm Hermes, həm də JavaScriptCore (JSC) ilə işləyir, native mühitlə əlaqə üçün vahid interfeys təmin edir.

Turbo Module vs Bridge: müqayisə

Turbo Module və Bridge-in müqayisəsi React Native arxitekturasının təkamülünü göstərir. Bridge 2015-ci ildə React Native-in sürətli işə salınması üçün hazırlanmışdır, lakin tətbiqlərin mürəkkəbliyi artdıqca onun məhdudiyyətləri kritik hala gəlmişdir. Turbo Module bu problemləri arxitektura səviyyəsində həll edir.

Praktikada fərq ən çox native metodların tez-tez çağırıldığı hallarda nəzərə çarpır — məsələn, media emalı və ya GPU ilə işləyərkən. Nadir çağırışlar (seansda bir dəfə) üçün performans fərqi əhəmiyyətsizdir. Turbo Module həmçinin böyük ikili məlumatlar — şəkillər, videolar, ikili protokollarla işi asanlaşdırır, Bridge-də bunlar fayl sistemi ilə əlavə həllər tələb edirdi.

Turbo Module yaratmaq nümunəsi

Turbo Module yaratmaq TypeScript-də spesifikasiyanın təyin edilməsi ilə başlayır. Codegen bu spesifikasiya əsasında avtomatik olaraq C++ interfeysləri və Objective-C/Java stub-ları yaradır. Bu, inkişaf yanaşmasını tamamilə dəyişir — tərtibatçı API-i bir dəfə təsvir edir, Codegen isə qalanını yaradır.

// ImageCompressor.ts — Turbo Module spesifikasiyası
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 vasitəsilə kod generasiyası

Codegen TypeScript spesifikasiyasını təhlil edir və C++ HostObject, Objective-C protokolu və Java interfeysi yaradır. Tərtibatçıya yalnız native məntiqi tətbiq etmək qalır. Bu yanaşma JavaScript və native tərəfdə tiplərin həmişə uyğun olmasını təmin edir, əl ilə xəritələşdirmə səhvlərini aradan qaldırır.

// iOS üçün TurboModule tətbiqi (yaradılmış 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

Vacib üstünlük — tənbəl yükləmədir. Turbo Module tətbiq başlayanda deyil, yalnız JavaScript-dən ilk müraciətdə yaradılır. Bu, bütün Native Module-lərin dərhal yükləndiyi klassik yanaşma ilə müqayisədə tətbiqin başlama müddətini 30–50% qısaldır.

Bridge-dən Turbo Module-ə keçid

Bridge-dən Turbo Module-ə keçid tətbiqin tam yenidən yazılmasını tələb etmir. React Native 0.73+ hər iki arxitekturanı paralel dəstəkləyir — Bridge modulları işləməyə davam edir, yeni modullar isə Turbo Module kimi yaradıla bilər. Bu, modul-modul tədricən keçid etməyə imkan verir.

React Native 0.76+ layihəsində yeni arxitekturanı aktivləşdirmək üçün react-native.config.js faylında newArchEnabled flagını true təyin edin. Bundan sonra bütün mövcud Native Module-lər Bridge vasitəsilə işləməyə davam edir, yeni modullar isə Turbo Module kimi yaradıla bilər. Codegen hər iki variantı avtomatik emal edir.

// react-native.config.js — yeni arxitekturanı aktivləşdir
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Keçidə JavaScript-dən ən tez-tez çağırılan modullardan başlamaq tövsiyə olunur — məhz onlar ən böyük performans artımını əldə edəcəklər. Nadir çağırılan modullar (seansda bir dəfə) əhəmiyyətli performans itkisi olmadan Bridge-də qala bilər.

• Codegen — native interfeyslərin avtomatik yaradılması üçün TypeScript spesifikasiyalarından istifadə edin.
• E2E testləri — React Native yenilənməsindən sonra xüsusilə modulların hər iki arxitekturada işini yoxlayın.
• Ehtiyat planı — Turbo Module ilə problem yaranarsa, konfiqurasiya flagı ilə müvəqqəti olaraq Bridge-ə qayıda bilərsiniz.