Hermes — wat is het, JS-engine voor React Native en werkingsprincipe

Wat is Hermes

Hermes — is een compacte JavaScript-engine met open source (MIT-licentie), gemaakt door Meta voor React Native en geoptimaliseerd voor werken op mobiele apparaten met beperkte middelen. De belangrijkste innovatie van Hermes is het afzien van JIT-compilatie ten gunste van AOT (Ahead-of-Time). Tijdens de build-fase van een React Native-app geeft Metro Bundler de gecompileerde JavaScript door aan Hermes CLI, die het omzet in HBC-bytecode (Hermes ByteCode). Deze bytecode wordt direct door de engine uitgevoerd zonder extra compilatie op het apparaat. Deze aanpak zorgt voor voorspelbare prestaties: geen “opwarming” van JIT, geen pauzes voor compilatie, geen extra batterijverbruik. Hermes is ontworpen rekening houdend met de beperkingen van mobiele apparaten: weinig RAM (1-4 GB), beperkt energieverbruik en de noodzaak van snelle koude start. De eerste openbare release van Hermes was in 2019, en vanaf React Native 0.70 (2022) werd de engine de standaard op Android.

Hermes vs JavaScriptCore: vergelijking van engines

JavaScriptCore (JSC) — de standaard WebKit-engine, gebruikt door Safari en React Native vóór versie 0.70. JSC ondersteunt JIT-compilatie, wat hoge prestaties levert voor complexe JavaScript-bewerkingen. Echter, JIT heeft opwarming nodig: de eerste seconden draait de code langzamer (geïnterpreteerde modus), waarna JIT de hete delen compileert. Op iOS is JIT praktisch onbeschikbaar vanwege het App Store-beleid (verbod op dynamische codegeneratie), dus werkt JSC op iOS alleen in de geïnterpreteerde modus — prestaties dalen. JSC heeft een grotere binaire grootte (ongeveer 10 MB) en verbruikt meer RAM vanwege de JIT-infrastructuur. Hermes is niet afhankelijk van JIT, wat zorgt voor voorspelbare prestaties direct na het opstarten (koude start). JSC ondersteunt de ECMAScript-standaard vollediger (inclusief Proxy, BigInt, Reflect), maar ten koste van hoger resourceverbruik. Voor React Native-projecten waar koude start en kleine grootte cruciaal zijn — heeft Hermes de voorkeur. Voor projecten met zware JS-berekeningen (games, WebGL) — kan JSC hogere piekprestaties leveren.

AOT-compilatie: hoe werkt vooraf bouwen

AOT-compilatie (Ahead-of-Time) in Hermes verloopt in twee fasen. In de eerste fase verzamelt Metro Bundler de JavaScript-bestanden in één bundel en geeft deze door aan Hermes CLI (het hulpprogramma hermesc). In de tweede fase parseert hermesc de JavaScript AST, genereert de tussenliggende representatie HIR (Hermes Intermediate Representation) en emitteert vervolgens de binaire HBC-bytecode. Het resultaat is een bestand met de extensie .hbc dat alleen bytecode bevat zonder de originele JavaScript. Hermes runtime laadt HBC direct, zonder parsen en compileren. Dit versnelt het opstarten drastisch: in plaats van duizenden JS-regels te parsen (async), leest de engine een vooraf gecompileerd binair formaat. AOT verkleint ook de grootte: bytecode is gemiddeld 30% compacter dan JavaScript AST. Het nadeel van AOT — geen mogelijkheid om eval, new Function of dynamische require uit te voeren tijdens runtime — alle modules moeten bekend zijn tijdens de build-fase.

# Installeer Hermes CLI standalone
npm install hermes-engine

# Compileer JS naar HBC-bytecode
npx hermesc -emit-binary -out bundle.hbc bundle.js

# Bytecode-statistieken
npx hermesc -dump-bytecode bundle.hbc  # shows HBC instructions

# Originele JS vs HBC-grootte
wc -c bundle.js      # 2,300,000 bytes
wc -c bundle.hbc     # 1,450,000 bytes (37% reduction)

Prestatiemetingen van Hermes

De prestaties van Hermes worden gemeten aan de hand van drie belangrijke meetwaarden: Time-To-Interactive (TTI), APK/IPA-grootte en RAM-verbruik. Volgens Meta vermindert Hermes op Android de TTI met 34% in vergelijking met JSC: van 4,2 seconden naar 2,8 seconden op een middelmatig apparaat (Moto G7). De APK-grootte neemt met 28% af dankzij compacte bytecode en het ontbreken van JIT-bibliotheken. Het RAM-verbruik is gemiddeld 22% lager bij dezelfde belasting — dit is vooral belangrijk voor apparaten met 2-3 GB RAM. Op iOS is het voordeel nog groter: omdat JSC geen JIT kan gebruiken, geeft Hermes een TTI-verbetering tot 45%. De metingen zijn gebaseerd op tests van Meta met de Facebook Lite-app. In echte projecten varieert het voordeel: voor eenvoudige schermen (lijsten, tekst) geeft Hermes een grotere verbetering, voor zware animaties — minder. Profileringshulpmiddel: React Native Profiler + hermes profile --heap.

