Codegen: apa itu, pembuatan kode dan arsitektur Fabric

Apa itu Codegen?

Codegen (kependekan dari Code Generator) adalah alat baris perintah yang merupakan bagian dari React Native, yang secara otomatis menghasilkan kode penghubung untuk komunikasi antara JavaScript dan platform native (iOS, Android). Codegen adalah bagian tak terpisahkan dari arsitektur baru React Native dan digunakan baik untuk Fabric (perender) maupun TurboModules (modul native).

Ide utama Codegen terletak pada pemisahan tanggung jawab: pengembang mendeskripsikan “apa” yang harus dilakukan fungsi (tanda tangannya), dan Codegen menghasilkan “bagaimana” ini akan dikirim ke sisi native. Ini menghilangkan kebutuhan untuk menulis kode penghubung C++ untuk JSI, stub Objective-C untuk iOS dan kelas Java untuk Android secara manual. Sumber kebenaran tunggal — spesifikasi TypeScript — menjamin bahwa tipe di semua tingkat cocok, yang menghilangkan seluruh kelas kesalahan terkait ketidakcocokan tipe antara JS dan kode native.

Codegen diperkenalkan bersama dengan versi stabil pertama arsitektur baru React Native (0.70+) dan sejak itu menjadi alat wajib untuk membuat modul native. Tanpa Codegen, pengembang harus menulis JSI Host Objects secara manual, yang membutuhkan pengetahuan mendalam tentang C++ dan pemahaman tentang cara kerja internal mesin JavaScript.

Evolusi: dari jembatan manual ke pembuatan otomatis

Sebelum munculnya Codegen, pengembangan modul native untuk React Native mencakup tiga langkah: menulis antarmuka JavaScript, implementasi modul native di Java/Objective-C dan penulisan jembatan secara manual. Saat mengubah tanda tangan metode, ketiga file harus diperbarui secara sinkron. Codegen mengotomatiskan rutinitas ini: perubahan hanya dilakukan pada spesifikasi TypeScript, dan sisanya dihasilkan kembali.

Integrasi dengan sistem build

Codegen terintegrasi ke dalam proses build React Native melalui Metro dan CocoaPods. Saat build dijalankan, Codegen menganalisis spesifikasi TypeScript, menghasilkan file C++ dan platform, dan menempatkannya di direktori build. Ini berarti kode yang dihasilkan selalu sesuai dengan spesifikasi saat ini dan tidak memerlukan pembaruan manual.

Bagaimana Cara Kerja Codegen?

Proses kerja Codegen terdiri dari tiga tahap: mengurai spesifikasi, membangun representasi perantara, dan menghasilkan file target. Setiap tahap terisolasi, yang memungkinkan penambahan dukungan untuk platform atau bahasa pembuatan baru dengan mudah.

Pada tahap pertama, Codegen membaca file spesifikasi dalam format TypeScript atau Flow. Spesifikasi mendeskripsikan antarmuka modul native: nama metode, tipe parameter dan nilai kembalian. Codegen mendukung tipe primitif (number, string, boolean), serta tipe kompleks — objek, array, Promise dan Callback. Spesifikasi disimpan dalam file dengan ekstensi .ts atau .js di direktori khusus proyek.

Pada tahap kedua, Codegen membangun pohon sintaksis abstrak (AST) dari spesifikasi yang dibaca. AST mewakili struktur data dalam format netral, tidak terikat pada bahasa pembuatan tertentu. Ini memungkinkan pembuatan kode C++ untuk Fabric, Objective-C untuk iOS dan Java untuk Android dari satu AST — tidak diperlukan pekerjaan tambahan untuk mendukung semua platform.

Pada tahap ketiga, Codegen menggunakan mesin template (berbasis Mustache) untuk menghasilkan file platform target. Setiap template bertanggung jawab atas jenis file tertentu: file header C++ (.h), implementasi (.cpp), protokol Objective-C (.h) atau implementasi (.mm), kelas Java. Template disertakan dengan React Native, tetapi dapat disesuaikan untuk kebutuhan spesifik proyek.

