Hermes: mi ez, képességek és optimalizálás a React Native számára

Mi az a Hermes?

Hermes — egy kompakt JavaScript-motor, amelyet a Meta csapata készített kifejezetten a React Native számára. 2019-ben jelentették be alternatívaként a JavaScriptCore (JSC) számára, amelyet alapértelmezés szerint használtak a React Native-ben. A Hermes fő célja, hogy a lehető leggyorsabb indítást biztosítsa az alkalmazásoknak mobileszközökön, különösen a korlátozott erőforrású Androidon.

A Hermes legfontosabb jellemzője az előzetes fordítás (AOT — Ahead-of-Time). Azokkal a hagyományos JS-motorokkal ellentétben, amelyek futásidőben fordítják a kódot (JIT — Just-in-Time), a Hermes már az alkalmazás build fázisában bájtkódra fordítja a JavaScriptet. Ez azt jelenti, hogy az eszközön nem történik fordítás — a bájtkódot azonnal végrehajtja a Hermes virtuális gép.

A Hermes nem univerzális JS-motor — kizárólag a React Native forgatókönyvekre van optimalizálva. Hiányoznak belőle a mobilfejlesztésben nem igényelt képességek: eval, generátorok, néhány ES6-funkció. Ez lehetővé teszi, hogy a motor kompaktabb és gyorsabb legyen. A Meta adatai szerint a Hermes mérete körülbelül 200–300 KB tömörített formában, ami jelentősen kisebb, mint a JSC (körülbelül 2–3 MB).

A Hermes architektúrája és bájtkód

A Hermes architektúrája eltér a hagyományos JS-motoroktól a JIT-fordító hiányában. Ehelyett a Hermes egy hatékony virtuális gépet (VM) használ, amely az előre lefordított bájtkódot hajtja végre. A JIT elhagyása három fő előnyt nyújt: kiszámítható teljesítmény, alacsonyabb memóriafogyasztás és rövidebb indítási idő.

A Hermes bájtkód a JavaScript-kód kompakt reprezentációja, optimalizálva a gyors végrehajtásra. A build fázisban (a Metro-n keresztül) a JavaScript-fájlok .hbc (Hermes Bytecode) fájlokká fordulnak. Az alkalmazás betölti ezeket a fájlokat, és a Hermes VM további fordítás nélkül végrehajtja őket. A build folyamat a hermes-transformer pluginon keresztül integrálódik a Metro-ba.

A kód feldolgozásának szakaszai

A JavaScript feldolgozásának folyamata a Hermes-ben három szakaszból áll: Parse — a forráskód szintaktikai elemzése, Compile — bájtkódra fordítás, Execute — a bájtkód végrehajtása a virtuális gép által. Az első két szakasz a build fázisban, a harmadik az eszközön történik. Ez alapvetően különbözik a JSC-től, ahol mindhárom szakasz az eszközön történik.

# Hermes bájtkód fordítás a build során
hermes -emit-binary -out index.hbc index.js

# Ellenőrizze a generált bájtkód méretét
ls -lh index.hbc

# Bájtkód statisztikák megjelenítése
hermes -dump-bytecode index.hbc

# Bájtkód optimalizálása éles használatra
hermes -O index.js -emit-binary -O target.hbc

A fordítás után az összes .hbc fájl a natív kóddal együtt APK-ba vagy IPA-ba csomagolódik. Az alkalmazás indításakor a Hermes VM betölti a bájtkódot és szinte azonnal megkezdi a végrehajtást — nem igényel JIT-bemelegítési időt, ami a V8 és JSC esetében jellemző.

Hermes vs JSC: összehasonlítás

A Hermes és a JavaScriptCore (JSC) összehasonlítása segít megérteni, hogy mikor melyik motort válasszuk. JSC — egy teljes értékű JS-motor az Apple-től, a Safari-ban használatos. Hermes — egy speciális motor a React Native számára. A választás közöttük a projekt prioritásaitól függ.

