React Native-da Turbo Module — nima, JSI qanday ishlaydi va arxitektura

Turbo Module nima?

Turbo Module — bu React Native-ning yangi arxitekturasining komponenti bo'lib, u JavaScript-ning native kod bilan aloqasi uchun klassik Bridge-ni almashtiradi. Bridge-dan farqli o'laroq, har bir xabar JSON-ga serializatsiya qilinadi va asinxron uzatiladi, Turbo Module esa JSI — JavaScript-ga C++ tilida yozilgan funksiyalarni to'g'ridan-to'g'ri chaqirish imkonini beruvchi qatlamdan foydalanadi.

Turbo Module arxitekturasi Meta jamoasi tomonidan React Conf 2021 da “The New Architecture” kod nomi ostida React Native-ning keng ko'lamli qayta qurilishining bir qismi sifatida taqdim etilgan. Turbo Module-dan tashqari, yangi arxitektura Fabric (yangi renderer), Codegen (kod generatori) va JSI (aloqa interfeysi) ni o'z ichiga oladi. Birgalikda bu komponentlar 2015 yildan beri React Native-da to'plangan samaradorlik muammolarini hal qiladi.

Turbo Module klassik Native Module-larning uchta asosiy muammosini hal qiladi: asinxronlik (barcha chaqiruvlar navbatdan o'tadi), serializatsiya (har bir chaqiruv JSON konvertatsiyasini talab qiladi) va yuklash (barcha modullar ilova ishga tushganda ishga tushiriladi). Turbo Module bilan native metodlar sinxron chaqiriladi, ma'lumotlar nusxalanmasdan uzatiladi va modullar talab asosida yuklanadi.

JSI qanday ishlaydi

JSI (JavaScript Interface) — bu JavaScript dvigateli (Hermes yoki JSC) va native kod o'rtasida qatlam yaratuvchi C++ API. JSI host-obyektlarni — oddiy JavaScript obyektlari va metodlari kabi ko'rinadigan C++ obyektlarini taqdim etadi. JavaScript bunday obyektning metodini chaqirganda, JSI to'g'ridan-to'g'ri tegishli C++ kodini serializatsiya va ip almashinuvsisiz bajaradi.

JSI va Bridge o'rtasidagi asosiy farq — ma'lumotlarni nusxalamaslikdir. Bridge-da har bir qiymat JSON-ga serializatsiya qilinadi, navbat orqali uzatiladi va deserializatsiya qilinadi. JSI xotiradagi ma'lumotlarga ko'rsatkichlarni uzatadi, bu esa katta hajmdagi ma'lumotlar bilan samaradorlikni yo'qotmasdan ishlash imkonini beradi. Meta-ning testlariga ko'ra, JSI chaqiruvlari Bridge orqali amalga oshiriladigan o'xshash chaqiruvlardan 5–10 barobar tezroq.

HostObject va sinxron chaqiruvlar

JSI HostObject interfeysini belgilaydi — React Native JS muhitida oddiy obyekt sifatida ro'yxatdan o'tkazadigan C++ sinfi. JS kodi HostObject-ning xususiyatiga murojaat qilganda yoki uning metodini chaqirganda, JSI chaqiruvni ushlab oladi va C++ kodini bajaradi. Bu Bridge navbatini kutmasdan sinxron operatsiyalarni bajarish imkonini beradi.

// JSI HostObject namunasi — sinxron native chaqiruv
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();
    }
};

Yuqoridagi kod JSI HostObject-ning JavaScript-dan compressImage chaqiruvini qanday qayta ishlashini ko'rsatadi. Funksiya ikkita argument (yo'l satri va sifat raqami) qabul qiladi, compressNative funksiyasini chaqiradi va natijani qaytaradi — hammasi sinxron, Bridgesiz, JSONsiz. Bu JSI-ning klassik arxitekturaga nisbatan asosiy ustunligidir.

JSI React Native asosiy ishga tushirish muhitining bir qismidir va muayyan JavaScript dvigateliga bog'liq emas. U ham Hermes, ham JavaScriptCore (JSC) bilan ishlaydi, native muhit bilan aloqa qilish uchun yagona interfeysni ta'minlaydi.

