Hermes: ce este, caracteristici și optimizare pentru React Native

Ce este Hermes?

Hermes — este un motor JavaScript compact, creat de echipa Meta special pentru React Native. A fost anunțat în 2019 ca alternativă la JavaScriptCore (JSC), care era utilizat implicit în React Native. Scopul principal al Hermes este să asigure cea mai rapidă pornire a aplicațiilor pe dispozitive mobile, în special pe Android cu resurse limitate.

Caracteristica cheie a Hermes este compilarea prealabilă (AOT — Ahead-of-Time). Spre deosebire de motoarele JS tradiționale care compilează codul în timpul execuției (JIT — Just-in-Time), Hermes compilează JavaScript în bytecod deja în faza de build a aplicației. Aceasta înseamnă că pe dispozitiv nu are loc compilarea — bytecodul este executat imediat de mașina virtuală Hermes.

Hermes nu este un motor JS universal — este optimizat exclusiv pentru scenarii React Native. Nu include funcționalități care nu sunt necesare în dezvoltarea mobilă: eval, generatoare, unele caracteristici ES6. Acest lucru permite ca motorul să fie mai compact și mai rapid. Conform Meta, dimensiunea Hermes este de aproximativ 200–300 KB în formă comprimată, ceea ce este semnificativ mai mic decât JSC (aproximativ 2–3 MB).

Arhitectura Hermes și bytecodul

Arhitectura Hermes diferă de motoarele JS tradiționale prin absența compilatorului JIT. În schimb, Hermes utilizează o mașină virtuală (VM) eficientă care execută bytecodul compilat în avans. Renunțarea la JIT oferă trei avantaje cheie: performanță previzibilă, consum redus de memorie și timp de pornire redus.

Bytecodul Hermes este o reprezentare compactă a codului JavaScript, optimizată pentru execuție rapidă. În faza de build (prin Metro), fișierele JavaScript sunt compilate în fișiere .hbc (Hermes Bytecode). Aplicația încarcă aceste fișiere, iar VM Hermes le execută fără compilare suplimentară. Procesul de build este integrat în Metro prin pluginul hermes-transformer.

Etapele procesării codului

Procesul de procesare a JavaScript în Hermes constă din trei etape: Parse — analiza sintactică a codului sursă, Compile — traducerea în bytecod, Execute — execuția bytecodului de către mașina virtuală. Primele două etape se execută în faza de build, a treia — pe dispozitiv. Acest lucru diferă fundamental de JSC, unde toate trei etapele se execută pe dispozitiv.

# Compilarea bytecodului Hermes în timpul build-ului
hermes -emit-binary -out index.hbc index.js

# Verificați dimensiunea bytecodului generat
ls -lh index.hbc

# Afișați statisticile bytecodului
hermes -dump-bytecode index.hbc

# Optimizați bytecodul pentru producție
hermes -O index.js -emit-binary -O target.hbc

După compilare, toate fișierele .hbc sunt împachetate în APK sau IPA împreună cu codul nativ. La pornirea aplicației, VM Hermes încarcă bytecodul și începe execuția aproape instantaneu — nu necesită timp de încălzire JIT, tipic pentru V8 și JSC.

Hermes vs JSC: comparație

Comparația Hermes și JavaScriptCore (JSC) ajută la înțelegerea când să alegeți care motor. JSC — un motor JS complet de la Apple, utilizat în Safari. Hermes — un motor specializat pentru React Native. Alegerea între ele depinde de prioritățile proiectului.

Hermes câștigă în viteza de pornire și consumul de memorie, dar pierde în fața JSC în performanța execuției calculelor complexe. Compilarea JIT a JSC optimizează porțiunile fierbinți de cod în timpul execuției, ceea ce oferă un avantaj în operațiile intensive CPU. Pentru o aplicație tipică React Native, unde actualizările UI și navigația constituie sarcina principală, Hermes oferă o experiență mai bună datorită pornirii rapide.

Optimizări Hermes pentru React Native

Hermes include câteva optimizări specifice pentru React Native. Principala dintre ele este integrarea cu JSI (JavaScript Interface). Hermes suportă JSI nativ, ceea ce permite utilizarea noii arhitecturi React Native (Fabric + Turbo Module) fără straturi suplimentare. Aceasta face din Hermes și noua arhitectură o pereche ideală pentru performanță maximă.

Gestionarea memoriei

Hermes utilizează un garbage collector cu strategie generațională (generational GC), optimizat pentru dispozitive mobile. Spre deosebire de JSC, unde colectarea gunoiului poate cauza pauze vizibile în UI (jank), Hermes execută GC în porțiuni mici între cadre, minimizând impactul asupra experienței utilizatorului. Conform Meta, pauzele GC în Hermes sunt de 2–3 ori mai scurte decât în JSC în scenarii tipice React Native.

Încărcare lentă și constante

Hermes suportă încărcarea lentă a modulelor — modulul JavaScript este compilat doar atunci când este cu adevărat necesar. Aceasta reduce dimensiunea bytecodului și accelerează pornirea. În plus, Hermes calculează expresii constante în faza de compilare, înlocuind apelurile de funcții cu valori constante acolo unde este posibil.

// Exemplu de optimizări specifice Hermes

// 1. Hermes inlinează expresiile constante
const TAX_RATE = 0.07;
const price = 100;
// Hermes pre-calculează: TAX_RATE * price în timpul compilării
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes optimizează lanțurile de acces la proprietăți
const config = { api: { timeout: 5000 } };
// Hermes cachează intern accesul la config.api
const timeout = config.api.timeout;
fetch(url, { timeout });

Este important de menționat că Hermes suportă debugging prin Chrome DevTools (începând cu versiunea Hermes 0.12). Dezvoltatorul poate utiliza instrumente familiare: breakpoint-uri, profilare memorie, inspecție variabile. Aceasta elimină una dintre principalele obiecții împotriva Hermes în versiunile timpurii, când debugging-ul era limitat.

Configurarea Hermes în proiectul React Native

Configurarea Hermes depinde de versiunea React Native. Începând cu React Native 0.70, Hermes este activat implicit pentru proiecte noi. Pentru proiectele create anterior sau la necesitatea comutării între motoare, configurarea se face prin setările de build.

Configurare pentru Android

Pentru Android, Hermes se activează în fișierul android/app/build.gradle prin flag-ul hermesEnabled. Pentru iOS, configurarea se face în Podfile prin variabila :hermes_enabled. După modificarea configurației, este necesar să reinstalați pod-urile și să reconstruiți proiectul.

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

// iOS Podfile — activați Hermes
hermes_enabled = true
pod 'hermes-engine'

Pentru a verifica dacă Hermes este utilizat în aplicație, executați adb logcat | grep Hermes pe Android sau verificați consola Xcode pe iOS. La pornirea aplicației, Hermes afișează mesajul „Hermes VM initialized” sau similar. De asemenea, puteți executa globalThis.HermesInternal în codul JavaScript — dacă Hermes este activ, această proprietate va fi disponibilă.

// Verificați dacă Hermes rulează
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Motorul Hermes este activ');
  console.log(
    'Versiune:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes nu este activ (fallback la JSC)');
}