Hermes : fonctionnalités et optimisation pour React Native

Qu’est-ce que Hermes ?

Hermes est un moteur JavaScript compact créé par l’équipe de Meta spécifiquement pour React Native. Il a été annoncé en 2019 comme alternative à JavaScriptCore (JSC), qui était utilisé par défaut dans React Native. L’objectif principal d’Hermes est de fournir le démarrage le plus rapide possible pour les applications mobiles, en particulier sur Android avec des ressources limitées.

La principale caractéristique d’Hermes est la compilation anticipée (AOT — Ahead-of-Time). Contrairement aux moteurs JS traditionnels qui compilent le code à l’exécution (JIT — Just-in-Time), Hermes compile JavaScript en bytecode pendant la phase de construction de l’application. Cela signifie qu’aucune compilation n’a lieu sur l’appareil : le bytecode est immédiatement exécuté par la machine virtuelle Hermes.

Hermes n’est pas un moteur JS universel : il est optimisé exclusivement pour les scénarios React Native. Il ne possède pas les fonctionnalités inutiles en développement mobile : eval, générateurs et certaines fonctionnalités ES6. Cela permet au moteur d’être plus compact et plus rapide. Selon Meta, la taille d’Hermes est d’environ 200–300 Ko compressé, ce qui est nettement inférieur à JSC (environ 2–3 Mo).

Architecture d’Hermes et bytecode

L’architecture d’Hermes diffère des moteurs JS traditionnels par l’absence de compilateur JIT. Au lieu de cela, Hermes utilise une machine virtuelle (VM) efficace qui exécute du bytecode précompilé. L’abandon du JIT offre trois avantages clés : performances prévisibles, consommation mémoire réduite et temps de démarrage diminué.

Le bytecode Hermes est une représentation compacte du code JavaScript optimisée pour une exécution rapide. Pendant la phase de construction (via Metro), les fichiers JavaScript sont compilés en fichiers .hbc (Hermes Bytecode). L’application charge ces fichiers, et la VM Hermes les exécute sans compilation supplémentaire. Le processus de construction est intégré dans Metro via le plugin hermes-transformer.

Étapes du traitement du code

Le flux de traitement JavaScript dans Hermes comprend trois étapes : Parse — analyse syntaxique du code source, Compile — traduction en bytecode, Execute — exécution du bytecode par la machine virtuelle. Les deux premières étapes s’exécutent pendant la phase de construction, la troisième sur l’appareil. Cela diffère fondamentalement de JSC, où les trois étapes s’exécutent sur l’appareil.

# Compilation du bytecode Hermes pendant la construction
hermes -emit-binary -out index.hbc index.js

# Vérifier la taille du bytecode généré
ls -lh index.hbc

# Afficher les statistiques du bytecode
hermes -dump-bytecode index.hbc

# Optimiser le bytecode pour la production
hermes -O index.js -emit-binary -O target.hbc

Après compilation, tous les fichiers .hbc sont empaquetés dans APK ou IPA avec le code natif. Lorsque l’application démarre, la VM Hermes charge le bytecode et commence l’exécution presque instantanément : aucun temps de préchauffage JIT n’est nécessaire, contrairement à V8 et JSC.

Hermes vs JSC : comparaison

Comparer Hermes et JavaScriptCore (JSC) aide à comprendre quand choisir quel moteur. JSC est un moteur JS complet d’Apple, utilisé dans Safari. Hermes est un moteur spécialisé pour React Native. Le choix entre eux dépend des priorités du projet.

Hermes gagne en vitesse de démarrage et en consommation mémoire, mais est en retard sur JSC en termes de performances de calculs complexes. La compilation JIT de JSC optimise les chemins de code chaud pendant l’exécution, ce qui lui donne un avantage sur les opérations intensives en CPU. Pour une application React Native typique, où les mises à jour de l’interface et la navigation constituent la charge de travail principale, Hermes offre une meilleure expérience utilisateur grâce à un démarrage rapide.

Optimisations d’Hermes pour React Native

Hermes comprend plusieurs optimisations spécifiques à React Native. La principale est l’intégration avec JSI (JavaScript Interface). Hermes supporte JSI nativement, permettant d’utiliser la nouvelle architecture React Native (Fabric + Turbo Modules) sans couches supplémentaires. Cela fait d’Hermes et de la nouvelle architecture la paire idéale pour des performances maximales.

Gestion de la mémoire

Hermes utilise un ramasse-miettes générationnel (generational GC) optimisé pour les appareils mobiles. Contrairement à JSC, où le ramasse-miettes peut provoquer des pauses notables dans l’interface (saccades), Hermes effectue le GC par petites portions entre les images, minimisant l’impact sur l’expérience utilisateur. Selon Meta, les pauses GC dans Hermes sont 2–3 fois plus courtes que dans JSC dans les scénarios React Native typiques.

Chargement paresseux et constantes

Hermes supporte le chargement paresseux des modules : un module JavaScript n’est compilé que lorsqu’il est effectivement nécessaire. Cela réduit la taille du bytecode et accélère le démarrage. De plus, Hermes évalue les expressions constantes au moment de la compilation, remplaçant les appels de fonction par des valeurs constantes là où c’est possible.

// Exemple d’optimisations spécifiques à Hermes

// 1. Hermes inline les expressions constantes
const TAX_RATE = 0.07;
const price = 100;
// Hermes précalcule : TAX_RATE * price pendant la compilation
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes optimise les chaînes d’accès aux propriétés
const config = { api: { timeout: 5000 } };
// Hermes met en cache l’accès à config.api en interne
const timeout = config.api.timeout;
fetch(url, { timeout });

Il est important de noter qu’Hermes prend en charge le débogage via Chrome DevTools (à partir d’Hermes 0.12). Les développeurs peuvent utiliser des outils familiers : points d’arrêt, profilage mémoire, inspection de variables. Cela élimine l’une des principales objections à Hermes dans les premières versions, où le débogage était limité.

Configuration d’Hermes dans un projet React Native

La configuration d’Hermes dépend de la version de React Native. À partir de React Native 0.70, Hermes est activé par défaut pour les nouveaux projets. Pour les projets créés antérieurement, ou lors du changement de moteur, la configuration se fait via les paramètres de construction.

Configuration pour Android

Pour Android, Hermes est activé dans le fichier android/app/build.gradle via le drapeau hermesEnabled. Pour iOS, la configuration se fait dans le Podfile via la variable :hermes_enabled. Après avoir modifié la configuration, vous devez réinstaller les pods et reconstruire le projet.

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

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

Pour vérifier que Hermes fonctionne dans votre application, exécutez adb logcat | grep Hermes sur Android ou vérifiez la console Xcode sur iOS. Au démarrage de l’application, Hermes affiche un message comme « Hermes VM initialized » ou similaire. Vous pouvez aussi vérifier globalThis.HermesInternal dans le code JavaScript : si Hermes est actif, cette propriété sera disponible.

// Vérifier si Hermes fonctionne
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Moteur Hermes actif');
  console.log(
    'Version :',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes inactif (repli vers JSC)');
}