Hermes: co to je, možnosti a optimalizace pro React Native

Co je Hermes?

Hermes — je kompaktní JavaScriptový engine, vytvořený týmem Meta speciálně pro React Native. Byl oznámen v roce 2019 jako alternativa k JavaScriptCore (JSC), který se používal ve výchozím nastavení v React Native. Hlavním cílem Hermes je zajistit co nejrychlejší spuštění aplikací na mobilních zařízeních, zejména na Androidu s omezenými zdroji.

Klíčovou vlastností Hermes je předběžná kompilace (AOT — Ahead-of-Time). Na rozdíl od tradičních JS enginů, které kompilují kód za běhu (JIT — Just-in-Time), Hermes kompiluje JavaScript do bajtkódu již ve fázi sestavení aplikace. To znamená, že na zařízení neprobíhá kompilace — bajtkód je okamžitě spouštěn virtuálním strojem Hermes.

Hermes není univerzální JS engine — je optimalizován výhradně pro scénáře React Native. Chybí v něm funkce, které nejsou v mobilním vývoji vyžadovány: eval, generátory, některé ES6 funkce. To umožňuje, aby byl engine kompaktnější a rychlejší. Podle Meta je velikost Hermes přibližně 200–300 KB v komprimované podobě, což je výrazně méně než JSC (přibližně 2–3 MB).

Architektura Hermes a bajtkód

Architektura Hermes se liší od tradičních JS enginů absencí JIT kompilátoru. Místo toho Hermes používá efektivní virtuální stroj (VM), který spouští předem zkompilovaný bajtkód. Upuštění od JIT přináší tři klíčové výhody: předvídatelný výkon, nižší spotřebu paměti a zkrácení doby spuštění.

Bajtkód Hermes je kompaktní reprezentace JavaScript kódu, optimalizovaná pro rychlé spouštění. Ve fázi sestavení (přes Metro) jsou JavaScript soubory kompilovány do .hbc (Hermes Bytecode) souborů. Aplikace načte tyto soubory a VM Hermes je spouští bez další kompilace. Proces sestavení je integrován do Metro prostřednictvím pluginu hermes-transformer.

Fáze zpracování kódu

Proces zpracování JavaScriptu v Hermes se skládá ze tří fází: Parse — syntaktická analýza zdrojového kódu, Compile — překlad do bajtkódu, Execute — spuštění bajtkódu virtuálním strojem. První dvě fáze probíhají ve fázi sestavení, třetí — na zařízení. To se zásadně liší od JSC, kde všechny tři fáze probíhají na zařízení.

# Kompilace bajtkódu Hermes během sestavení
hermes -emit-binary -out index.hbc index.js

# Zkontrolujte velikost vygenerovaného bajtkódu
ls -lh index.hbc

# Zobrazit statistiky bajtkódu
hermes -dump-bytecode index.hbc

# Optimalizovat bajtkód pro produkci
hermes -O index.js -emit-binary -O target.hbc

Po kompilaci jsou všechny .hbc soubory zabaleny do APK nebo IPA spolu s nativním kódem. Při spuštění aplikace VM Hermes načte bajtkód a začne ho spouštět téměř okamžitě — není vyžadován čas na zahřátí JIT, typický pro V8 a JSC.

Hermes vs JSC: srovnání

Srovnání Hermes a JavaScriptCore (JSC) pomáhá pochopit, kdy který engine zvolit. JSC — plnohodnotný JS engine od Apple, používaný v Safari. Hermes — specializovaný engine pro React Native. Volba mezi nimi závisí na prioritách projektu.

Hermes vítězí v rychlosti spuštění a spotřebě paměti, ale zaostává za JSC ve výkonu při provádění složitých výpočtů. JIT kompilace JSC optimalizuje horké části kódu během běhu, což poskytuje výhodu u výpočetně náročných operací. U typické React Native aplikace, kde aktualizace UI a navigace tvoří hlavní zátěž, poskytuje Hermes díky rychlému startu lepší uživatelský zážitek.

Optimalizace Hermes pro React Native

Hermes zahrnuje několik optimalizací specifických pro React Native. Hlavní z nich je integrace s JSI (JavaScript Interface). Hermes nativně podporuje JSI, což umožňuje používat novou architekturu React Native (Fabric + Turbo Module) bez dalších vrstev. To dělá z Hermes a nové architektury ideální pár pro maximální výkon.

Správa paměti

Hermes používá garbage collector s generační strategií (generational GC), optimalizovaný pro mobilní zařízení. Na rozdíl od JSC, kde garbage collection může způsobit znatelné pauzy v UI (jank), Hermes provádí GC v malých dávkách mezi snímky, čímž minimalizuje dopad na uživatelský zážitek. Podle Meta jsou GC pauzy v Hermes 2–3krát kratší než v JSC v typických scénářích React Native.

Líné načítání a konstanty

Hermes podporuje líné načítání modulů — JavaScript modul je kompilován pouze tehdy, když je skutečně potřeba. To snižuje velikost bajtkódu a zrychluje spouštění. Kromě toho Hermes vypočítává konstantní výrazy ve fázi kompilace a nahrazuje volání funkcí konstantními hodnotami tam, kde je to možné.

// Příklad optimalizací specifických pro Hermes

// 1. Hermes vkládá konstantní výrazy
const TAX_RATE = 0.07;
const price = 100;
// Hermes předpočítává: TAX_RATE * price během kompilace
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes optimalizuje řetězce přístupu k vlastnostem
const config = { api: { timeout: 5000 } };
// Hermes interně cache přístup k config.api
const timeout = config.api.timeout;
fetch(url, { timeout });

Je důležité poznamenat, že Hermes podporuje ladění přes Chrome DevTools (od verze Hermes 0.12). Vývojář může používat známé nástroje: breakpointy, profilování paměti, inspekci proměnných. To odstraňuje jednu z hlavních námitek proti Hermes v raných verzích, kdy bylo ladění omezené.

Nastavení Hermes v projektu React Native

Nastavení Hermes závisí na verzi React Native. Od React Native 0.70 je Hermes ve výchozím nastavení zapnutý pro nové projekty. U dříve vytvořených projektů nebo při potřebě přepínání mezi enginy se nastavení provádí prostřednictvím konfigurace sestavení.

Nastavení pro Android

Pro Android se Hermes zapíná v souboru android/app/build.gradle pomocí flagu hermesEnabled. Pro iOS se nastavení provádí v Podfile pomocí proměnné :hermes_enabled. Po změně konfigurace je třeba znovu nainstalovat pody a přestavět projekt.

// android/app/build.gradle — povolit Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — povolit Hermes
hermes_enabled = true
pod 'hermes-engine'

Pro kontrolu, zda se Hermes v aplikaci používá, spusťte adb logcat | grep Hermes na Androidu nebo zkontrolujte konzoli Xcode na iOS. Při spuštění aplikace Hermes zobrazí zprávu „Hermes VM initialized” nebo podobnou. Můžete také spustit globalThis.HermesInternal v JavaScript kódu — pokud je Hermes aktivní, tato vlastnost bude dostupná.

// Zkontrolujte, zda Hermes běží
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Engine Hermes je aktivní');
  console.log(
    'Verze:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes není aktivní (přechod na JSC)');
}