JSI: apa itu, prinsip kerja dan arsitektur

Apa itu JSI?

JSI (JavaScript Interface) — adalah lapisan C++ yang memberikan mesin JavaScript (Hermes, JavaScriptCore, V8) kemampuan untuk mengakses langsung objek, fungsi, dan memori C++. Tidak seperti Bridge yang menserialisasi panggilan ke JSON dan mengirimkannya melalui antrian asinkron, JSI memungkinkan kode JS untuk memanggil metode C++ secara sinkron dan menerima hasilnya segera.

JSI diperkenalkan di React Native 0.64 sebagai bagian dari arsitektur baru (New Architecture). Tujuan utamanya adalah menghilangkan hambatan yang merupakan Bridge: setiap interaksi antara JS dan kode native menghabiskan waktu untuk serialisasi, deserialisasi, dan transmisi melalui antrian pesan. JSI memecahkan masalah ini dengan menyediakan mesin JS akses langsung ke objek C++ melalui wrapper yang mengimplementasikan antarmuka jsi::Value, jsi::Object, dan jsi::Function.

JSI bukan pengganti Bridge „satu-ke-satu” — ini adalah pendekatan integrasi yang fundamentally berbeda. Bridge bekerja seperti kotak surat: JS mengirim pesan, pesan melewati antrian, sisi native memprosesnya dan mengirim balasan. JSI bekerja seperti pointer: JS menerima referensi ke objek C++ dan dapat memanggil metodenya secara sinkron, seperti fungsi JS biasa. Ini adalah perbedaan fundamental dalam arsitektur interaksi dua lingkungan.

Sejarah penciptaan

Kebutuhan akan JSI muncul karena keterbatasan Bridge asli yang dibuat di React Native 2015. Seiring meningkatnya popularitas framework dan kompleksitas aplikasi, masalah kinerja menjadi jelas: setiap panggilan modul native membutuhkan setidaknya 3–5 ms untuk serialisasi. Untuk operasi sederhana seperti membaca nilai sensor atau mendapatkan ukuran layar, ini dapat diterima, tetapi untuk animasi, bekerja dengan grafis, dan pemrosesan data streaming — kritis. Tim React Native memulai pekerjaan pada arsitektur baru pada tahun 2019, dan JSI menjadi fondasinya.

Dukungan mesin JavaScript

JSI dirancang sebagai abstraksi di atas mesin JavaScript. Ini menyediakan API C++ terpadu yang diimplementasikan untuk setiap mesin spesifik: Hermes, JavaScriptCore (iOS), V8 (Android). Ini berarti pengembang tidak perlu khawatir tentang perbedaan antara mesin — Fabric dan TurboModules bekerja sama terlepas dari mesin JS mana yang digunakan.

Bagaimana cara kerja JSI?

Di dasar JSI terdapat konsep Host Objects — objek C++ yang diekspor ke lingkungan JS sebagai objek JS native. Ketika kode JS mengakses properti atau metode dari objek semacam itu, JSI mencegat panggilan dan mendelegasikannya ke metode C++ yang sesuai. Ini terjadi secara sinkron, di thread yang sama, tanpa peralihan konteks dan tanpa alokasi memori untuk string JSON.

Setiap Host Object mengimplementasikan antarmuka jsi::HostObject dengan metode get, set, dan getPropertyNames. Mesin JS memanggil metode-metode ini setiap kali mengakses properti objek. Misalnya, saat memanggil NativeModule.someMethod() di JS, JSI mengubah panggilan ini menjadi panggilan C++ dari metode Host Object yang sesuai. Nilai yang dikembalikan diteruskan kembali ke JS sebagai jsi::Value — tipe umum yang dapat mewakili angka, string, nilai boolean, objek, atau undefined.

Fitur penting JSI adalah tidak adanya antrian pesan. Bridge menggunakan antrian asinkron: JS mengirim permintaan, beralih ke tugas lain, sisi native memproses permintaan, dan hasilnya kembali melalui callback. JSI bekerja secara sinkron: jika JS memanggil metode modul native melalui JSI, eksekusi kode JS dijeda sampai hasilnya diperoleh. Ini menyederhanakan logika (tidak perlu menunggu callback) dan menghilangkan race conditions, tetapi membutuhkan kehati-hatian — panggilan sinkron yang lama memblokir thread JS.

