Hermes — ce este, motorul JS pentru React Native și principiul de funcționare

Ce este Hermes

Hermes — este un motor JavaScript compact cu sursă deschisă (licența MIT), creat de Meta pentru React Native și optimizat pentru funcționarea pe dispozitive mobile cu resurse limitate. Inovația principală a Hermes este renunțarea la compilarea JIT în favoarea AOT (Ahead-of-Time). În etapa de build a aplicației React Native, Metro Bundler transmite JavaScript-ul compilat către Hermes CLI, care îl transformă în bytecode HBC (Hermes ByteCode). Acest bytecode este executat direct de motor fără compilare suplimentară pe dispozitiv. Această abordare asigură o performanță previzibilă: nu există „încălzire" JIT, nu există pauze de compilare, nu există consum suplimentar de baterie. Hermes a fost proiectat ținând cont de limitările dispozitivelor mobile: RAM redus (1-4 GB), consum limitat de energie și necesitatea unei porniri rapide la rece. Prima lansare publică a Hermes a avut loc în 2019, iar de la React Native 0.70 (2022) motorul a devenit standard pe Android.

Hermes vs JavaScriptCore: compararea motoarelor

JavaScriptCore (JSC) — motorul standard WebKit, utilizat de Safari și React Native înainte de versiunea 0.70. JSC acceptă compilarea JIT, ceea ce oferă performanță ridicată pentru operații complexe JavaScript. Cu toate acestea, JIT necesită încălzire: primele secunde codul rulează mai lent (mod interpretat), apoi JIT compilează secțiunile fierbinți. Pe iOS, JIT este practic indisponibil din cauza politicilor App Store (interdicția generării dinamice de cod), astfel încât JSC pe iOS funcționează doar în mod interpretat — performanța scade. JSC are o dimensiune binară mai mare (aproximativ 10 MB) și consumă mai mult RAM din cauza infrastructurii JIT. Hermes nu depinde de JIT, ceea ce oferă o performanță previzibilă imediat după pornire (pornire la rece). JSC acceptă mai complet standardul ECMAScript (inclusiv Proxy, BigInt, Reflect), dar cu prețul unui consum mai mare de resurse. Pentru proiectele React Native unde pornirea la rece și dimensiunea mică sunt critice — Hermes este preferat. Pentru proiectele cu calcule grele în JS (jocuri, WebGL) — JSC poate oferi o performanță de vârf mai mare.

Compilarea AOT: cum funcționează construirea preliminară

Compilarea AOT (Ahead-of-Time) în Hermes are loc în două etape. În prima etapă, Metro Bundler colectează fișierele JavaScript într-un singur pachet și îl transmite către Hermes CLI (utilitarul hermesc). În a doua etapă, hermesc parsează JavaScript AST, generează reprezentarea intermediară HIR (Hermes Intermediate Representation) și apoi emite bytecode-ul binar HBC. Rezultatul este un fișier cu extensia .hbc care conține doar bytecode fără JavaScript-ul original. Hermes runtime încarcă HBC direct, fără parsare și compilare. Acest lucru accelerează radical pornirea: în loc să parseze mii de linii JS (async), motorul citește un format binar precompilat. AOT reduce, de asemenea, dimensiunea: bytecode-ul este în medie cu 30% mai compact decât JavaScript AST. Dezavantajul AOT — imposibilitatea executării eval, new Function sau require dinamic în runtime — toate modulele trebuie să fie cunoscute în etapa de build.

# Instalați Hermes CLI autonom
npm install hermes-engine

# Compilați JS în bytecode HBC
npx hermesc -emit-binary -out bundle.hbc bundle.js

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

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

Metricile de performanță Hermes

Performanța Hermes este măsurată după trei metrici cheie: Time-To-Interactive (TTI), dimensiunea APK/IPA și consumul RAM. Conform Meta, pe Android Hermes reduce TTI cu 34% față de JSC: de la 4.2 secunde la 2.8 secunde pe un dispozitiv de segment mediu (Moto G7). Dimensiunea APK se reduce cu 28% datorită bytecode-ului compact și absenței bibliotecilor JIT. Consumul RAM este în medie cu 22% mai mic la aceeași sarcină — acest lucru este deosebit de important pentru dispozitivele cu 2-3 GB RAM. Pe iOS, avantajul este și mai mare: deoarece JSC nu poate folosi JIT, Hermes oferă o creștere a TTI de până la 45%. Metricile se bazează pe testele Meta cu aplicația Facebook Lite. În proiecte reale, avantajul variază: pentru ecrane simple (liste, text) Hermes oferă o creștere mai mare, pentru animații grele — mai mică. Instrument de profilare: React Native Profiler + hermes profile --heap.

