Belajar Hermes JS Engine - Sejarah, Latar Belakang & Mengapa Menggunakan Hermes

#Pendahuluan

Di episode 0 kita sudah menyiapkan environment — Node.js, React Native, dan repo Hermes. Sekarang waktunya menjawab pertanyaan paling mendasar: kenapa Hermes itu ada?

Episode 1 membahas latar belakang kelahiran Hermes dari Meta, membandingkannya dengan engine lain, dan membedah keunggulan utamanya. Di akhir episode kalian akan tahu kapan Hermes adalah pilihan tepat — dan kapan sebaiknya dihindari.

#Masalah yang Menjadi Pemicu

Sebelum Hermes, React Native di Android menggunakan JavaScriptCore sebagai engine. Awalnya ini masuk akal: satu engine untuk iOS dan Android. Namun saat React Native mulai dipakai untuk aplikasi skala besar di perangkat murah, Meta menemukan masalah nyata:

• Startup lambat: mengurai ribuan baris JavaScript di perangkat low-end memakan ratusan milidetik — terasa seperti lag.
• Memori boros: JIT (Just-In-Time) compiler menciptakan overhead memori yang besar untuk app dengan budget RAM kecil.
• Aplikasi berat: feed Facebook yang kompleks membuat render pertama terasa lambat.

JIT memang cepat setelah fungsi dipanaskan, tapi proses pemanasan itulah masalahnya. Di perangkat mobile dengan 1-2 GB RAM, biaya parse, compile, dan JIT warmup saat cold start sangat mahal.

#Lahirnya Hermes dari Meta

Hermes dikembangkan internal oleh tim React Native di Meta mulai 2016, dengan satu filosofi: engine yang dioptimalkan untuk mobile-first JavaScript, bukan port dari desktop. Tim memprioritaskan dua hal di atas segalanya: waktu startup yang singkat dan jejak memori yang kecil.

Hermes diumumkan ke publik di React Native EU pada Juli 2019 dan langsung di-open-source. Adopsinya bergerak cepat:

• React Native 0.64 (2021): Hermes menjadi engine default di Android.
• React Native 0.70 (2022): Hermes menjadi default di Android dan iOS.
• Selanjutnya: Hermes meluas ke Node.js dan edge runtimes, yang kita bahas di episode 9.

Keputusan besar dalam desain Hermes adalah menghilangkan JIT di runtime. Semua kompilasi terjadi sebelum aplikasi berjalan. Hasilnya? Engine tetap interpreter murni di perangkat — cepat start, irit RAM, dan dapat diprediksi.

#Perbandingan dengan Engine Lain

Untuk memahami posisi Hermes, bandingkan dengan tiga engine besar:

engine:        V8
pembuat:       Google
strategi:      JIT penuh (TurboFan, Maglev)
fokus:         Desktop, server, Chrome
pakai_di:      Node.js, Chrome, edge
 
engine:        JavaScriptCore
pembuat:       Apple
strategi:      Interpreter + JIT (FTL, B3)
fokus:         Mobile, browser
pakai_di:      Safari, WebKit
 
engine:        SpiderMonkey
pembuat:       Mozilla
strategi:      Interpreter + JIT (Ion, Warp)
fokus:         Browser, Firefox
pakai_di:      Firefox, embedded
 
engine:        Hermes
pembuat:       Meta
strategi:      AOT bytecode + interpreter murni
fokus:         Mobile, embedded, edge
pakai_di:      React Native, edge runtimes

Perbedaan paling mencolok ada di strategi. V8 mengejar peak throughput dengan JIT yang canggih; Hermes menolak JIT dan mengejar deterministic startup. Untuk aplikasi mobile yang hanya hidup beberapa menit, peak throughput kalah penting dari 300 ms pertama yang terasa oleh user.

Contoh: memulai interpreter murni tanpa JIT warmup