Siklus hidup nilai JSI

Nilai yang dibuat melalui JSI hidup di lingkungan runtime mesin JS dan dikelola oleh garbage collector. Ketika kode C++ membuat jsi::String atau jsi::Object dan mengembalikannya ke JS, lingkungan secara otomatis mengelola memori. Jika kode C++ ingin mempertahankan referensi ke nilai JS di antara panggilan, ia menggunakan jsi::Value::getWeak() atau global jsi::Object::setProperty dengan menyimpan referensi pada objek root runtime. Ini mencegah penghapusan prematur oleh garbage collector.

Keamanan thread

JSI tidak aman untuk thread secara default. Semua panggilan metode JSI harus berasal dari thread tempat JS dijalankan (biasanya thread JS React Native). Jika modul native memulai pekerjaan latar di thread terpisah, hasilnya harus dikembalikan melalui thread JS menggunakan panggilan runOnJS dari TurboModules. Keterbatasan ini adalah harga untuk sinkronisitas dan tidak adanya serialisasi.

JSI vs Bridge: perbandingan

Perbedaan antara JSI dan Bridge bersifat fundamental dan mempengaruhi semua aspek interaksi JS dengan kode native. Bridge bersifat asinkron, menserialisasi data ke JSON dan menggunakan antrian pesan; JSI bersifat sinkron, bekerja dengan referensi native dan tidak memerlukan serialisasi.

Menurut data React Native Team, migrasi dari Bridge ke JSI di aplikasi Facebook Marketplace mengurangi waktu startup sebesar 35% dan menurunkan konsumsi memori sebesar 20% karena menghilangkan duplikasi data antara JS dan sisi native.

Kapan Bridge diperlukan

Bridge bukanlah „kesalahan” — itu adalah keputusan arsitektural yang dibenarkan pada saat pembuatan React Native pada tahun 2015. Pengembangan native untuk dua platform dengan bahasa berbeda memerlukan format pertukaran universal. JSON sebagai format serialisasi tersedia di semua platform dan memungkinkan penyatuan interaksi. Masalahnya muncul kemudian, ketika React Native mulai digunakan untuk aplikasi kompleks dengan ribuan panggilan modul native per detik.

Kompatibilitas mundur

React Native mempertahankan kompatibilitas mundur: modul native yang ditulis untuk Bridge terus bekerja di arsitektur baru melalui lapisan kompatibilitas. Namun, untuk modul baru, disarankan untuk segera menggunakan JSI melalui TurboModules. Migrasi modul yang ada terdiri dari mengganti protokol interaksi tanpa mengubah logika bisnis modul itu sendiri.

JSI dalam arsitektur React Native

JSI adalah lapisan fundamental tempat semua komponen arsitektur baru React Native dibangun. Tanpa JSI, baik Fabric (renderer baru) maupun TurboModules (modul native yang dioptimalkan) tidak dapat berfungsi. JSI menyediakan cara terpadu untuk interaksi JS dengan C++ di semua level.

Fabric dan JSI

Fabric — renderer baru React Native yang menggunakan JSI untuk akses sinkron ke representasi UI di C++. Dalam arsitektur lama, rendering melewati Bridge: JS membuat elemen React, menserialisasinya ke JSON, mengirim melalui Bridge, sisi native mendeserialisasi dan membuat UI. Fabric melalui JSI membuat objek C++ Shadow Tree langsung dari JS, menghitung Layout secara sinkron melalui Yoga, dan meneruskan bingkai yang sudah jadi ke renderer native — tanpa satu pun serialisasi.

TurboModules dan JSI