Geheugenprofilering met Hermes

Hermes bevat een ingebouwde geheugenprofiler, toegankelijk via Chrome DevTools. Maak verbinding met de app via Metro, open het tabblad Memory en selecteer Hermes (JavaScript) in de snapshot-typen. Hermes ondersteunt drie typen snapshots: Heap Snapshot (alle objecten), Allocation Timeline (levensduur van objecten) en Allocation Sampling (selectief profiel). Hades GC vermindert het aantal GC-pauzes tot een minimum — gemiddeld één pauze van 2-5ms per 10 seconden werk tegenover pauzes van 10-20ms bij JSC in dezelfde periode.

Vuilnisophaler Hades GC

Hades GC — is de vuilnisophaler in Hermes, ontworpen voor mobiele scenario's met minimale pauzes. In tegenstelling tot de mark-sweep GC in JSC gebruikt Hades gelijktijdige (concurrent) verzameling: de verzamelaar werkt parallel met de hoofd-uitvoeringsdraad en stopt deze alleen voor korte periodes. Hades GC verdeelt de heap in generaties: de jonge generatie (nursery) wordt vaak en snel verzameld (Scavenge), de oude generatie wordt minder vaak en met kleinere pauzes verzameld. De heap-grootte is configureerbaar: standaard — 2/3 van het beschikbare RAM van de app, minimale drempel — 32 MB. Hades gebruikt geen stop-the-world-benadering: zelfs een volledige verzameling van de oude generatie duurt niet langer dan 5-8ms. De verzamelaar is geoptimaliseerd voor het typische mobiele scenario: veel kortlevende objecten (tijdelijke strings, React fibre-objecten), weinig langlevende. Voor apps met intensieve objectcreatie (lijsten, animaties) zorgt Hades voor een soepelere FPS in vergelijking met JSC.

Hermes inschakelen in een React Native-project

Het inschakelen van Hermes hangt af van de React Native-versie en het platform. Vanaf React Native 0.70 is Hermes standaard ingeschakeld voor Android in nieuwe projecten. Voor iOS is Hermes optioneel. Om in te schakelen op Android: in het bestand android/app/build.gradle stelt u enableHermes: true in in het blok project.ext.react.enableHermes. Voor iOS: stel hermes_enabled in op true in Podfile via use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true). Voer na het inschakelen pod install uit. Voor bestaande projecten controleert u de compatibiliteit van bibliotheken: Hermes ondersteunt geen Proxy, eval en sommige ES2021-functies. Gebruik npx react-native info om de configuratie te controleren. Om te schakelen tussen Hermes en JSC, wijzigt u de vlag en voert u een clean rebuild uit.

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

// iOS/Podfile — Hermes inschakelen op 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

Beperkingen van Hermes: wat wordt niet ondersteund

De belangrijkste beperkingen van Hermes houden verband met het afzien van JIT. Hermes ondersteunt niet: Proxy en Reflect API (gebruikt in MobX, Vue, sommige state-managers), BigInt (grote getallen), Symbol.toStringTag, WeakRef en FinalizationRegistry. De functies eval en new Function genereren een uitzondering tijdens uitvoering. Callbacks van methoden Array.prototype.flat en flatMap met het argument this werken met beperkingen. ISO 8601-datumformaten met tijdzones worden niet volledig verwerkt. De meeste van deze beperkingen hebben geen invloed op typische React Native-apps: React en React Native gebruiken een beperkte set ES-functies. Als een bibliotheek Proxy vereist (bijv. MobX 6+ met Proxy), gebruik dan configure({ useProxies: false }) of kies een alternatief. Om de compatibiliteit van bestaande code te controleren, voert u npx hermesc -check uit op uw bundel — het toont een lijst van niet-ondersteunde functies.

• Proxy / Reflect — niet geïmplementeerd; bibliotheken met Proxy vereisen fallback-modus
• BigInt — niet beschikbaar; gebruik bignumber.js-bibliotheken voor grote getallen
• eval / new Function — aanroep throw; alle modules moeten statisch zijn
• WeakRef / FinalizationRegistry — worden niet ondersteund; geen alternatief
• Symbol.toStringTag — wordt genegeerd; instanceof werkt correct