// Di Hermes, fungsi ini langsung jalan setelah bytecode dimuat.
// Tidak ada fase "pemanasan JIT" seperti di V8.
function renderHome() {
  const items = fetchInitialFeed();
  return items.map((item) => <FeedItem data={item} />);
}

Pada V8, pemanggilan pertama renderHome masih diinterpretasi sebelum dikompilasi JIT. Pada Hermes, semua ini sudah berupa bytecode terkompilasi sejak awal — deterministik dan cepat.

#Keunggulan Utama: Startup Time

Keunggulan pertama Hermes adalah waktu startup yang dapat diprediksi. Karena source sudah dikompilasi menjadi bytecode di build time, runtime tidak perlu mengurai dan mengompilasi JavaScript saat app diluncurkan. Pengukuran internal Meta mencatat penurunan waktu startup aplikasi React Native secara signifikan di perangkat Android low-end. Di episode 5 kita akan mengoptimisasi startup ini lebih jauh dengan prepackaging bytecode.

#Keunggulan Utama: Memory Footprint

Keunggulan kedua adalah jejak memori yang kecil. Tanpa JIT, tidak ada memori yang dialokasikan untuk compiled machine code di runtime. Hermes juga menggunakan teknik kompresi string dan object model yang ringan. Hash untuk property di-hitung sekali saat kompilasi, sehingga layout object menjadi kompak. Untuk perangkat dengan RAM terbatas, perbedaan ini bisa menentukan app tetap hidup atau di-kill sistem operasi.

#Keunggulan Utama: Bytecode Precompilation

Keunggulan ketiga adalah bytecode precompilation. Source JavaScript diubah menjadi file bytecode Hermes (format HBC) saat proses build, dan file ini dikirim bersama aplikasi. Manfaatnya ganda:

• Eksekusi lebih cepat karena parsing hanya terjadi sekali di build time.
• Bundle bisa ditandatangani dan diverifikasi integritasnya, mengurangi serangan tampering. Ini kita bahas di episode 13.

Coba lihat hasil kompilasi langsung dengan compiler yang sudah ter-clone di episode 0:

cd hermes
echo "print('hello hermes');" > hello.js
build/bin/hermesc -emit-binary hello.js -out hello.hbc
build/bin/hermes hello.hbc

Perintah build/bin/hermesc -emit-binary mengubah source menjadi bytecode, lalu build/bin/hermes hello.hbc menjalankannya. Instruksi lengkap membangun binary hermesc akan kita bahas di episode 3.

#Kapan Hermes Bukan Pilihan Tepat

Jujur saja: Hermes tidak unggul di semua skenario. Hindari Hermes ketika:

• Aplikasi sangat compute-heavy dengan loop matematika panjang, karena interpreter murni kalah dari engine JIT dalam throughput.
• Kalian butuh kompatibilitas ECMAScript terbaru, karena Hermes mengadopsi fitur lebih lambat dari V8.
• Kalian membutuhkan Node.js dengan ekosistem native library yang kompleks — Hermes di server masih niche.

Untuk mayoritas aplikasi React Native, trade-off ini sangat menguntungkan. Untuk workload server umum, V8 tetap juara.

#Penutup

Sekarang kalian tahu dari mana Hermes berasal dan keunggulan kompetitifnya. Inilah yang wajib kalian bawa pulang:

• Hermes lahir dari kebutuhan Meta akan startup cepat dan memori kecil di perangkat mobile low-end.
• Tanpa JIT di runtime, semua kompilasi terjadi di build time — startup menjadi deterministik.
• Hermes menang di startup time dan memory footprint, tetapi kalah di peak throughput dari V8.
• Bytecode precompilation (format HBC) adalah pembeda arsitektural utama Hermes.
• Hermes menjadi default React Native di Android sejak 0.64 dan iOS sejak 0.70.

Selanjutnya, di episode 2 kita membedah arsitektur internal Hermes: parser, bytecode compiler, garbage collector, dan interpreter — bagaimana keempatnya bekerja sama mengeksekusi JavaScript. Sampai jumpa!