Hermes: bu nədir, imkanları və React Native üçün optimallaşdırma

Hermes nədir?

Hermes — Meta komandası tərəfindən xüsusi olaraq React Native üçün yaradılmış yığcam JavaScript mühərrikidir. 2019-cu ildə React Native-də defolt olaraq istifadə olunan JavaScriptCore (JSC)-yə alternativ olaraq təqdim edilmişdir. Hermes-in əsas məqsədi mobil cihazlarda, xüsusilə məhdud resurslu Android-də tətbiqlərin mümkün qədər sürətli başlamasını təmin etməkdir.

Hermes-in əsas xüsusiyyəti əvvəlcədən kompilə (AOT — Ahead-of-Time) etməkdir. Kodu icra zamanı kompilə edən (JIT — Just-in-Time) ənənəvi JS mühərriklərindən fərqli olaraq, Hermes JavaScript-i tətbiqin qurma mərhələsində baytkoda kompilə edir. Bu o deməkdir ki, cihazda kompilə aparılmır — baytkod dərhal Hermes virtual maşını tərəfindən icra olunur.

Hermes universal JS mühərriki deyil — o, yalnız React Native ssenariləri üçün optimallaşdırılmışdır. Mobil inkişafda tələb olunmayan imkanlar: eval, generatorlar, bəzi ES6 xüsusiyyətləri yoxdur. Bu, mühərriki daha yığcam və sürətli etməyə imkan verir. Meta məlumatına görə, Hermes-in ölçüsü sıxılmış halda təxminən 200–300 KB təşkil edir ki, bu da JSC-dən (təxminən 2–3 MB) əhəmiyyətli dərəcədə azdır.

Hermes arxitekturası və baytkod

Hermes arxitekturası JIT kompilatorunun olmaması ilə ənənəvi JS mühərriklərindən fərqlənir. Bunun əvəzinə Hermes əvvəlcədən kompilə edilmiş baytkodu icra edən səmərəli virtual maşından (VM) istifadə edir. JIT-dən imtina üç əsas üstünlük verir: proqnozlaşdırıla bilən performans, daha az yaddaş sərfi və başlama vaxtının qısaldılması.

Hermes baytkodu — sürətli icra üçün optimallaşdırılmış JavaScript kodunun yığcam təsviridir. Qurma mərhələsində (Metro vasitəsilə) JavaScript faylları .hbc (Hermes Bytecode) fayllarına kompilə olunur. Tətbiq bu faylları yükləyir və Hermes VM əlavə kompilə olmadan onları icra edir. Qurma prosesi hermes-transformer plaqini vasitəsilə Metro-ya inteqrasiya olunub.

Kodun emal mərhələləri

Hermes-də JavaScript-in emal prosesi üç mərhələdən ibarətdir: Parse — mənbə kodun sintaktik analizi, Compile — baytkoda tərcümə, Execute — baytkodun virtual maşın tərəfindən icrası. İlk iki mərhələ qurma mərhələsində, üçüncüsü isə cihazda yerinə yetirilir. Bu, hər üç mərhələnin cihazda yerinə yetirildiyi JSC-dən köklü şəkildə fərqlənir.

# Hermes baytkodunun qurma zamanı kompilyasiyası
hermes -emit-binary -out index.hbc index.js

# Yaradılmış baytkodun ölçüsünü yoxla
ls -lh index.hbc

# Baytkod statistikasını göstər
hermes -dump-bytecode index.hbc

# Baytkodu istehsal üçün optimallaşdır
hermes -O index.js -emit-binary -O target.hbc

Kompilə edildikdən sonra bütün .hbc faylları native kodla birlikdə APK və ya IPA-ya paketlənir. Tətbiq işə salındıqda Hermes VM baytkodu yükləyir və demək olar ki, dərhal icraya başlayır — V8 və JSC üçün xarakterik olan JIT isinmə vaxtı tələb olunmur.

Hermes vs JSC: müqayisə

Hermes və JavaScriptCore (JSC) müqayisəsi hansı mühərriki seçmək lazım olduğunu anlamağa kömək edir. JSC — Apple-dan Safari-də istifadə olunan tamhüquqlu JS mühərrikidir. Hermes — React Native üçün ixtisaslaşdırılmış mühərrik. Onlar arasında seçim layihənin prioritetlərindən asılıdır.

