Hermes: Funktionen und Optimierung für React Native

Was ist Hermes?

Hermes ist eine kompakte JavaScript-Engine, die vom Meta-Team speziell für React Native entwickelt wurde. Sie wurde 2019 als Alternative zu JavaScriptCore (JSC) angekündigt, das standardmäßig in React Native verwendet wurde. Das Hauptziel von Hermes ist der schnellstmögliche Start von mobilen Anwendungen, insbesondere auf Android mit begrenzten Ressourcen.

Das Hauptmerkmal von Hermes ist die Vorab-Kompilierung (AOT — Ahead-of-Time). Im Gegensatz zu traditionellen JS-Engines, die Code zur Laufzeit kompilieren (JIT — Just-in-Time), kompiliert Hermes JavaScript während der App-Build-Phase in Bytecode. Das bedeutet, dass auf dem Gerät keine Kompilierung stattfindet — der Bytecode wird sofort von der virtuellen Maschine von Hermes ausgeführt.

Hermes ist keine universelle JS-Engine — sie ist ausschließlich für React Native-Szenarien optimiert. Ihr fehlen Funktionen, die in der mobilen Entwicklung nicht benötigt werden: eval, Generatoren und einige ES6-Funktionen. Dadurch ist die Engine kompakter und schneller. Laut Meta beträgt die Größe von Hermes komprimiert etwa 200–300 KB, was deutlich kleiner ist als JSC (etwa 2–3 MB).

Hermes-Architektur und Bytecode

Die Hermes-Architektur unterscheidet sich von traditionellen JS-Engines durch das Fehlen eines JIT-Compilers. Stattdessen verwendet Hermes eine effiziente virtuelle Maschine (VM), die vorab kompilierten Bytecode ausführt. Der Verzicht auf JIT bietet drei Hauptvorteile: vorhersagbare Leistung, geringerer Speicherverbrauch und verkürzte Startzeit.

Hermes-Bytecode ist eine kompakte Darstellung von JavaScript-Code, optimiert für schnelle Ausführung. Während der Build-Phase (über Metro) werden JavaScript-Dateien in .hbc-Dateien (Hermes Bytecode) kompiliert. Die App lädt diese Dateien, und die Hermes-VM führt sie ohne zusätzliche Kompilierung aus. Der Build-Prozess ist über das hermes-transformer-Plugin in Metro integriert.

Code-Verarbeitungsstufen

Der JavaScript-Verarbeitungsablauf in Hermes besteht aus drei Stufen: Parse — syntaktische Analyse des Quellcodes, Compile — Übersetzung in Bytecode, Execute — Ausführung des Bytecode durch die virtuelle Maschine. Die ersten beiden Stufen werden während der Build-Phase ausgeführt, die dritte auf dem Gerät. Dies unterscheidet sich grundlegend von JSC, wo alle drei Stufen auf dem Gerät ausgeführt werden.

# Hermes-Bytecode-Kompilierung während des Builds
hermes -emit-binary -out index.hbc index.js

# Generierte Bytecode-Größe prüfen
ls -lh index.hbc

# Bytecode-Statistiken anzeigen
hermes -dump-bytecode index.hbc

# Bytecode für die Produktion optimieren
hermes -O index.js -emit-binary -O target.hbc

Nach der Kompilierung werden alle .hbc-Dateien zusammen mit nativem Code in APK oder IPA verpackt. Wenn die App startet, lädt die Hermes-VM den Bytecode und beginnt fast sofort mit der Ausführung — es wird keine JIT-Aufwärmzeit benötigt, die für V8 und JSC typisch ist.

Hermes vs JSC: Vergleich

Der Vergleich von Hermes und JavaScriptCore (JSC) hilft zu verstehen, wann welche Engine zu wählen ist. JSC ist eine voll ausgestattete JS-Engine von Apple, die in Safari verwendet wird. Hermes ist eine spezialisierte Engine für React Native. Die Wahl zwischen ihnen hängt von den Projektprioritäten ab.

