Hermes — apa itu, mesin JS untuk React Native dan prinsip kerja

Apa itu Hermes

Hermes — adalah mesin JavaScript yang ringkas dengan sumber terbuka (lisensi MIT), dibuat oleh Meta untuk React Native dan dioptimalkan untuk bekerja pada perangkat seluler dengan sumber daya terbatas. Inovasi utama Hermes adalah meninggalkan kompilasi JIT demi AOT (Ahead-of-Time). Pada tahap build aplikasi React Native, Metro Bundler mengirimkan JavaScript yang telah dikompilasi ke Hermes CLI, yang mengubahnya menjadi bytecode HBC (Hermes ByteCode). Bytecode ini dijalankan langsung oleh mesin tanpa kompilasi tambahan di perangkat. Pendekatan ini memberikan kinerja yang dapat diprediksi: tidak ada “pemanasan” JIT, tidak ada jeda kompilasi, tidak ada konsumsi baterai tambahan. Hermes dirancang dengan mempertimbangkan keterbatasan perangkat seluler: RAM kecil (1-4 GB), konsumsi daya terbatas, dan kebutuhan akan start dingin yang cepat. Rilis publik pertama Hermes terjadi pada tahun 2019, dan sejak React Native 0.70 (2022) mesin ini menjadi standar di Android.

Hermes vs JavaScriptCore: perbandingan mesin

JavaScriptCore (JSC) — mesin WebKit standar, digunakan oleh Safari dan React Native sebelum versi 0.70. JSC mendukung kompilasi JIT, yang memberikan kinerja tinggi untuk operasi JavaScript yang kompleks. Namun JIT memerlukan pemanasan: detik-detik pertama kode berjalan lebih lambat (mode interpreted), kemudian JIT mengkompilasi bagian yang panas. Di iOS, JIT praktis tidak tersedia karena kebijakan App Store (larangan pembuatan kode dinamis), sehingga JSC di iOS hanya berfungsi dalam mode interpreted — kinerja menurun. JSC memiliki ukuran biner yang lebih besar (sekitar 10 MB) dan mengonsumsi lebih banyak RAM karena infrastruktur JIT. Hermes tidak bergantung pada JIT, yang memberikan kinerja dapat diprediksi segera setelah startup (start dingin). JSC mendukung standar ECMAScript lebih lengkap (termasuk Proxy, BigInt, Reflect), tetapi dengan mengorbankan konsumsi sumber daya yang lebih besar. Untuk proyek React Native di mana start dingin dan ukuran kecil sangat penting — Hermes lebih diutamakan. Untuk proyek dengan komputasi JS berat (game, WebGL) — JSC dapat memberikan kinerja puncak yang lebih tinggi.

Kompilasi AOT: cara kerja pembangunan awal

Kompilasi AOT (Ahead-of-Time) di Hermes terjadi dalam dua tahap. Pada tahap pertama, Metro Bundler mengumpulkan file JavaScript menjadi satu bundel dan mengirimkannya ke Hermes CLI (alat hermesc). Pada tahap kedua, hermesc mengurai AST JavaScript, menghasilkan representasi perantara HIR (Hermes Intermediate Representation) dan kemudian mengeluarkan bytecode biner HBC. Hasilnya adalah file dengan ekstensi .hbc yang hanya berisi bytecode tanpa JavaScript asli. Hermes runtime memuat HBC secara langsung, tanpa penguraian dan kompilasi. Ini secara radikal mempercepat startup: alih-alih mengurai ribuan baris JS (async), mesin membaca format biner yang telah dikompilasi sebelumnya. AOT juga mengurangi ukuran: bytecode rata-rata 30% lebih ringkas daripada JavaScript AST. Kekurangan AOT — ketidakmampuan untuk menjalankan eval, new Function atau require dinamis saat runtime — semua modul harus diketahui pada tahap build.

# Instal Hermes CLI secara mandiri
npm install hermes-engine

# Kompilasi JS ke bytecode HBC
npx hermesc -emit-binary -out bundle.hbc bundle.js

# Statistik bytecode
npx hermesc -dump-bytecode bundle.hbc  # shows HBC instructions

# Ukuran JS asli vs HBC
wc -c bundle.js      # 2,300,000 bytes
wc -c bundle.hbc     # 1,450,000 bytes (37% reduction)

Metrik kinerja Hermes

Kinerja Hermes diukur dengan tiga metrik utama: Time-To-Interactive (TTI), ukuran APK/IPA, dan konsumsi RAM. Menurut Meta, di Android Hermes mengurangi TTI sebesar 34% dibandingkan dengan JSC: dari 4,2 detik menjadi 2,8 detik pada perangkat kelas menengah (Moto G7). Ukuran APK berkurang 28% berkat bytecode yang ringkas dan tidak adanya pustaka JIT. Konsumsi RAM rata-rata 22% lebih rendah pada beban yang sama — ini sangat penting untuk perangkat dengan RAM 2-3 GB. Di iOS, keuntungannya bahkan lebih besar: karena JSC tidak dapat menggunakan JIT, Hermes memberikan peningkatan TTI hingga 45%. Metrik didasarkan pada pengujian Meta dengan aplikasi Facebook Lite. Dalam proyek nyata, keuntungan bervariasi: untuk layar sederhana (daftar, teks) Hermes memberikan peningkatan lebih besar, untuk animasi berat — lebih kecil. Alat profiling: React Native Profiler + hermes profile --heap.