Profilarea memoriei cu Hermes

Hermes include un profiler de memorie integrat, accesibil prin Chrome DevTools. Conectați-vă la aplicație prin Metro, deschideți fila Memory și selectați Hermes (JavaScript) în tipurile de instantanee. Hermes suportă trei tipuri de instantanee: Heap Snapshot (toate obiectele), Allocation Timeline (durata de viață a obiectelor) și Allocation Sampling (profil selectiv). Hades GC reduce numărul pauzelor GC la minimum — în medie o pauză de 2-5ms la 10 secunde de lucru față de pauzele de 10-20ms la JSC în aceeași perioadă.

Colectorul de gunoi Hades GC

Hades GC — este colectorul de gunoi din Hermes, proiectat pentru scenarii mobile cu pauze minime. Spre deosebire de GC mark-sweep din JSC, Hades folosește colectarea concurentă (concurrent): colectorul lucrează paralel cu firul principal de execuție, oprindu-l doar pentru perioade scurte. Hades GC împarte memoria heap în generații: generația tânără (nursery) este colectată frecvent și rapid (Scavenge), generația veche este colectată mai rar și cu pauze mai mici. Dimensiunea heap-ului este configurabilă: implicit — 2/3 din RAM-ul disponibil al aplicației, pragul minim — 32 MB. Hades nu folosește abordarea stop-the-world: chiar și colectarea completă a generației vechi durează cel mult 5-8ms. Colectorul este optimizat pentru scenariul mobil tipic: multe obiecte cu durată scurtă de viață (stringuri temporare, obiecte React fibre), puține obiecte cu durată lungă. Pentru aplicații cu creare intensivă de obiecte (liste, animații) Hades asigură un FPS mai lin în comparație cu JSC.

Cum se activează Hermes în proiectul React Native

Activarea Hermes depinde de versiunea React Native și de platformă. Începând cu React Native 0.70, Hermes este activat implicit pentru Android în proiecte noi. Pentru iOS, Hermes este opțional. Pentru activare pe Android: în fișierul android/app/build.gradle setați enableHermes: true în blocul project.ext.react.enableHermes. Pentru iOS: setați hermes_enabled la true în Podfile prin use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true). După activare, executați pod install. Pentru proiecte existente, verificați compatibilitatea bibliotecilor: Hermes nu suportă Proxy, eval și unele funcții ES2021. Folosiți npx react-native info pentru verificarea configurației. Pentru a comuta între Hermes și JSC, modificați flag-ul și executați clean rebuild.

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

// iOS/Podfile — activați Hermes pe 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

Limitările Hermes: ce nu este acceptat

Principalele limitări ale Hermes sunt legate de renunțarea la JIT. Hermes nu suportă: Proxy și Reflect API (utilizate în MobX, Vue, unor manageri de stare), BigInt (numere mari), Symbol.toStringTag, WeakRef și FinalizationRegistry. Funcțiile eval și new Function generează excepție în timpul execuției. Callback-urile metodelor Array.prototype.flat și flatMap cu argumentul this funcționează cu limitări. Formatele de date ISO 8601 cu fusuri orare nu sunt procesate complet. Majoritatea acestor limitări nu afectează aplicațiile tipice React Native: React și React Native folosesc un set limitat de funcții ES. Dacă o bibliotecă necesită Proxy (de exemplu, MobX 6+ cu Proxy), utilizați configure({ useProxies: false }) sau alegeți o alternativă. Pentru verificarea compatibilității codului existent, rulați npx hermesc -check pe pachetul dvs. — va afișa lista funcțiilor neacceptate.

• Proxy / Reflect — neimplementate; bibliotecile cu Proxy necesită modul fallback
• BigInt — indisponibil; utilizați bibliotecile bignumber.js pentru numere mari
• eval / new Function — apelul throw; toate modulele trebuie să fie statice
• WeakRef / FinalizationRegistry — nu sunt suportate; nu există alternativă
• Symbol.toStringTag — ignorat; instanceof funcționează corect