Belajar Hermes JS Engine - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Hermes JS Engine! Selama 23 episode ke depan kita akan membongkar Hermes — JavaScript engine dari Meta yang dirancang untuk mobile — mulai dari sejarah, arsitektur internal, sampai optimisasi production.

Episode 0 ini murni fondasi. Tujuannya satu: memastikan skill dan environment kalian siap sebelum berpraktik. Kita tidak akan membahas teori engine di sini; kita memastikan semuanya terpasang dan berfungsi. Materi teknis yang sesungguhnya dimulai di episode 1.

#Skill JavaScript ES6+ dan Runtime Behavior

Hermes mengeksekusi JavaScript standar, jadi kalian harus nyaman dengan sintaks modern. Kuasai minimal hal ini:

• Arrow function, template literal, destructuring, dan spread.
• Promise, async/await, dan event loop.
• Class, prototype, dan cara this di-bind.
• Modul: import dan export.

Pemahaman runtime behavior juga penting — seperti bagaimana object property lookup bekerja dan mengapa alokasi berulang itu mahal. Nanti di episode 5 dan 15, konsep ini akan menjadi kunci optimisasi.

#Dasar React Native atau Node.js

Hermes paling sering dipakai sebagai engine React Native, jadi kenali salah satu dari dua jalur ini:

• React Native: paham cara kerja komponen, JSX, dan bagaimana JavaScript berkomunikasi dengan native lewat bridge.
• Node.js: paham modul, npm scripts, dan struktur project Node.

Kalian tidak perlu mahir keduanya — cukup salah satu. Contoh praktik di series ini sebagian besar berjalan di React Native, sebagian kecil di Node.js.

#Dasar Build Tooling

Sebelum Hermes, pastikan kalian pernah menjalankan build tool. Yang paling relevan:

• npm atau Yarn sebagai package manager.
• Metro bundler — bundler bawaan React Native yang mengubah source menjadi satu bundle JavaScript.
• Konsep dasar: dependencies, node_modules, dan script di package.json.

Metro akan sering muncul mulai episode 4, karena di sanalah Hermes terintegrasi untuk menghasilkan bytecode.

#OS Development dan Command Line

Gunakan sistem operasi apa pun — macOS, Linux, atau Windows — yang penting kalian nyaman di terminal. Untuk Android, ketiga OS didukung; untuk iOS, hanya macOS yang bisa membangun. Kuasai command dasar: pindah folder, mengelola variabel environment, dan menjalankan process yang berjalan lama. Hermes sering diuji dari emulator atau perangkat fisik, jadi terminal bukan opsi — itu keharusan.

#Menyiapkan Node.js dan Package Manager

Install Node.js versi 18 ke atas karena Hermes dan React Native modern membutuhkannya. Verifikasi dengan:

node --version
npm --version

Keluaran v18.x.x (atau lebih baru) dan 9.x.x berarti siap. Untuk mengelola beberapa versi Node, gunakan nvm dan pasang versi LTS dengan nvm install --lts. Jika lebih suka Yarn, aktifkan dengan corepack enable lalu yarn --version.

#Menyiapkan React Native Environment

Buat project React Native baru yang nanti menjadi tempat latihan seluruh series:

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

Jalankan npx react-native doctor untuk memeriksa toolchain — JDK, Android SDK, dan Xcode (macOS) — secara otomatis. Jika ada yang merah, ikuti petunjuk perbaikannya. Environment Android/iOS yang sehat ini yang akan memverifikasi Hermes di episode 3.

#Menyiapkan Hermes Binary dan Source

Hermes sudah terbundel di dalam React Native, jadi tidak wajib membangun dari source. Tapi untuk belajar arsitektur (episode 2 dan 16), ada baiknya punya akses ke source dan compiler-nya. Clone repo resmi:

git clone https://github.com/facebook/hermes.git
cd hermes

Repo ini berisi hermesc (compiler) dan runtime hermes yang bisa dibangun dengan CMake. Untuk sekarang cukup clone dulu — build dari source akan kita lakukan di episode 3.

#Editor: VS Code untuk JavaScript dan Debugging

VS Code menjadi editor utama series ini. Pasang ekstensi berikut:

• ESLint — memastikan gaya JavaScript tetap konsisten.
• JavaScript and TypeScript Nightly — IntelliSense dan syntax highlighting.
• React Native Tools — menjalankan dan debugging app dari editor.
• Metro Logging (opsional) — melihat log bundler langsung di panel output.

Jangan lupa folder node_modules di-ignore di settings.json agar pencarian file tetap cepat. Debugging UI React Native melalui VS Code baru terasa nilainya di episode 7.

#Verifikasi Setup

Sebelum lanjut, pastikan lima hal berikut berfungsi:

• node --version dan npm --version mengeluarkan versi modern.
• npx react-native doctor melaporkan toolchain Android/iOS yang sehat.
• Project BelajarHermes berhasil diinisialisasi.
• Repo Hermes ter-clone di mesin kalian.
• VS Code terpasang dengan plugin JavaScript dan React Native.

Jika semua hijau, environment kalian resmi siap.

#Penutup

Episode 0 selesai. Inilah yang wajib kalian bawa pulang:

• Kuasai JavaScript modern (ES6+) dan perilaku runtime-nya.
• Pahami dasar React Native atau Node.js, plus build tooling npm/Yarn dan Metro.
• Siapkan Node.js 18+ dengan nvm dan project React Native baru.
• Clone repo Hermes untuk belajar arsitektur di episode berikutnya.
• Pasang VS Code dengan plugin JavaScript, ESLint, dan React Native Tools.

Selanjutnya, di episode 1 kita menjawab pertanyaan terpenting sebelum menulis kode: kenapa Hermes lahir, dari mana asalnya, dan keunggulan apa yang ditawarkannya dibanding V8 atau JavaScriptCore. Sampai jumpa!