Tujuan Pembelajaran

Memahami Hermes engine dan perbedaannya dengan JSC/V8
Mampu mengoptimalkan JavaScript untuk mobile
Mengerti garbage collection dan memory di mobile

Analogi

Diagram


      JSC (iOS default) = Mobil keluarga (nyaman, boros)
V8 (Android default) = Truk (kuat, tapi besar)
Hermes = Motor balap (ringan, cepat, efisien)

Hermes didesain KUSUS untuk mobile — startup time lebih cepat, memory footprint lebih kecil, APK/IPA lebih ringan.

Hermes seperti motor balap — didesain khusus untuk mobile. Lebih kecil, lebih cepat, lebih efisien dari JavaScript engine general-purpose.

Penjelasan Konsep

Hermes adalah JavaScript engine open-source dari Meta yang dioptimalkan untuk React Native. Sejak React Native 0.64, Hermes menjadi default engine di iOS dan Android.

Kenapa Hermes: (1) AOT compilation — bytecode pre-compiled saat build, bukan JIT compile saat runtime. Hasil: startup lebih cepat. (2) Memory optimization — garbage collection incremental, memory footprint 30-50% lebih kecil. (3) APK size reduction — Hermes bytecode lebih kecil dari JavaScript bundle text. (4) Tuneable — bisa dikonfigurasi untuk memory vs speed trade-off.

Enable Hermes: di Expo, Hermes sudah default. Cek di app.json: "jsEngine": "hermes".

JS performance tips: (1) Jangan alokasi object di hot loop — reuse object. (2) Gunakan useMemo dan useCallback untuk cegah re-allocation. (3) Hindari deep object spread di render. (4) Lazy initialization — jangan compute heavy operation di module scope. (5) Profile dengan Hermes profiler — bukan Chrome DevTools (karena beda engine).

Garbage collection: (1) Hermes GC incremental — tidak freeze app. (2) Event loop integration — GC berjalan di idle time. (3) Hindari create banyak temporary object (arrow function di map, spread di reduce). (4) Gunakan WeakRef untuk cache yang bisa di-GC.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami Hermes engine dan perbedaannya dengan JSC/V8., mampu mengoptimalkan JavaScript untuk mobile., dan mengerti garbage collection dan memory di mobile. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Hermes Engine & JS Performance, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Hermes seperti motor balap — didesain khusus untuk mobile. Lebih kecil, lebih cepat, lebih efisien dari JavaScript engine general-purpose. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Hermes AOT compile saat build → bytecode langsung siap jalan. Jangan alokasi object di hot path. Pre-compute atau memo data yang jarang berubah.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

const largeList = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }));

// BURUK: alokasi object baru setiap render
function Bad() { return largeList.map(item => ({ ...item, extra: 'data' })); }

// BAIK: pre-compute atau memo
const enhanced = largeList.map(item => ({ ...item, extra: 'data' }));
function Good() { return enhanced; }

Penjelasan Kode

Hermes AOT compile saat build → bytecode langsung siap jalan. Jangan alokasi object di hot path. Pre-compute atau memo data yang jarang berubah.

Prompt AI

Jelaskan perbedaan performa Hermes vs JSC vs V8 untuk use case React Native: (a) aplikasi e-commerce dengan banyak gambar, (b) aplikasi chat real-time, (c) game 2D sederhana. Mana yang paling cocok untuk masing-masing?

Pertanyaan Reflektif

Cek APK/IPA size aplikasi React Native-mu. Berapa kontribusi Hermes bytecode vs aset (gambar, font)? Apakah size sudah optimal?