React Native'de Turbo Module — nedir, JSI nasıl çalışır ve mimari

Turbo Module Nedir?

Turbo Module, JavaScript ile yerel kod arasındaki iletişim için klasik Bridge'in yerini alan yeni React Native mimarisinin bir bileşenidir. Her mesajın JSON'a serileştirildiği ve eşzamansız olarak iletildiği Bridge'in aksine, Turbo Module, JavaScript'in doğrudan C++ ile yazılmış işlevleri çağırmasına izin veren bir katman olan JSI'yi kullanır.

Turbo Module mimarisi, Meta ekibi tarafından React Conf 2021'de «The New Architecture» kod adı altında daha büyük bir React Native yeniden yapılandırmasının parçası olarak tanıtıldı. Turbo Module'e ek olarak, yeni mimari Fabric (yeni işleyici), Codegen (kod oluşturucu) ve JSI (etkileşim arayüzü) içerir. Birlikte, bu bileşenler React Native'de 2015'ten beri biriken performans sorunlarını çözer.

Turbo Module, klasik yerel modüllerin üç temel sorununu çözer: eşzamansızlık (tüm çağrılar bir kuyruktan geçer), serileştirme (her çağrı JSON dönüşümü gerektirir) ve yükleme (tüm modüller uygulama başlatıldığında başlatılır). Turbo Module ile yerel metotlar eşzamanlı olarak çağrılır, veriler kopyalanmadan aktarılır ve modüller ihtiyaç duyulduğunda yüklenir.

JSI Nasıl Çalışır

JSI (JavaScript Interface), JavaScript motoru (Hermes veya JSC) ile yerel kod arasında bir katman oluşturan bir C++ API'sidir. JSI, normal JavaScript nesneleri ve metotları gibi görünen C++ nesneleri olan ana bilgisayar nesneleri sağlar. JavaScript böyle bir nesnenin metodunu çağırdığında, JSI, serileştirme ve iş parçacığı değiştirme olmadan doğrudan ilgili C++ kodunu çalıştırır.

JSI ve Bridge arasındaki temel fark, veri kopyalamanın olmamasıdır. Bridge'de her değer bir JSON dizesine serileştirilir, bir kuyruktan geçirilir ve serileştirmesi çözülür. JSI, bellekteki verilere işaretçiler iletir ve bu da performans kaybı olmadan büyük veri hacimleriyle çalışmayı sağlar. Meta testlerine göre, JSI çağrıları Bridge üzerinden yapılan eşdeğer çağrılardan 5–10 kat daha hızlı yürütülür.

HostObject ve Eşzamanlı Çağrılar

JSI, HostObject arayüzünü tanımlar — React Native'in JS ortamında normal bir nesne olarak kaydettiği bir C++ sınıfı. JS kodu bir özelliğe eriştiğinde veya HostObject'in bir metodunu çağırdığında, JSI çağrıyı yakalar ve C++ kodunu çalıştırır. Bu, Bridge kuyruğunu beklemeden işlemlerin eşzamanlı olarak yürütülmesini sağlar.

// JSI HostObject örneği — eşzamanlı yerel ç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();
    }
};

Yukarıdaki kod, JSI HostObject'in JavaScript'ten compressImage çağrısını nasıl işlediğini gösterir. İşlev iki argüman alır (bir yol dizesi ve bir kalite sayısı), yerel compressNative işlevini çağırır ve sonucu döndürür — tümü eşzamanlı, Bridge olmadan, JSON olmadan. Bu, JSI'nin klasik mimariye göre temel avantajıdır.

JSI, React Native ana çalışma zamanının bir parçasıdır ve belirli bir JavaScript motoruna bağlı değildir. Hem Hermes hem de JavaScriptCore (JSC) ile çalışarak yerel ortamla etkileşim için birleşik bir arayüz sağlar.

Turbo Module vs Bridge: Karşılaştırma

Turbo Module ve Bridge karşılaştırması, React Native mimarisinin evrimini gösterir. Bridge, 2015 yılında React Native'in hızlı başlatılması için tasarlanmıştı, ancak uygulama karmaşıklığı arttıkça sınırlamaları kritik hale geldi. Turbo Module bu sorunları mimari düzeyde çözer.

Pratikte, fark en çok sık yerel metot çağrılarında belirgindir — örneğin, medya işleme veya GPU ile çalışırken. Seyrek çağrılar için (oturum başına bir kez), performans farkı önemsizdir. Turbo Module ayrıca büyük ikili verilerle (görüntüler, videolar, ikili protokoller) çalışmayı basitleştirir — Bridge'de bunlar dosya sistemiyle geçici çözümler gerektiriyordu.

Turbo Module Oluşturma Örneği

Bir Turbo Module oluşturmak, TypeScript'te bir belirtim tanımlamakla başlar. Codegen, bu belirtime dayalı olarak otomatik olarak C++ arayüzleri ve Objective-C/Java stub'ları oluşturur. Bu, geliştirme yaklaşımını tamamen değiştirir — geliştirici API'yi bir kez tanımlar ve Codegen geri kalan her şeyi oluşturur.

// ImageCompressor.ts — Turbo Module belirtimi
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 ile Kod Oluşturma

Codegen, TypeScript belirtimini analiz eder ve C++ HostObject, Objective-C protokolü ve Java arayüzü oluşturur. Geliştiriciye yalnızca yerel mantığı uygulamak kalır. Bu yaklaşım, JavaScript ve yerel taraftaki türlerin her zaman eşleşmesini garanti ederek manuel eşleme hatalarını ortadan kaldırır.

// iOS için TurboModule uygulaması (oluşturulan 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

Önemli bir avantaj geç yüklemedir. Turbo Module, uygulama başlatıldığında başlatılmaz, yalnızca JavaScript'ten ilk erişimde oluşturulur. Bu, tüm yerel modüllerin hemen yüklendiği klasik yaklaşıma kıyasla uygulama başlatma süresini %30–50 oranında azaltır.

Bridge'den Turbo Module'e Geçiş

Bridge'den Turbo Module'e geçiş, uygulamanın tamamen yeniden yazılmasını gerektirmez. React Native 0.73+, her iki mimariyi paralel olarak destekler — Bridge modülleri çalışmaya devam eder ve yeni modüller Turbo Module olarak oluşturulabilir. Bu, modül modül kademeli olarak geçiş yapmayı sağlar.

React Native 0.76+ projesinde yeni mimariyi etkinleştirmek için react-native.config.js dosyasında newArchEnabled bayrağını true olarak ayarlayın. Bundan sonra, mevcut tüm yerel modüller Bridge üzerinden çalışmaya devam eder ve yeni modüller Turbo Module olarak oluşturulabilir. Codegen her iki seçeneği de otomatik olarak işler.

// react-native.config.js — yeni mimariyi etkinleştir
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Geçişe JavaScript'ten en sık çağrılan modüllerle başlanması önerilir — bunlar en büyük performans artışını alacaktır. Seyrek çağrılan modüller (oturum başına bir kez), önemli bir performans kaybı olmadan Bridge'de bırakılabilir.

• Codegen — yerel arayüzlerin otomatik oluşturulması için TypeScript belirtimlerini kullanın.
• E2E testleri — özellikle React Native güncellemesinden sonra modüllerin her iki mimaride de çalışmasını kontrol edin.
• Yedek plan — Turbo Module ile sorun yaşanması durumunda, bir yapılandırma bayrağıyla geçici olarak Bridge'e dönülebilir.