Hermes gewinnt bei Startgeschwindigkeit und Speicherverbrauch, liegt aber bei komplexen Berechnungen hinter JSC zurück. Die JIT-Kompilierung von JSC optimiert während der Ausführung heiße Codepfade, was ihr einen Vorteil bei CPU-intensiven Operationen verschafft. Für eine typische React Native-App, bei der UI-Updates und Navigation die Hauptlast ausmachen, bietet Hermes durch schnellen Start eine bessere Benutzererfahrung.

Hermes-Optimierungen für React Native

Hermes enthält mehrere Optimierungen, die für React Native spezifisch sind. Die wichtigste ist die Integration mit JSI (JavaScript Interface). Hermes unterstützt JSI nativ, sodass die neue React Native-Architektur (Fabric + Turbo Modules) ohne zusätzliche Schichten verwendet werden kann. Dies macht Hermes und die neue Architektur zum idealen Paar für maximale Leistung.

Speicherverwaltung

Hermes verwendet einen für mobile Geräte optimierten generationalen Garbage Collector (generational GC). Im Gegensatz zu JSC, wo die Garbage Collection zu spürbaren UI-Pausen (Ruckeln) führen kann, führt Hermes GC in kleinen Portionen zwischen den Frames aus, wodurch die Auswirkungen auf die Benutzererfahrung minimiert werden. Laut Meta sind die GC-Pausen in Hermes bei typischen React Native-Szenarien 2–3 mal kürzer als in JSC.

Lazy Require und Konstanten

Hermes unterstützt das verzögerte Laden von Modulen — ein JavaScript-Modul wird nur kompiliert, wenn es tatsächlich benötigt wird. Dies reduziert die Bytecode-Größe und beschleunigt den Start. Zusätzlich wertet Hermes konstante Ausdrücke zur Kompilierungszeit aus und ersetzt Funktionsaufrufe wo möglich durch konstante Werte.

// Hermes-spezifische Optimierungsbeispiele

// 1. Hermes inlineiert konstante Ausdrücke
const TAX_RATE = 0.07;
const price = 100;
// Hermes berechnet vor: TAX_RATE * price während der Kompilierung
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes optimiert Eigenschaftszugriffsketten
const config = { api: { timeout: 5000 } };
// Hermes cached config.api-Zugriff intern
const timeout = config.api.timeout;
fetch(url, { timeout });

Es ist wichtig zu beachten, dass Hermes das Debuggen über Chrome DevTools unterstützt (ab Hermes 0.12). Entwickler können vertraute Werkzeuge verwenden: Haltepunkte, Speicherprofilierung, Variableninspektion. Dies beseitigt einen der Haupteinwände gegen Hermes in früheren Versionen, wo das Debuggen eingeschränkt war.

Einrichtung von Hermes in einem React Native-Projekt

Die Einrichtung von Hermes hängt von der React Native-Version ab. Ab React Native 0.70 ist Hermes standardmäßig für neue Projekte aktiviert. Für früher erstellte Projekte oder beim Wechsel zwischen Engines erfolgt die Konfiguration über die Build-Einstellungen.

Android-Einrichtung

Für Android wird Hermes in der Datei android/app/build.gradle über das Flag hermesEnabled aktiviert. Für iOS erfolgt die Konfiguration in der Podfile über die Variable :hermes_enabled. Nach Änderung der Konfiguration müssen die Pods neu installiert und das Projekt neu erstellt werden.

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

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

Um zu überprüfen, ob Hermes in Ihrer App läuft, führen Sie adb logcat | grep Hermes auf Android aus oder überprüfen Sie die Xcode-Konsole auf iOS. Beim Start der App gibt Hermes eine Meldung wie „Hermes VM initialized“ oder ähnlich aus. Sie können auch globalThis.HermesInternal im JavaScript-Code überprüfen — wenn Hermes aktiv ist, ist diese Eigenschaft verfügbar.

// Prüfen, ob Hermes läuft
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes-Engine aktiv');
  console.log(
    'Version:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes nicht aktiv (Fallback zu JSC)');
}