TurboModules — adalah evolusi modul native React Native. Alih-alih mendaftarkan modul di Bridge dan memanggil metodenya melalui JSON, TurboModules menggunakan JSI untuk pemuatan malas dan panggilan langsung. Ketika kode JS pertama kali mengakses modul, JSI membuat Host Object — ia memuat modul native dan menyediakan metodenya sebagai fungsi C++. Pemuatan malas berarti modul tidak mengonsumsi memori hingga penggunaan pertama — ini sangat penting dalam aplikasi dengan puluhan modul native, banyak di antaranya hanya digunakan di layar tertentu.

Pembuatan kode melalui JSI

Untuk bekerja dengan JSI di arsitektur baru, digunakan Codegen — alat yang menghasilkan wrapper C++ dari spesifikasi JavaScript. Pengembang mendeskripsikan antarmuka modul native di TypeScript atau Flow, dan Codegen menghasilkan kode C++ yang mengimplementasikan Host Object yang kompatibel dengan JSI. Ini mengotomatiskan pekerjaan rutin dan menjamin bahwa tipe di sisi JS dan C++ disinkronkan.

Contoh kode dengan JSI

Mari kita lihat bagaimana bekerja dengan JSI dalam praktik. Dalam contoh ini, kelas C++ sederhana dibuat yang diekspor ke JS melalui JSI, dan metodenya dipanggil dari kode JavaScript React Native.

// Calculator.h — header kelas C++ yang dapat diakses dari JS
class Calculator {
public:
    double add(double a, double b) { return a + b; }
    double multiply(double a, double b) { return a * b; }
};

Kelas Calculator berisi dua metode aritmetika. Kita perlu membuatnya dapat diakses dari JS. Untuk ini, kita membuat Host Object yang membungkus Calculator dan menyediakan metodenya melalui JSI.

// CalculatorHostObject.cpp — implementasi wrapper JSI
class CalculatorHostObject : public jsi::HostObject {
private:
    Calculator calc;

public:
    jsi::Value get(jsi::Runtime& runtime,
        const jsi::PropNameID& name) override {
        auto propName = name.utf8(runtime);

        if (propName == "add") {
            return jsi::Function::createFromHostFunction(
                runtime, name, 2,
                [this](jsi::Runtime& runtime,
                    const jsi::Value& thisVal,
                    const jsi::Value* args,
                    size_t count) -> jsi::Value {
                    return jsi::Value(calc.add(
                        args[0].asNumber(),
                        args[1].asNumber()));
                });
        }
        return jsi::Value::undefined();
    }
};

Dalam kode ini, metode get dipanggil setiap kali JS mengakses properti objek. Jika nama properti adalah „tambah”, fungsi C++ dikembalikan yang menerima dua argumen dari JS dan memanggil calc.add(). Nilai dikembalikan sebagai jsi::Value — JSI secara otomatis mengonversi double menjadi angka JS.

Panggilan dari JavaScript

Setelah Host Object didaftarkan di lingkungan JS, panggilan terlihat seperti fungsi JS biasa. Semua tipe diperiksa pada fase pembuatan kode, yang menghilangkan kesalahan ketidakcocokan tipe saat runtime.

// JavaScript — memanggil kalkulator C++ melalui JSI
import { Calculator } from 'react-native-calculator'

const result = Calculator.add(5, 3)
console.log(result) // 8 — sinkron, tanpa penundaan

const product = Calculator.multiply(4, 2.5)
console.log(product) // 10 — hasil langsung

Perhatikan: hasilnya dikembalikan segera, tanpa Promise, tanpa await, tanpa callback. Ini adalah panggilan sinkron, yang tidak mungkin dilakukan dalam arsitektur Bridge. Untuk operasi yang berlangsung lama (membaca file, permintaan jaringan), pola asinkron harus digunakan — JSI tidak menghilangkan kebutuhan akan thread latar untuk tugas berat.

Dalam praktiknya, sebagian besar pengembang tidak menulis JSI Host Objects secara manual — pekerjaan ini dilakukan oleh Codegen, yang menghasilkan wrapper C++ berdasarkan spesifikasi TypeScript. Namun, memahami cara kerja JSI di balik layar diperlukan untuk debugging kinerja yang efektif dan saat membuat modul native kompleks yang memerlukan akses langsung ke pustaka C++ (Skia, FFmpeg, OpenCV).