Skema kerja Codegen

// NativeCalculator.ts — spesifikasi modul native
import { TurboModule, TurboModuleRegistry } from 'react-native'
import { Double } from 'react-native/Libraries/Types/CodegenTypes'

export interface NativeCalculatorSpec extends TurboModule {
    add(a: Double, b: Double): Double
    multiply(a: Double, b: Double): Double
}

export default TurboModuleRegistry.<NativeCalculatorSpec>('NativeCalculator')

Dalam contoh ini, spesifikasi mendeskripsikan modul NativeCalculator dengan dua metode: add dan multiply. Keduanya menerima Double dan mengembalikan Double. String 'NativeCalculator' di TurboModuleRegistry menunjukkan nama modul yang akan digunakan di sisi native. Codegen berdasarkan spesifikasi ini akan menghasilkan semua file yang diperlukan untuk Fabric dan TurboModules.

Codegen dalam Arsitektur Fabric

Dalam konteks Fabric (perender baru React Native), Codegen memainkan peran khusus. Fabric membutuhkan setiap komponen UI native memiliki representasi C++ yang dapat dibuat dan dikelola melalui JSI. Codegen menghasilkan representasi C++ ini secara otomatis berdasarkan spesifikasi komponen.

Pembuatan untuk komponen UI

Untuk komponen UI, Codegen tidak hanya menghasilkan kelas C++ Shadow Node, tetapi juga representasi platform. Misalnya, untuk komponen kustom Button di iOS, Codegen akan membuat kelas Objective-C yang mendaftarkan komponen di Fabric dan menghubungkannya dengan C++ Shadow Node. Pengembang hanya perlu mendeskripsikan properti komponen (warna, ukuran, penangan) di spesifikasi TypeScript.

Tipifikasi properti

Codegen mendukung transmisi data langsung dan terbalik. Direct Event (misalnya onPress) dihasilkan sebagai struktur C++ dengan bidang yang secara otomatis diserialisasi saat dikirim ke JS. EventEmitter memungkinkan sisi native mengirim event ke JS tanpa permintaan dari JS. Codegen menghasilkan wrapper bertipe untuk kedua arah, menghilangkan kesalahan ketidakcocokan nama bidang.

Codegen untuk pustaka pihak ketiga

Pengembang pustaka dapat menyediakan spesifikasi Codegen bersama dengan paket npm. Saat menginstal pustaka, Codegen secara otomatis mendeteksi spesifikasi dan menghasilkan kode penghubung untuk platform saat ini. Ini sangat penting untuk pustaka native, karena pengguna pustaka tidak perlu tahu C++, Objective-C atau Java — cukup mengimpor tipe TypeScript dan menggunakan komponen yang sudah jadi.

File Apa yang Dihasilkan Codegen?

Codegen menghasilkan file untuk tiga lingkungan target: C++ (JSI), Objective-C (iOS) dan Java (Android). Setiap file memiliki peran dan struktur yang ditentukan secara ketat. Memahami file apa yang dibuat membantu dalam debugging dan, jika perlu, koreksi manual kode yang dihasilkan.

File C++ (JSI)

Untuk setiap modul native, Codegen membuat dua file C++: file header (.h) dengan deklarasi kelas Host Object dan file implementasi (.cpp) dengan metode yang memanggil fungsi yang sesuai di platform. File header berisi kelas yang mewarisi jsi::HostObject dengan metode get yang ditimpa untuk akses ke fungsi modul. File implementasi berisi fungsi lambda yang saat dipanggil dari JS mendelegasikan eksekusi ke modul native.

File iOS (Objective-C)

Untuk iOS, Codegen menghasilkan protokol Objective-C dan kategori. Protokol mendeklarasikan metode yang harus diimplementasikan oleh modul native. Kategori pada RCTCxxBridge berisi kode penghubung yang mendaftarkan modul di RCTTurboModuleManager. Ini memungkinkan pemanggilan metode modul Objective-C dari C++ JSI melalui mekanisme standar RCTBridge.