Turbo Module vs Bridge: taqqoslash

Turbo Module va Bridge-ni taqqoslash React Native arxitekturasining evolyutsiyasini ko'rsatadi. Bridge 2015 yilda React Native-ni tez ishga tushirish uchun yaratilgan, ammo ilovalarning murakkabligi oshgani sayin uning cheklovlari muhim bo'lib qoldi. Turbo Module bu muammolarni arxitektura darajasida hal qiladi.

Amalda farq eng ko'p native metodlarni tez-tez chaqirishda seziladi — masalan, media qayta ishlash yoki GPU bilan ishlashda. Kamdan-kam chaqiruvlar (seansda bir marta) uchun samaradorlik farqi ahamiyatsiz. Turbo Module shuningdek katta ikkilik ma'lumotlar — tasvirlar, videolar, ikkilik protokollar bilan ishlashni osonlashtiradi, Bridge-da bular fayl tizimi bilan qo'shimcha yechimlarni talab qilardi.

Turbo Module yaratish namunasi

Turbo Module yaratish TypeScript-da spetsifikatsiyani belgilash bilan boshlanadi. Codegen ushbu spetsifikatsiya asosida avtomatik ravishda C++ interfeyslari va Objective-C/Java stub-larini yaratadi. Bu rivojlanish yondashuvini butunlay o'zgartiradi — dasturchi API-ni bir marta ta'riflaydi, Codegen esa qolganini yaratadi.

// ImageCompressor.ts — Turbo Module spetsifikatsiyasi
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 orqali kod yaratish

Codegen TypeScript spetsifikatsiyasini tahlil qiladi va C++ HostObject, Objective-C protokoli va Java interfeysini yaratadi. Dasturchiga faqat native mantiqni amalga oshirish qoladi. Bu yondashuv JavaScript va native tomondagi turlarning doimo mos kelishini kafolatlaydi, qo'lda xaritalash xatolarini bartaraf qiladi.

// iOS uchun TurboModule implementatsiyasi (yaratilgan 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

Muhim afzallik — dangasa yuklash. Turbo Module ilova ishga tushganda emas, balki faqat JavaScript-dan birinchi murojaat qilinganda yaratiladi. Bu barcha native modullar darhol yuklanadigan klassik yondashuv bilan solishtirganda ilovaning ishga tushish vaqtini 30–50% qisqartiradi.

Bridge-dan Turbo Module-ga o'tish

Bridge-dan Turbo Module-ga o'tish ilovani to'liq qayta yozishni talab qilmaydi. React Native 0.73+ ikkala arxitekturani parallel qo'llab-quvvatlaydi — Bridge modullari ishlashda davom etadi va yangi modullar Turbo Module sifatida yaratilishi mumkin. Bu modulma-modul bosqichma-bosqich o'tish imkonini beradi.

React Native 0.76+ loyihasida yangi arxitekturani faollashtirish uchun react-native.config.js faylida newArchEnabled bayrog'ini true ga o'rnating. Shundan so'ng barcha mavjud native modullar Bridge orqali ishlashda davom etadi va yangi modullar Turbo Module sifatida yaratilishi mumkin. Codegen ikkala variantni avtomatik qayta ishlaydi.

// react-native.config.js — yangi arxitekturani faollashtirish
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

O'tishni JavaScript-dan eng ko'p chaqiriladigan modullardan boshlash tavsiya etiladi — aynan ular eng katta samaradorlik o'sishini oladi. Kamdan-kam chaqiriladigan modullarni (seansda bir marta) sezilarli samaradorlik yo'qotmasdan Bridge-da qoldirish mumkin.

• Codegen — native interfeyslarni avtomatik yaratish uchun TypeScript spetsifikatsiyalaridan foydalaning.
• E2E testlari — React Native yangilanishidan so'ng ayniqsa modullarning ikkala arxitekturada ishlashini tekshiring.
• Zaxira rejasi — Turbo Module bilan muammo yuzaga kelsa, konfiguratsiya bayrog'i orqali vaqtincha Bridge-ga qaytishingiz mumkin.