Hermes — co to je, JS engine pro React Native a princip fungování

Co je Hermes

Hermes — je kompaktní JavaScript engine s otevřeným zdrojovým kódem (licence MIT), vytvořený společností Meta pro React Native a optimalizovaný pro práci na mobilních zařízeních s omezenými zdroji. Hlavní inovací Hermes je upuštění od kompilace JIT ve prospěch AOT (Ahead-of-Time). Ve fázi sestavení aplikace React Native předává Metro Bundler zkompilovaný JavaScript do Hermes CLI, který jej převádí na bajtkód HBC (Hermes ByteCode). Tento bajtkód je prováděn přímo enginem bez dodatečné kompilace na zařízení. Tento přístup poskytuje předvídatelný výkon: nedochází k “zahřívání” JIT, nejsou žádné pauzy na kompilaci, nedochází k dodatečné spotřebě baterie. Hermes byl navržen s ohledem na omezení mobilních zařízení: malá RAM (1–4 GB), omezená spotřeba energie a potřeba rychlého studeného startu. První veřejné vydání Hermes bylo v roce 2019 a od React Native 0.70 (2022) se engine stal standardem na Androidu.

Hermes vs JavaScriptCore: srovnání enginů

JavaScriptCore (JSC) — standardní engine WebKit, používaný Safari a React Native před verzí 0.70. JSC podporuje kompilaci JIT, což poskytuje vysoký výkon pro složité JavaScriptové operace. JIT však vyžaduje zahřátí: první sekundy kód běží pomaleji (interpretovaný režim), poté JIT kompiluje horké části. Na iOS je JIT prakticky nedostupný kvůli zásadám App Store (zákaz dynamického generování kódu), proto JSC na iOS funguje pouze v interpretovaném režimu — výkon klesá. JSC má větší binární velikost (asi 10 MB) a spotřebovává více RAM kvůli infrastruktuře JIT. Hermes není závislý na JIT, což poskytuje předvídatelný výkon ihned po spuštění (studený start). JSC podporuje standard ECMAScript úplněji (včetně Proxy, BigInt, Reflect), ale za cenu vyšší spotřeby zdrojů. Pro projekty React Native, kde je kritický studený start a malá velikost — je Hermes preferován. Pro projekty s těžkými výpočty v JS (hry, WebGL) — může JSC poskytnout vyšší špičkový výkon.

Kompilace AOT: jak funguje předběžné sestavení

Kompilace AOT (Ahead-of-Time) v Hermes probíhá ve dvou fázích. V první fázi Metro Bundler shromáždí soubory JavaScript do jediného balíku a předá jej Hermes CLI (nástroj hermesc). Ve druhé fázi hermesc analyzuje JavaScript AST, generuje mezilehlou reprezentaci HIR (Hermes Intermediate Representation) a poté emituje binární bajtkód HBC. Výsledkem je soubor s příponou .hbc, který obsahuje pouze bajtkód bez původního JavaScriptu. Hermes runtime načítá HBC přímo, bez analýzy a kompilace. To radikálně zrychluje spouštění: místo analýzy tisíců řádků JS (async) engine čte předem zkompilovaný binární formát. AOT také zmenšuje velikost: bajtkód je v průměru o 30 % kompaktnější než JavaScript AST. Nevýhodou AOT je nemožnost provádění eval, new Function nebo dynamického require za běhu — všechny moduly musí být známy ve fázi sestavení.

# Nainstalujte Hermes CLI samostatně
npm install hermes-engine

# Zkompilujte JS do HBC bajtkódu
npx hermesc -emit-binary -out bundle.hbc bundle.js

# Statistiky bajtkódu
npx hermesc -dump-bytecode bundle.hbc  # shows HBC instructions

# Velikost původního JS vs HBC
wc -c bundle.js      # 2,300,000 bytes
wc -c bundle.hbc     # 1,450,000 bytes (37% reduction)

Metriky výkonu Hermes

Výkon Hermes se měří třemi klíčovými metrikami: Time-To-Interactive (TTI), velikost APK/IPA a spotřeba RAM. Podle Meta na Androidu Hermes snižuje TTI o 34 % ve srovnání s JSC: ze 4,2 sekund na 2,8 sekund na zařízení střední třídy (Moto G7). Velikost APK se snižuje o 28 % díky kompaktnímu bajtkódu a absenci JIT knihoven. Spotřeba RAM je v průměru o 22 % nižší při stejném zatížení — to je důležité zejména pro zařízení s 2–3 GB RAM. Na iOS je výhoda ještě větší: protože JSC nemůže používat JIT, Hermes poskytuje zlepšení TTI až o 45 %. Metriky jsou založeny na testech Meta s aplikací Facebook Lite. V reálných projektech se výhoda liší: pro jednoduché obrazovky (seznamy, text) Hermes poskytuje větší zlepšení, pro těžké animace — menší. Profilovací nástroj: React Native Profiler + hermes profile --heap.