Hermes başlama sürəti və yaddaş sərfində qalib gəlir, lakin mürəkkəb hesablamaların yerinə yetirilməsində JSC-dən geri qalır. JSC-nin JIT kompiləsi icra zamanı kodeyin qaynar hissələrini optimallaşdırır ki, bu da CPU intensiv əməliyyatlarda üstünlük verir. UI yeniləmələri və naviqasiyanın əsas yükü təşkil etdiyi tipik React Native tətbiqində Hermes sürətli başlama sayəsində daha yaxşı istifadəçi təcrübəsi təmin edir.

Hermes-in React Native üçün optimallaşdırmaları

Hermes React Native üçün xüsusi olan bir neçə optimallaşdırma ehtiva edir. Onlardan əsası JSI (JavaScript Interface) ilə inteqrasiyadır. Hermes JSI-ni native olaraq dəstəkləyir ki, bu da React Native-in yeni arxitekturasından (Fabric + Turbo Module) əlavə təbəqələr olmadan istifadə etməyə imkan verir. Bu, Hermes və yeni arxitekturanı maksimum performans üçün ideal cüt edir.

Yaddaşın idarə edilməsi

Hermes mobil cihazlar üçün optimallaşdırılmış nəsil strategiyası (generational GC) olan zibil yığan (garbage collector) istifadə edir. Zibil yığılmasının UI-də nəzərəçarpacaq fasilələr (jank) yarada biləcəyi JSC-dən fərqli olaraq, Hermes GC-ni çərçivələr arasında kiçik hissələrlə yerinə yetirir, istifadəçi təcrübəsinə təsirini minimuma endirir. Meta məlumatına görə, Hermes-də GC fasilələri tipik React Native ssenarilərində JSC-dən 2–3 dəfə qısadır.

Gec yükləmə və sabitlər

Hermes modulların gec yüklənməsini dəstəkləyir — JavaScript modulu yalnız həqiqətən lazım olduqda kompilə olunur. Bu, baytkodun ölçüsünü azaldır və başlamanı sürətləndirir. Əlavə olaraq Hermes kompilə mərhələsində sabit ifadələri hesablayır, mümkün olan yerlərdə funksiya çağırışlarını sabit dəyərlərlə əvəz edir.

// Hermes-ə xas optimallaşdırma nümunəsi

// 1. Hermes sabit ifadələri daxilə edir
const TAX_RATE = 0.07;
const price = 100;
// Hermes əvvəlcədən hesablayır: TAX_RATE * price kompilyasiya zamanı
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes xassə giriş zəncirlərini optimallaşdırır
const config = { api: { timeout: 5000 } };
// Hermes config.api girişini daxili keşləyir
const timeout = config.api.timeout;
fetch(url, { timeout });

Qeyd etmək vacibdir ki, Hermes Chrome DevTools vasitəsilə debug etməyi dəstəkləyir (Hermes 0.12 versiyasından). Tərtibatçı tanış alətlərdən istifadə edə bilər: breakpointlar, yaddaş profilaktikası, dəyişənlərin inspeksiyası. Bu, debug-un məhdud olduğu erkən versiyalarda Hermes-ə qarşı əsas etirazlardan birini aradan qaldırır.

Hermes-in React Native layihəsində quraşdırılması

Hermes in quraşdırılması React Native versiyasından asılıdır. React Native 0.70-dən etibarən Hermes yeni layihələr üçün defolt olaraq qoşulur. Daha əvvəl yaradılmış layihələr üçün və ya mühərriklər arasında keçid edərkən, quraşdırma qurma konfiqurasiyası vasitəsilə həyata keçirilir.

Android üçün quraşdırma

Android üçün Hermes android/app/build.gradle faylında hermesEnabled bayrağı vasitəsilə qoşulur. iOS üçün quraşdırma Podfile-da :hermes_enabled dəyişəni vasitəsilə aparılır. Konfiqurasiyanı dəyişdikdən sonra podları yenidən quraşdırmaq və layihəni yenidən qurmaq lazımdır.

// android/app/build.gradle — Hermes-i aktivləşdir
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — Hermes-i aktivləşdir
hermes_enabled = true
pod 'hermes-engine'

Hermes-in tətbiqdə istifadə olunduğunu yoxlamaq üçün Android-də adb logcat | grep Hermes icra edin və ya iOS-da Xcode konsolunu yoxlayın. Tətbiq başlayanda Hermes "Hermes VM initialized" və ya oxşar mesaj çıxarır. Həmçinin JavaScript kodunda globalThis.HermesInternal icra edə bilərsiniz — əgər Hermes aktivdirsə, bu xüsusiyyət mövcud olacaq.

// Hermes-in işlədiyini yoxla
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes mühərriki aktivdir');
  console.log(
    'Versiya:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes aktiv deyil (JSC-yə keçid)');
}