Hermes: apa itu, fitur dan optimasi untuk React Native

Apa itu Hermes?

Hermes — adalah mesin JavaScript ringkas, dibuat oleh tim Meta khusus untuk React Native. Mesin ini diumumkan pada tahun 2019 sebagai alternatif untuk JavaScriptCore (JSC), yang digunakan secara default di React Native. Tujuan utama Hermes adalah memastikan startup aplikasi secepat mungkin pada perangkat seluler, terutama pada Android dengan sumber daya terbatas.

Fitur utama Hermes adalah kompilasi awal (AOT — Ahead-of-Time). Tidak seperti mesin JS tradisional yang mengompilasi kode saat runtime (JIT — Just-in-Time), Hermes mengompilasi JavaScript ke bytecode sudah pada tahap build aplikasi. Ini berarti tidak ada kompilasi yang terjadi di perangkat — bytecode langsung dieksekusi oleh mesin virtual Hermes.

Hermes bukan mesin JS universal — mesin ini dioptimalkan secara eksklusif untuk skenario React Native. Mesin ini tidak memiliki fitur yang tidak diperlukan dalam pengembangan seluler: eval, generator, beberapa fitur ES6. Ini memungkinkan mesin menjadi lebih ringkas dan lebih cepat. Menurut Meta, ukuran Hermes sekitar 200–300 KB dalam bentuk terkompresi, yang secara signifikan lebih kecil dari JSC (sekitar 2–3 MB).

Arsitektur Hermes dan bytecode

Arsitektur Hermes berbeda dari mesin JS tradisional karena tidak adanya kompiler JIT. Sebagai gantinya, Hermes menggunakan mesin virtual (VM) yang efisien yang mengeksekusi bytecode yang telah dikompilasi sebelumnya. Mengabaikan JIT memberikan tiga keuntungan utama: kinerja yang dapat diprediksi, konsumsi memori lebih rendah, dan pengurangan waktu startup.

Bytecode Hermes adalah representasi ringkas dari kode JavaScript, dioptimalkan untuk eksekusi cepat. Pada tahap build (melalui Metro), file JavaScript dikompilasi menjadi file .hbc (Hermes Bytecode). Aplikasi memuat file-file ini, dan VM Hermes mengeksekusinya tanpa kompilasi tambahan. Proses build terintegrasi ke dalam Metro melalui plugin hermes-transformer.

Tahapan pemrosesan kode

Proses pemrosesan JavaScript di Hermes terdiri dari tiga tahap: Parse — analisis sintaksis kode sumber, Compile — penerjemahan ke bytecode, Execute — eksekusi bytecode oleh mesin virtual. Dua tahap pertama dilakukan pada tahap build, tahap ketiga — di perangkat. Ini secara fundamental berbeda dari JSC, di mana ketiga tahap dilakukan di perangkat.

# Kompilasi bytecode Hermes selama build
hermes -emit-binary -out index.hbc index.js

# Periksa ukuran bytecode yang dihasilkan
ls -lh index.hbc

# Tampilkan statistik bytecode
hermes -dump-bytecode index.hbc

# Optimalkan bytecode untuk produksi
hermes -O index.js -emit-binary -O target.hbc

Setelah kompilasi, semua file .hbc dikemas ke dalam APK atau IPA bersama dengan kode native. Saat aplikasi dimulai, VM Hermes memuat bytecode dan mulai mengeksekusi hampir seketika — tidak memerlukan waktu pemanasan JIT, yang tipikal untuk V8 dan JSC.

Hermes vs JSC: perbandingan

Perbandingan Hermes dan JavaScriptCore (JSC) membantu memahami kapan memilih mesin yang mana. JSC — mesin JS lengkap dari Apple, digunakan di Safari. Hermes — mesin khusus untuk React Native. Pilihan di antara keduanya tergantung pada prioritas proyek.

