Turbo Module di React Native — apa itu, cara kerja JSI dan arsitektur

Apa itu Turbo Module?

Turbo Module adalah komponen dari arsitektur baru React Native yang menggantikan Bridge klasik untuk interaksi JavaScript dengan kode native. Tidak seperti Bridge, di mana setiap pesan diserialisasi ke JSON dan dikirim secara asinkron, Turbo Module menggunakan JSI — lapisan perantara yang memungkinkan JavaScript memanggil langsung fungsi yang ditulis dalam C++.

Arsitektur Turbo Module dipresentasikan oleh tim Meta di React Conf 2021 sebagai bagian dari restrukturisasi besar React Native dengan nama kode “The New Architecture”. Selain Turbo Module, arsitektur baru ini mencakup Fabric (renderer baru), Codegen (generator kode), dan JSI (antarmuka komunikasi). Bersama-sama, komponen-komponen ini memecahkan masalah kinerja yang telah terakumulasi di React Native sejak 2015.

Turbo Module memecahkan tiga masalah utama Native Module klasik: asinkronitas (semua panggilan melalui antrian), serialisasi (setiap panggilan memerlukan konversi JSON), dan pemuatan (semua modul diinisialisasi saat aplikasi dimulai). Dengan Turbo Module, metode native dipanggil secara sinkron, data ditransfer tanpa penyalinan, dan modul dimuat sesuai permintaan.

Cara kerja JSI

JSI (JavaScript Interface) adalah API C++ yang menciptakan lapisan perantara antara mesin JavaScript (Hermes atau JSC) dan kode native. JSI menyediakan objek host — objek C++ yang terlihat seperti objek dan metode JavaScript biasa. Ketika JavaScript memanggil metode dari objek semacam itu, JSI langsung mengeksekusi kode C++ yang sesuai tanpa serialisasi dan tanpa perpindahan thread.

Perbedaan utama antara JSI dan Bridge adalah tidak adanya penyalinan data. Di Bridge, setiap nilai diserialisasi ke JSON, dikirim melalui antrian, dan dideserialisasi. JSI mengirimkan pointer ke data dalam memori, memungkinkan bekerja dengan volume data besar tanpa kehilangan kinerja. Menurut tes Meta, panggilan JSI 5–10 kali lebih cepat daripada panggilan serupa melalui Bridge.

HostObject dan panggilan sinkron

JSI mendefinisikan antarmuka HostObject — kelas C++ yang didaftarkan React Native di lingkungan JS sebagai objek biasa. Ketika kode JS mengakses properti atau memanggil metode HostObject, JSI menangkap panggilan tersebut dan mengeksekusi kode C++. Ini memungkinkan operasi dilakukan secara sinkron, tanpa menunggu antrian Bridge.

// Contoh JSI HostObject — panggilan native sinkron
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();
    }
};

Kode di atas menunjukkan bagaimana JSI HostObject memproses panggilan compressImage dari JavaScript. Fungsi ini menerima dua argumen (string path dan angka kualitas), memanggil fungsi native compressNative dan mengembalikan hasilnya — semuanya sinkron, tanpa Bridge, tanpa JSON. Ini adalah keunggulan utama JSI dibandingkan arsitektur klasik.

JSI adalah bagian dari runtime utama React Native dan tidak tergantung pada mesin JavaScript tertentu. Ia bekerja dengan Hermes maupun JavaScriptCore (JSC), menyediakan antarmuka terpadu untuk komunikasi dengan lingkungan native.

Turbo Module vs Bridge: perbandingan

Perbandingan Turbo Module dan Bridge menunjukkan evolusi arsitektur React Native. Bridge dirancang untuk peluncuran cepat React Native pada tahun 2015, tetapi seiring meningkatnya kompleksitas aplikasi, keterbatasannya menjadi kritis. Turbo Module memecahkan masalah ini di tingkat arsitektur.

Dalam praktiknya, perbedaan paling terlihat pada panggilan metode native yang sering — misalnya, saat memproses media atau bekerja dengan GPU. Untuk panggilan yang jarang (sekali per sesi), perbedaan kinerja tidak signifikan. Turbo Module juga menyederhanakan pekerjaan dengan data biner besar — gambar, video, protokol biner — yang di Bridge memerlukan solusi rumit dengan sistem file.

Contoh pembuatan Turbo Module

Pembuatan Turbo Module dimulai dengan mendefinisikan spesifikasi dalam TypeScript. Codegen secara otomatis menghasilkan antarmuka C++ dan stub Objective-C/Java berdasarkan spesifikasi ini. Ini sepenuhnya mengubah pendekatan pengembangan — pengembang mendeskripsikan API sekali, dan Codegen membuat sisanya.

// ImageCompressor.ts — spesifikasi 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>;
}

Generasi kode melalui Codegen

Codegen menganalisis spesifikasi TypeScript dan menghasilkan C++ HostObject, protokol Objective-C, dan antarmuka Java. Pengembang hanya perlu mengimplementasikan logika native. Pendekatan ini menjamin bahwa tipe di sisi JavaScript dan native selalu cocok, menghilangkan kesalahan pemetaan manual.

// Implementasi TurboModule untuk iOS (stub yang dihasilkan)
@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

Keuntungan penting — lazy loading. Turbo Module tidak diinisialisasi saat aplikasi dimulai, melainkan dibuat hanya saat pertama kali diakses dari JavaScript. Ini mengurangi waktu startup aplikasi sebesar 30–50% dibandingkan dengan pendekatan klasik di mana semua modul native dimuat segera.

Migrasi dari Bridge ke Turbo Module

Peralihan dari Bridge ke Turbo Module tidak memerlukan penulisan ulang aplikasi secara penuh. React Native 0.73+ mendukung kedua arsitektur secara paralel — modul Bridge tetap berfungsi dan modul baru dapat dibuat sebagai Turbo Module. Ini memungkinkan migrasi bertahap, modul demi modul.

Untuk mengaktifkan arsitektur baru di proyek React Native 0.76+, atur flag newArchEnabled ke true di file react-native.config.js. Setelah itu, semua modul native yang ada tetap berfungsi melalui Bridge, dan modul baru dapat dibuat sebagai Turbo Module. Codegen secara otomatis memproses kedua varian.

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

Disarankan untuk memulai migrasi dengan modul yang paling sering dipanggil dari JavaScript — modul-modul ini akan mendapatkan peningkatan kinerja terbesar. Modul yang jarang dipanggil (sekali per sesi) dapat tetap di Bridge tanpa kehilangan kinerja yang signifikan.

• Codegen — gunakan spesifikasi TypeScript untuk pembuatan antarmuka native secara otomatis.
• Pengujian E2E — periksa kerja modul pada kedua arsitektur, terutama setelah pembaruan React Native.
• Rencana cadangan — jika terjadi masalah dengan Turbo Module, Anda dapat kembali sementara ke Bridge melalui flag konfigurasi.