Belajar Hermes JS Engine - Instalasi & Setup Hermes

#Pendahuluan

Di episode 2 kita memahami arsitektur Hermes secara teori. Sekarang saatnya mengotori tangan: menginstal dan menyiapkan Hermes di project React Native.

Episode 3 berisi tiga hal: menambahkan Hermes ke project, menyiapkan build environment untuk Android dan iOS, lalu memverifikasi bahwa runtime yang berjalan benar-benar Hermes. Sepanjang jalan, kita juga membangun hermesc dari source sebagai persiapan episode 4.

#Hermes di React Native Modern

Kabar baik: sejak React Native 0.70, Hermes adalah engine default di Android dan iOS. Jika project kalian dibuat dengan versi itu, Hermes sudah aktif tanpa konfigurasi tambahan. Tapi penting tahu cara mematikan dan menyalakannya kembali — karena di project lama atau saat rollback, kalian akan butuh ini.

#Menambahkan Hermes ke Project Baru

Buat project baru dengan template resmi, lalu pastikan Hermes aktif:

npx react-native init BelajarHermes --version latest
cd BelajarHermes
npx react-native config

Pada React Native modern, output dari npx react-native config tidak langsung menampilkan engine. Cara pasti mengeceknya adalah di file konfigurasi native, seperti yang kita bahas di bawah. Untuk project lama yang belum memakai Hermes, kalian hanya perlu mengaktifkan dua flag berikut.

#Konfigurasi Android

Untuk Android, Hermes dikontrol dari file android/gradle.properties. Tambahkan baris ini:

hermesEnabled=true

Nilai false akan mengembalikan JavaScriptCore. Setelah mengubah file ini, sinkronkan Gradle:

cd android
./gradlew clean

#Konfigurasi iOS

Untuk iOS, Hermes dikontrol dari ios/Podfile. Aktifkan dengan baris :hermes_enabled pada target aplikasi:

# IOS
platform :ios, min_ios_version_supported
prepare_react_native_project!
 
use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => true
)

Setelah mengubah Podfile, install ulang pods:

cd ios
bundle exec pod install

bundle exec pod install membaca Podfile dan menyertakan runtime Hermes ke dalam project Xcode. Tanpa baris :hermes_enabled => true, iOS akan jatuh kembali ke JavaScriptCore.

#Membangun hermesc dari Source

Meski runtime Hermes ikut ter-bundel di React Native, membangun hermesc sendiri berguna untuk eksperimen bytecode di episode 4 dan 5. Repo yang di-clone di episode 0 dibangun dengan CMake:

cd hermes
cmake -S . -B build -DCMAKE_BUILD_TYPE=Release

cmake --build build --target hermesc -j 4

Jika berhasil, binary hermesc berada di build/bin/hermesc. Verifikasi:

build/bin/hermesc -version

Keluaran menampilkan versi Hermes dan SHA commit yang dipakai. Cara cepat lain yang tidak perlu build lama: install compiler yang sudah jadi dari npm, misalnya hermes-compiler, dengan npm install -g hermes-compiler.

#Menyiapkan Build Environment Android

Sebelum menjalankan app, pastikan toolchain Android lengkap:

• JDK 17 untuk AGP versi modern — cek dengan java -version.
• Android SDK dengan platform terbaru dan build-tools.
• Emulator atau perangkat fisik dengan ADB aktif.

Jalankan pemeriksaan otomatis:

npx react-native doctor

Perintah ini memvalidasi JDK, Android SDK, emulator, dan koneksi perangkat. Apabila semua hijau, jalankan app:

npx react-native run-android

#Menyiapkan Build Environment iOS

Untuk iOS, syarat utama: macOS dengan Xcode dan CocoaPods. Pastikan lisensi Xcode disetujui:

sudo xcodebuild -license accept

Kemudian build dari project Xcode atau langsung dari CLI React Native:

npx react-native run-ios

Simulator iOS memakai Hermes sejak React Native 0.70, sehingga hasil verifikasi di langkah berikut berlaku juga di sini.

#Verifikasi Hermes di Perangkat atau Emulator

Ada tiga cara memastikan Hermes benar-benar yang berjalan.

Cara 1 — melalui global HermesInternal. Hermes mengekspos object global HermesInternal. Cek lewat developer console atau di dalam kode:

Cek keberadaan HermesInternal

const isHermes = typeof globalThis.HermesInternal === "object";
console.log("Running on Hermes:", isHermes);

Cara 2 — lewat menu developer. Di emulator, tekan kombinasi Ctrl+M (Android) atau Cmd+D (iOS) untuk membuka Dev Menu, lalu buka Settings. Jika engine yang ditampilkan adalah Hermes, konfigurasi berhasil.

Cara 3 — lewat ADB. Untuk Android, tekan Ctrl+M, pilih View Logs, dan cari baris yang menyebut Hermes di adb logcat. Kita bisa menyaringnya langsung:

adb logcat -s ReactNative:V | grep -i hermes

#Penutup

Hermes sudah terpasang dan terverifikasi. Inilah yang wajib kalian bawa pulang:

• Hermes adalah default di React Native 0.70+, tetapi aktivasi eksplisit tetap penting dipahami.
• Android dikontrol lewat hermesEnabled=true di android/gradle.properties.
• iOS dikontrol lewat :hermes_enabled => true di ios/Podfile, lalu pod install.
• hermesc bisa dibangun dari source dengan CMake atau dipasang cepat dari npm.
• Verifikasi engine lewat HermesInternal, Dev Menu settings, atau adb logcat.

Selanjutnya, di episode 4 kita membedah pipeline build: integrasi Hermes dengan Metro bundler, peran HermesBytecodePlugin, dan cara membaca artifact output beserta source maps. Sampai jumpa!