File Android (Java)

Untuk Android, Codegen menghasilkan antarmuka Java dan kelas abstrak. Antarmuka berisi deklarasi metode modul dengan tipe Java yang benar. Kelas abstrak mengimplementasikan antarmuka TurboModule dan berisi logika dasar untuk mendaftarkan modul di ReactPackage. Pengembang mewarisi kelas ini dan hanya mengimplementasikan logika bisnis metode.

Struktur file yang dihasilkan

// Struktur direktori setelah menjalankan Codegen
build/
    generated/
        ios/
            NativeCalculatorSpec.h     // Protokol Objective-C
            NativeCalculatorSpec.mm    // Implementasi JSI
        android/
            NativeCalculatorSpec.java  // Antarmuka Java
            NativeCalculatorModuleBase.java  // Kelas dasar
        cxx/
            NativeCalculator.h         // Header C++ Host Object
            NativeCalculator.cpp        // Implementasi JSI C++

Seluruh struktur ini dibuat secara otomatis saat membangun proyek. Pengembang tidak boleh mengedit file yang dihasilkan — pada build berikutnya akan ditimpa. Jika perlu mengubah perilaku modul, perubahan hanya dilakukan pada kode sumber implementasi native (Java/Objective-C) atau di spesifikasi TypeScript.

Contoh Alur Kerja Codegen

Mari kita lihat siklus kerja lengkap dengan Codegen pada contoh pembuatan modul native untuk menyimpan data di Keychain. Ini adalah tugas tipikal yang memerlukan akses ke API native iOS dan Android.

Langkah 1: Spesifikasi

Pengembang membuat file spesifikasi yang mendeskripsikan antarmuka modul KeychainStorage. Metode save dan read menerima string dan mengembalikan Promise, karena bekerja dengan Keychain mungkin asinkron di beberapa platform.

import { TurboModule, TurboModuleRegistry } from 'react-native'

export interface KeychainStorageSpec extends TurboModule {
    save(key: string, value: string): Promise<void>
    read(key: string): Promise<string | null>
    delete(key: string): Promise<boolean>
}

export default TurboModuleRegistry.<KeychainStorageSpec>('KeychainStorage')

Langkah 2: Menjalankan Codegen

Codegen berjalan secara otomatis saat membangun proyek React Native. Jika perlu menjalankannya secara manual, gunakan perintah npx react-native codegen. Codegen mengurai spesifikasi dan membuat semua file yang diperlukan di build/generated/. Pengembang melihat hasilnya dalam bentuk file C++, Objective-C dan Java yang dihasilkan, tetapi tidak boleh mengeditnya.

# Jalankan Codegen secara manual
npx react-native codegen --target-path ./build/generated

# Setelah pembuatan — bangun proyek
npx react-native run-ios
npx react-native run-android

Langkah 3: Penggunaan di JS

Setelah pembuatan dan build, pengembang mengimpor modul sebagai tipe TypeScript biasa. IDE secara otomatis menyarankan tanda tangan metode berkat file .d.ts yang dihasilkan. TypeScript menjamin bahwa tipe parameter dan nilai kembalian cocok dengan implementasi native — jika dalam spesifikasi ditentukan string, sisi native akan menerima tepat string.

import KeychainStorage from './NativeKeychainStorage'

async function storeToken(token: string) {
    await KeychainStorage.save('auth_token', token)
}

async function getToken(): Promise<string | null> {
    return KeychainStorage.read('auth_token')
}

Dalam contoh ini terlihat bahwa kode JS tidak mengandung petunjuk platform apa pun — sama untuk iOS dan Android. Semua spesifikasi platform tersembunyi di dalam kode yang dihasilkan oleh Codegen. Codegen mengambil alih semua pekerjaan rutin pembuatan jembatan, meninggalkan pengembang hanya dengan logika bisnis dan pemeriksaan tipe melalui TypeScript.