Bisher haben wir React Natives DREI Threads besprochen (JS, Native, Shadow – siehe "React Native Referenz"). Aber WAS führt den JavaScript-Code auf dem JS-Thread eigentlich AUS? Die Antwort für moderne React-Native-Apps: Hermes, eine von Meta speziell für React Native entwickelte JavaScript-Engine.

Warum nicht einfach V8 (wie Chrome/Node.js) nutzen?

V8 ist für den Einsatz in Browsern/Servern optimiert, wo Nutzer oft schon ein GEÖFFNETES Programm haben, das JS-Code nachlädt. Mobile Apps starten dagegen bei JEDEM Öffnen komplett neu ("Cold Start") – hier zählt vor allem, wie SCHNELL die Engine startet und den JavaScript-Code zum ersten Mal parsen/ausführen kann, weniger die Rohgeschwindigkeit langlaufender Berechnungen. Hermes ist GENAU dafür optimiert.

Der entscheidende Trick: Bytecode-Vorkompilierung

Normale JS-Engines (V8, JavaScriptCore) parsen und kompilieren JavaScript-QUELLTEXT bei JEDEM App-Start neu. Hermes verschiebt das PARSEN in den Build-Prozess: beim Erstellen der App wird der JavaScript-Code bereits zu Hermes-BYTECODE vorkompiliert (ähnlich wie PHP-OPcache vorkompilierten Bytecode cached, nur hier bereits zur BUILD-Zeit statt zur Laufzeit) – die App muss beim Start nur noch fertigen Bytecode LADEN, nicht mehr Quelltext PARSEN.

Hermes ist der Standard – prüfen, ob es aktiv ist

Seit React Native 0.70 ist Hermes die STANDARD-Engine für neue Expo-/React-Native-Projekte – unsere produktkatalog-app nutzt Hermes bereits, ohne dass wir irgendetwas konfiguriert haben. Prüfen lässt sich das in app.json:

{
  "expo": {
    "jsEngine": "hermes"
  }
}

Fehlt jsEngine komplett, greift ebenfalls der Hermes-Standard – der explizite Eintrag dient nur der Klarheit/Dokumentation im Projekt.

Debugging mit Hermes: eine wichtige Einschränkung

Da Hermes-Bytecode nicht 1:1 dem lesbaren JavaScript-Quelltext entspricht, braucht Debugging SOURCE MAPS, um Fehler/Breakpoints auf die ursprünglichen Zeilen zurückzuführen – Expo/Metro generieren diese automatisch im Entwicklungsmodus. Nutzen Sie "React für Profis" Kapitel 30s npx react-devtools-Setup oder die integrierten React Native DevTools aus Kapitel 4 dieser Serie – beide verstehen Hermes-Source-Maps nativ.

Bundle-Größe mit Hermes-Bytecode analysieren

npx expo export --platform android
# Der Hermes-Bytecode landet in dist/... - Größe direkt im Dateisystem prüfbar

Anders als beim reinen JavaScript-Bundle aus "React für Profis" Kapitel 46 ist die Hermes-Bytecode-Datei tendenziell GRÖSSER als das ursprüngliche, minifizierte JS (Bytecode ist weniger dicht als komprimierter Text) – der Vorteil liegt NICHT in der Dateigröße, sondern ausschließlich in der VERMIEDENEN Parse-Zeit beim App-Start.