Hermes: ano ito, mga kakayahan at optimisasyon para sa React Native

Ano ang Hermes?

Hermes — ay isang compact na JavaScript engine, na nilikha ng Meta team na espesyal para sa React Native. Ito ay inanunsyo noong 2019 bilang alternatibo sa JavaScriptCore (JSC), na ginamit bilang default sa React Native. Ang pangunahing layunin ng Hermes ay tiyakin ang pinakamabilis na pagsisimula ng mga application sa mga mobile device, lalo na sa Android na may limitadong mga mapagkukunan.

Ang pangunahing tampok ng Hermes ay paunang compilation (AOT — Ahead-of-Time). Hindi tulad ng tradisyonal na JS engine na nag-compile ng code sa runtime (JIT — Just-in-Time), ang Hermes ay nag-compile ng JavaScript sa bytecode na sa yugto ng build ng application. Nangangahulugan ito na walang compilation na nagaganap sa device — ang bytecode ay agad na isinasagawa ng virtual machine ng Hermes.

Ang Hermes ay hindi isang unibersal na JS engine — ito ay na-optimize eksklusibo para sa mga sitwasyon ng React Native. Wala itong mga kakayahan na hindi kailangan sa mobile development: eval, generators, ilang ES6 feature. Ito ay nagpapahintulot na gawing mas compact at mas mabilis ang engine. Ayon sa Meta, ang laki ng Hermes ay humigit-kumulang 200–300 KB sa compressed form, na makabuluhang mas maliit kaysa sa JSC (humigit-kumulang 2–3 MB).

Arkitektura ng Hermes at bytecode

Ang arkitektura ng Hermes ay naiiba sa tradisyonal na JS engine dahil sa kawalan ng JIT compiler. Sa halip, ang Hermes ay gumagamit ng isang mahusay na virtual machine (VM) na nagpapatupad ng na-compile nang maagang bytecode. Ang pagtalikod sa JIT ay nagbibigay ng tatlong pangunahing bentahe: predictable na performance, mas mababang konsumo ng memorya, at pagbawas sa oras ng pagsisimula.

Ang Hermes bytecode ay isang compact na representasyon ng JavaScript code, na-optimize para sa mabilis na pag-execute. Sa yugto ng build (sa pamamagitan ng Metro), ang mga JavaScript file ay nai-compile sa .hbc (Hermes Bytecode) na mga file. Ang application ay naglo-load ng mga file na ito, at ang Hermes VM ay nagpapatupad ng mga ito nang walang karagdagang compilation. Ang proseso ng build ay isinama sa Metro sa pamamagitan ng plugin na hermes-transformer.

Mga yugto ng pagpoproseso ng code

Ang proseso ng pagpoproseso ng JavaScript sa Hermes ay binubuo ng tatlong yugto: Parse — syntactic analysis ng source code, Compile — pagsasalin sa bytecode, Execute — pag-execute ng bytecode ng virtual machine. Ang unang dalawang yugto ay isinasagawa sa yugto ng build, ang pangatlo — sa device. Ito ay pangunahing naiiba sa JSC, kung saan lahat ng tatlong yugto ay isinasagawa sa device.

# Hermes bytecode compilation sa panahon ng build
hermes -emit-binary -out index.hbc index.js

# Suriin ang laki ng nabuong bytecode
ls -lh index.hbc

# Ipakita ang mga statistic ng bytecode
hermes -dump-bytecode index.hbc

# I-optimize ang bytecode para sa produksyon
hermes -O index.js -emit-binary -O target.hbc

Pagkatapos ng compilation, lahat ng .hbc file ay naka-pack sa APK o IPA kasama ng native code. Sa pagsisimula ng application, ang Hermes VM ay naglo-load ng bytecode at nagsisimula ng pag-execute halos agad-agad — hindi nangangailangan ng oras para sa JIT warmup, na tipikal para sa V8 at JSC.

Hermes vs JSC: paghahambing

Ang paghahambing ng Hermes at JavaScriptCore (JSC) ay tumutulong na maunawaan kung kailan pipiliin kung aling engine. JSC — isang ganap na JS engine mula sa Apple, ginagamit sa Safari. Hermes — isang specialized engine para sa React Native. Ang pagpili sa pagitan ng mga ito ay depende sa mga priyoridad ng proyekto.