Profiling memori dengan Hermes

Hermes menyertakan profiler memori bawaan yang dapat diakses melalui Chrome DevTools. Hubungkan ke aplikasi melalui Metro, buka tab Memory dan pilih Hermes (JavaScript) di jenis snapshot. Hermes mendukung tiga jenis snapshot: Heap Snapshot (semua objek), Allocation Timeline (masa hidup objek) dan Allocation Sampling (profil selektif). Hades GC mengurangi jumlah jeda GC hingga minimum — rata-rata satu jeda 2-5ms per 10 detik kerja dibandingkan dengan jeda 10-20ms di JSC dalam periode yang sama.

Pengumpul sampah Hades GC

Hades GC — adalah pengumpul sampah di Hermes, dirancang untuk skenario seluler dengan jeda minimal. Tidak seperti mark-sweep GC di JSC, Hades menggunakan pengumpulan konkuren (concurrent): pengumpul bekerja secara paralel dengan thread utama eksekusi, hanya menghentikannya untuk periode singkat. Hades GC membagi heap menjadi beberapa generasi: generasi muda (nursery) dikumpulkan sering dan cepat (Scavenge), generasi tua dikumpulkan lebih jarang dan dengan jeda yang lebih kecil. Ukuran heap dapat dikonfigurasi: secara default — 2/3 dari RAM yang tersedia dari aplikasi, ambang batas minimum — 32 MB. Hades tidak menggunakan pendekatan stop-the-world: bahkan pengumpulan penuh generasi tua tidak lebih dari 5-8ms. Pengumpul dioptimalkan untuk skenario seluler yang khas: banyak objek berumur pendek (string sementara, objek React fibre), sedikit objek berumur panjang. Untuk aplikasi dengan pembuatan objek intensif (daftar, animasi) Hades memberikan FPS yang lebih halus dibandingkan dengan JSC.

Cara mengaktifkan Hermes di proyek React Native

Mengaktifkan Hermes tergantung pada versi React Native dan platform. Mulai React Native 0.70, Hermes diaktifkan secara default untuk Android di proyek baru. Untuk iOS, Hermes bersifat opsional. Untuk mengaktifkan di Android: di file android/app/build.gradle atur enableHermes: true di blok project.ext.react.enableHermes. Untuk iOS: atur hermes_enabled ke true di Podfile melalui use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true). Setelah mengaktifkan, jalankan pod install. Untuk proyek yang ada, periksa kompatibilitas pustaka: Hermes tidak mendukung Proxy, eval, dan beberapa fitur ES2021. Gunakan npx react-native info untuk memeriksa konfigurasi. Untuk beralih antara Hermes dan JSC, ubah flag dan lakukan clean rebuild.

// android/app/build.gradle — aktifkan Hermes
project.ext.react = [
    enableHermes: true,
    cliPath: "node_modules/react-native/cli.js"
]

// iOS/Podfile — aktifkan Hermes di iOS
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'MyApp' do
  config = use_native_modules!
  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true
  )
end

Keterbatasan Hermes: apa yang tidak didukung

Keterbatasan utama Hermes terkait dengan pengabaian JIT. Hermes tidak mendukung: Proxy dan Reflect API (digunakan di MobX, Vue, beberapa state manager), BigInt (angka besar), Symbol.toStringTag, WeakRef dan FinalizationRegistry. Fungsi eval dan new Function menghasilkan pengecualian selama eksekusi. Callback dari metode Array.prototype.flat dan flatMap dengan argumen this bekerja dengan keterbatasan. Format tanggal ISO 8601 dengan zona waktu tidak diproses sepenuhnya. Sebagian besar keterbatasan ini tidak mempengaruhi aplikasi React Native yang khas: React dan React Native menggunakan serangkaian fitur ES yang terbatas. Jika pustaka memerlukan Proxy (misalnya MobX 6+ dengan Proxy), gunakan configure({ useProxies: false }) atau pilih alternatif. Untuk memeriksa kompatibilitas kode yang ada, jalankan npx hermesc -check pada bundel Anda — akan menampilkan daftar fitur yang tidak didukung.

• Proxy / Reflect — tidak diimplementasikan; pustaka dengan Proxy memerlukan mode fallback
• BigInt — tidak tersedia; gunakan pustaka bignumber.js untuk angka besar
• eval / new Function — pemanggilan throw; semua modul harus statis
• WeakRef / FinalizationRegistry — tidak didukung; tidak ada alternatif
• Symbol.toStringTag — diabaikan; instanceof berfungsi dengan benar