A Hermes nyer az indítási sebességben és memóriafogyasztásban, de alulmarad a JSC-vel szemben az összetett számítások végrehajtásának teljesítményében. A JSC JIT-fordítása optimalizálja a kód forró részeit futásidőben, ami előnyt jelent a CPU-intenzív műveletekben. Egy tipikus React Native alkalmazásnál, ahol a UI-frissítések és a navigáció képezik a fő terhelést, a Hermes jobb felhasználói élményt biztosít a gyors indításnak köszönhetően.

A Hermes optimalizálásai a React Native számára

Hermes számos, a React Native számára specifikus optimalizálást tartalmaz. A legfontosabb ezek közül a JSI-vel (JavaScript Interface) való integráció. A Hermes natívan támogatja a JSI-t, ami lehetővé teszi a React Native új architektúrájának (Fabric + Turbo Module) használatát további rétegek nélkül. Ez a Hermest és az új architektúrát ideális párrá teszi a maximális teljesítmény érdekében.

Memóriakezelés

A Hermes generációs stratégiájú (generational GC) szemétgyűjtőt használ, optimalizálva mobileszközökre. Ellentétben a JSC-vel, ahol a szemétgyűjtés észrevehető szüneteket (jank) okozhat a UI-ban, a Hermes kis adagokban, képkockák között végzi a GC-t, minimalizálva a felhasználói élményre gyakorolt hatást. A Meta adatai szerint a Hermes-ben a GC-szünetek 2–3-szor rövidebbek, mint a JSC-ben tipikus React Native forgatókönyvek esetén.

Lusta betöltés és konstansok

A Hermes támogatja a modulok lusta betöltését — a JavaScript-modul csak akkor fordul le, amikor ténylegesen szükség van rá. Ez csökkenti a bájtkód méretét és gyorsítja az indítást. Ezenkívül a Hermes a fordítási fázisban kiszámítja a konstans kifejezéseket, ahol lehetséges, függvényhívásokat konstans értékekkel helyettesítve.

// Hermes-specifikus optimalizálási példa

// 1. A Hermes beilleszti a konstans kifejezéseket
const TAX_RATE = 0.07;
const price = 100;
// A Hermes előre kiszámítja: TAX_RATE * price a fordítás során
const totalWithTax = price * (1 + TAX_RATE);

// 2. A Hermes optimalizálja a tulajdonságelérési láncokat
const config = { api: { timeout: 5000 } };
// A Hermes belsőleg gyorsítótárazza a config.api elérést
const timeout = config.api.timeout;
fetch(url, { timeout });

Fontos megjegyezni, hogy a Hermes támogatja a debugolást a Chrome DevTools-on keresztül (a Hermes 0.12-es verziójától kezdve). A fejlesztő ismerős eszközöket használhat: töréspontok, memória profilozás, változók vizsgálata. Ez megszünteti az egyik fő kifogást a Hermes korai verzióival szemben, amikor a debugolás korlátozott volt.

A Hermes beállítása React Native projektben

A Hermes beállítása a React Native verziójától függ. A React Native 0.70-től kezdve a Hermes alapértelmezés szerint engedélyezve van az új projektekhez. A korábban létrehozott projekteknél vagy a motorok közötti váltás szükségessége esetén a beállítás a build konfiguráción keresztül történik.

Beállítás Androidra

Androidra a Hermes a android/app/build.gradle fájlban a hermesEnabled jelölőn keresztül engedélyezhető. iOS-re a beállítás a Podfile-ban a :hermes_enabled változón keresztül történik. A konfiguráció módosítása után újra kell telepíteni a podokat és újra kell építeni a projektet.

// android/app/build.gradle — Hermes engedélyezése
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — Hermes engedélyezése
hermes_enabled = true
pod 'hermes-engine'

Annak ellenőrzéséhez, hogy a Hermes használatban van-e az alkalmazásban, futtassa a adb logcat | grep Hermes parancsot Androidon, vagy ellenőrizze az Xcode konzolt iOS-en. Az alkalmazás indításakor a Hermes a „Hermes VM initialized” vagy hasonló üzenetet jeleníti meg. Futtathatja a globalThis.HermesInternal parancsot is JavaScript-kódban — ha a Hermes aktív, ez a tulajdonság elérhető lesz.

// Ellenőrizze, hogy fut-e a Hermes
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes motor aktív');
  console.log(
    'Verzió:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes nem aktív (visszaállás JSC-re)');
}