Ang Hermes ay nananalo sa bilis ng pagsisimula at konsumo ng memorya, ngunit natatalo sa JSC sa pagganap ng pag-execute ng mga kumplikadong kalkulasyon. Ang JIT compilation ng JSC ay nag-o-optimize ng mga mainit na bahagi ng code sa panahon ng pag-execute, na nagbibigay ng kalamangan sa CPU-intensive na operasyon. Para sa isang tipikal na React Native application, kung saan ang mga UI update at navigation ang bumubuo sa pangunahing load, ang Hermes ay nagbibigay ng mas mahusay na karanasan ng user dahil sa mabilis na pagsisimula.

Mga optimisasyon ng Hermes para sa React Native

Hermes ay may kasamang ilang optimisasyon na tiyak sa React Native. Ang pangunahin sa mga ito ay ang integrasyon sa JSI (JavaScript Interface). Ang Hermes ay native na sumusuporta sa JSI, na nagpapahintulot sa paggamit ng bagong arkitektura ng React Native (Fabric + Turbo Module) nang walang karagdagang layers. Ginagawa nitong perpektong pares ang Hermes at ang bagong arkitektura para sa maximum na performance.

Pamamahala ng memorya

Ang Hermes ay gumagamit ng garbage collector na may generational strategy (generational GC), na-optimize para sa mga mobile device. Hindi tulad ng JSC, kung saan ang pagtitipon ng basura ay maaaring maging sanhi ng kapansin-pansing pag-pause sa UI (jank), ang Hermes ay nagsasagawa ng GC sa maliliit na bahagi sa pagitan ng mga frame, pinapaliit ang epekto sa karanasan ng user. Ayon sa Meta, ang mga GC pause sa Hermes ay 2–3 beses na mas maikli kaysa sa JSC sa tipikal na React Native scenarios.

Lazy loading at constants

Sinusuportahan ng Hermes ang lazy loading ng mga module — ang JavaScript module ay nai-compile lamang kapag ito ay talagang kailangan. Ito ay nagbabawas ng laki ng bytecode at nagpapabilis ng pagsisimula. Bilang karagdagan, ang Hermes ay nag-compute ng mga constant expression sa yugto ng compilation, pinapalitan ang mga function call ng constant values kung posible.

// Halimbawa ng Hermes-specific na optimisasyon

// 1. Ini-inline ng Hermes ang constant expressions
const TAX_RATE = 0.07;
const price = 100;
// Pre-compute ng Hermes: TAX_RATE * price sa panahon ng compilation
const totalWithTax = price * (1 + TAX_RATE);

// 2. Ino-optimize ng Hermes ang property access chains
const config = { api: { timeout: 5000 } };
// Ni-cache ng Hermes ang config.api access internally
const timeout = config.api.timeout;
fetch(url, { timeout });

Mahalagang tandaan na sinusuportahan ng Hermes ang debugging sa pamamagitan ng Chrome DevTools (simula sa bersyon ng Hermes 0.12). Ang developer ay maaaring gumamit ng pamilyar na mga tool: breakpoints, memory profiling, variable inspection. Ito ay nag-aalis ng isa sa mga pangunahing pagtutol laban sa Hermes sa mga unang bersyon, kapag ang debugging ay limitado.

Pag-configure ng Hermes sa proyekto ng React Native

Ang pag-configure ng Hermes ay depende sa bersyon ng React Native. Simula sa React Native 0.70, ang Hermes ay naka-enable bilang default para sa mga bagong proyekto. Para sa mga proyektong nilikha nang mas maaga o sa pangangailangan na lumipat sa pagitan ng mga engine, ang pag-configure ay ginagawa sa pamamagitan ng build configuration.

Pag-configure para sa Android

Para sa Android, ang Hermes ay naka-enable sa file na android/app/build.gradle sa pamamagitan ng flag na hermesEnabled. Para sa iOS, ang pag-configure ay ginagawa sa Podfile sa pamamagitan ng variable na :hermes_enabled. Pagkatapos baguhin ang configuration, kailangan muling i-install ang mga pod at muling buuin ang proyekto.

// android/app/build.gradle — i-enable ang Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — i-enable ang Hermes
hermes_enabled = true
pod 'hermes-engine'

Upang suriin kung ang Hermes ay ginagamit sa application, patakbuhin ang adb logcat | grep Hermes sa Android o suriin ang Xcode console sa iOS. Sa pagsisimula ng application, ang Hermes ay nagpapakita ng mensahe na “Hermes VM initialized” o katulad. Maaari mo ring patakbuhin ang globalThis.HermesInternal sa JavaScript code — kung ang Hermes ay aktibo, ang property na ito ay magagamit.

// Suriin kung tumatakbo ang Hermes
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Aktibo ang Hermes engine');
  console.log(
    'Bersyon:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hindi aktibo ang Hermes (fallback sa JSC)');
}