Hermes unggul dalam kecepatan startup dan konsumsi memori, tetapi kalah dari JSC dalam kinerja eksekusi perhitungan kompleks. Kompilasi JIT JSC mengoptimalkan bagian kode yang panas selama eksekusi, yang memberikan keuntungan pada operasi intensif CPU. Untuk aplikasi React Native tipikal, di mana pembaruan UI dan navigasi merupakan beban utama, Hermes memberikan pengalaman pengguna yang lebih baik berkat startup yang cepat.

Optimasi Hermes untuk React Native

Hermes mencakup beberapa optimasi yang spesifik untuk React Native. Yang utama adalah integrasi dengan JSI (JavaScript Interface). Hermes mendukung JSI secara native, yang memungkinkan penggunaan arsitektur baru React Native (Fabric + Turbo Module) tanpa lapisan tambahan. Ini menjadikan Hermes dan arsitektur baru sebagai pasangan ideal untuk kinerja maksimal.

Manajemen memori

Hermes menggunakan pengumpul sampah dengan strategi generasional (generational GC), dioptimalkan untuk perangkat seluler. Tidak seperti JSC, di mana pengumpulan sampah dapat menyebabkan jeda yang terlihat di UI (jank), Hermes melakukan GC dalam porsi kecil di antara frame, meminimalkan dampak pada pengalaman pengguna. Menurut Meta, jeda GC di Hermes 2–3 kali lebih pendek daripada di JSC dalam skenario React Native tipikal.

Lazy loading dan konstanta

Hermes mendukung lazy loading modul — modul JavaScript hanya dikompilasi ketika benar-benar diperlukan. Ini mengurangi ukuran bytecode dan mempercepat startup. Selain itu, Hermes menghitung ekspresi konstan pada tahap kompilasi, menggantikan panggilan fungsi dengan nilai konstan di mana memungkinkan.

// Contoh optimasi spesifik Hermes

// 1. Hermes meng-inline ekspresi konstan
const TAX_RATE = 0.07;
const price = 100;
// Hermes menghitung sebelumnya: TAX_RATE * price selama kompilasi
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes mengoptimalkan rantai akses properti
const config = { api: { timeout: 5000 } };
// Hermes meng-cache akses config.api secara internal
const timeout = config.api.timeout;
fetch(url, { timeout });

Penting untuk dicatat bahwa Hermes mendukung debugging melalui Chrome DevTools (mulai dari versi Hermes 0.12). Pengembang dapat menggunakan alat yang familiar: breakpoint, profiling memori, inspeksi variabel. Ini menghilangkan salah satu keberatan utama terhadap Hermes di versi awal, ketika debugging terbatas.

Konfigurasi Hermes dalam proyek React Native

Konfigurasi Hermes tergantung pada versi React Native. Mulai React Native 0.70, Hermes diaktifkan secara default untuk proyek baru. Untuk proyek yang dibuat sebelumnya atau saat perlu beralih antar mesin, konfigurasi dilakukan melalui pengaturan build.

Konfigurasi untuk Android

Untuk Android, Hermes diaktifkan dalam file android/app/build.gradle melalui flag hermesEnabled. Untuk iOS, konfigurasi dilakukan di Podfile melalui variabel :hermes_enabled. Setelah mengubah konfigurasi, perlu menginstal ulang pod dan membangun ulang proyek.

// android/app/build.gradle — aktifkan Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — aktifkan Hermes
hermes_enabled = true
pod 'hermes-engine'

Untuk memeriksa apakah Hermes digunakan dalam aplikasi, jalankan adb logcat | grep Hermes di Android atau periksa konsol Xcode di iOS. Saat aplikasi dimulai, Hermes menampilkan pesan “Hermes VM initialized” atau serupa. Anda juga dapat menjalankan globalThis.HermesInternal dalam kode JavaScript — jika Hermes aktif, properti ini akan tersedia.

// Periksa apakah Hermes berjalan
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Mesin Hermes aktif');
  console.log(
    'Versi:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes tidak aktif (fallback ke JSC)');
}