Profilování paměti s Hermes

Hermes obsahuje vestavěný profiler paměti přístupný přes Chrome DevTools. Připojte se k aplikaci přes Metro, otevřete kartu Memory a vyberte Hermes (JavaScript) v typech snímků. Hermes podporuje tři typy snímků: Heap Snapshot (všechny objekty), Allocation Timeline (životnost objektů) a Allocation Sampling (selektivní profil). Hades GC snižuje počet pauz GC na minimum — v průměru jedna pauza 2–5 ms za 10 sekund práce oproti pauzám 10–20 ms u JSC za stejné období.

Sběrač odpadu Hades GC

Hades GC — je sběrač odpadu v Hermes, navržený pro mobilní scénáře s minimálními pauzami. Na rozdíl od mark-sweep GC v JSC používá Hades souběžný (concurrent) sběr: sběrač pracuje paralelně s hlavním vláknem provádění a zastavuje jej pouze na krátké období. Hades GC rozděluje haldu na generace: mladá generace (nursery) je sbírána často a rychle (Scavenge), stará generace je sbírána méně často a s menšími pauzami. Velikost haldy je konfigurovatelná: ve výchozím nastavení — 2/3 dostupné RAM aplikace, minimální práh — 32 MB. Hades nepoužívá přístup stop-the-world: i úplný sběr staré generace netrvá déle než 5–8 ms. Sběrač je optimalizován pro typický mobilní scénář: mnoho krátce žijících objektů (dočasné řetězce, objekty React fibre), málo dlouho žijících. Pro aplikace s intenzivním vytvářením objektů (seznamy, animace) poskytuje Hades plynulejší FPS ve srovnání s JSC.

Jak povolit Hermes v projektu React Native

Povolení Hermes závisí na verzi React Native a platformě. Od React Native 0.70 je Hermes ve výchozím nastavení povolen pro Android v nových projektech. Pro iOS je Hermes volitelný. Pro povolení na Androidu: v souboru android/app/build.gradle nastavte enableHermes: true v bloku project.ext.react.enableHermes. Pro iOS: nastavte hermes_enabled na true v Podfile pomocí use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true). Po povolení spusťte pod install. U stávajících projektů zkontrolujte kompatibilitu knihoven: Hermes nepodporuje Proxy, eval a některé funkce ES2021. Použijte npx react-native info pro kontrolu konfigurace. Pro přepínání mezi Hermes a JSC změňte příznak a proveďte clean rebuild.

// android/app/build.gradle — povolte Hermes
project.ext.react = [
    enableHermes: true,
    cliPath: "node_modules/react-native/cli.js"
]

// iOS/Podfile — povolte Hermes na iOS
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'MyApp' do
  config = use_native_modules!
  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true
  )
end

Omezení Hermes: co není podporováno

Hlavní omezení Hermes souvisejí s upuštěním od JIT. Hermes nepodporuje: Proxy a Reflect API (používané v MobX, Vue, některých správcích stavu), BigInt (velká čísla), Symbol.toStringTag, WeakRef a FinalizationRegistry. Funkce eval a new Function generují výjimku během provádění. Callbacky metod Array.prototype.flat a flatMap s argumentem this fungují s omezeními. Formáty data ISO 8601 s časovými pásmy nejsou plně zpracovány. Většina těchto omezení neovlivňuje typické aplikace React Native: React a React Native používají omezenou sadu funkcí ES. Pokud knihovna vyžaduje Proxy (např. MobX 6+ s Proxy), použijte configure({ useProxies: false }) nebo zvolte alternativu. Pro kontrolu kompatibility stávajícího kódu spusťte npx hermesc -check na svém balíku — zobrazí seznam nepodporovaných funkcí.

• Proxy / Reflect — neimplementováno; knihovny s Proxy vyžadují záložní režim
• BigInt — nedostupný; pro velká čísla použijte knihovny bignumber.js
• eval / new Function — volání throw; všechny moduly musí být statické
• WeakRef / FinalizationRegistry — nejsou podporovány; neexistuje alternativa
• Symbol.toStringTag — ignorován; instanceof funguje správně