Hermes: bu nima, imkoniyatlari va React Native uchun optimallashtirish

Hermes nima?

Hermes — Meta jamoasi tomonidan ayniqsa React Native uchun yaratilgan ixcham JavaScript dvigatelidir. U 2019-yilda React Native da standart sifatida ishlatilgan JavaScriptCore (JSC) ga muqobil sifatida eʼlon qilingan. Hermes-ning asosiy maqsadi mobil qurilmalarda, ayniqsa cheklangan resursli Android da ilovalarni imkon qadar tez ishga tushirishni taʼminlashdir.

Hermes-ning asosiy xususiyati oldindan kompilyatsiya (AOT — Ahead-of-Time) dir. Kodni ishlash vaqtida kompilyatsiya qiladigan anʼanaviy JS dvigatellaridan (JIT — Just-in-Time) farqli oʻlaroq, Hermes JavaScript ni ilovani qurish bosqichida baytkodga kompilyatsiya qiladi. Bu degani, qurilmada kompilyatsiya amalga oshirilmaydi — baytkod darhol Hermes virtual mashinasi tomonidan bajariladi.

Hermes universal JS dvigateli emas — u faqat React Native stsenariylari uchun optimallashtirilgan. Unda mobil ishlanmada talab qilinmaydigan imkoniyatlar: eval, generatorlar, baʼzi ES6 xususiyatlari mavjud emas. Bu dvigatelni yanada ixcham va tezroq qilish imkonini beradi. Meta maʼlumotlariga koʻra, Hermes ning oʻlchami siqilgan holda taxminan 200–300 KB ni tashkil qiladi, bu JSC dan (taxminan 2–3 MB) sezilarli darajada kichikdir.

Hermes arxitekturasi va baytkod

Hermes arxitekturasi JIT kompilyatorining yoʻqligi bilan anʼanaviy JS dvigatellaridan farqlanadi. Buning oʻrniga Hermes oldindan kompilyatsiya qilingan baytkodni bajaradigan samarali virtual mashinadan (VM) foydalanadi. JIT dan voz kechish uchta asosiy afzallik beradi: bashorat qilinadigan samaradorlik, kamroq xotira sarfi va ishga tushish vaqtining qisqarishi.

Hermes baytkodi — tez bajarish uchun optimallashtirilgan JavaScript kodining ixcham ifodasidir. Qurish bosqichida (Metro orqali) JavaScript fayllari .hbc (Hermes Bytecode) fayllariga kompilyatsiya qilinadi. Ilova bu fayllarni yuklaydi va Hermes VM ularni qoʻshimcha kompilyatsiyasiz bajaradi. Qurish jarayoni hermes-transformer plagini orqali Metro ga integratsiya qilingan.

Kodni qayta ishlash bosqichlari

Hermes da JavaScript ni qayta ishlash jarayoni uch bosqichdan iborat: Parse — manba kodining sintaktik tahlili, Compile — baytkodga tarjima, Execute — baytkodni virtual mashina tomonidan bajarish. Dastlabki ikki bosqich qurish bosqichida, uchinchisi esa qurilmada amalga oshiriladi. Bu har uch bosqich qurilmada bajariladigan JSC dan tubdan farq qiladi.

# Hermes baytkodini qurish vaqtida kompilyatsiya qilish
hermes -emit-binary -out index.hbc index.js

# Yaratilgan baytkod hajmini tekshirish
ls -lh index.hbc

# Baytkod statistikasini koʻrsatish
hermes -dump-bytecode index.hbc

# Baytkodni ishlab chiqarish uchun optimallashtirish
hermes -O index.js -emit-binary -O target.hbc

Kompilyatsiyadan soʻng barcha .hbc fayllari native kod bilan birga APK yoki IPA ga paketlanadi. Ilova ishga tushganda Hermes VM baytkodni yuklaydi va deyarli bir zumda bajarishni boshlaydi — V8 va JSC ga xos boʻlgan JIT isitish vaqti talab qilinmaydi.

Hermes vs JSC: taqqoslash

Hermes va JavaScriptCore (JSC) ni taqqoslash qaysi dvigatelni tanlash kerakligini tushunishga yordam beradi. JSC — Apple tomonidan Safari da ishlatiladigan toʻliq huquqli JS dvigateli. Hermes — React Native uchun ixtisoslashtirilgan dvigatel. Ularning orasida tanlov loyihaning ustuvorliklariga bogʻliq.

Hermes ishga tushish tezligi va xotira sarfida gʻalaba qozonadi, lekin murakkab hisoblashlarni bajarish samaradorligida JSC dan orqada qoladi. JSC ning JIT kompilyatsiyasi ishlash vaqtida kodning issiq qismlarini optimallashtiradi, bu esa CPU intensiv operatsiyalarda ustunlik beradi. UI yangilanishlari va navigatsiya asosiy yukni tashkil etadigan odatdagi React Native ilovasida Hermes tez ishga tushish hisobiga yaxshiroq foydalanuvchi tajribasini taʼminlaydi.

Hermes-ning React Native uchun optimallashtirishlari

Hermes React Native uchun xos boʻlgan bir nechta optimallashtirishlarni oʻz ichiga oladi. Ulardan asosiysi JSI (JavaScript Interface) bilan integratsiyadir. Hermes JSI ni native qoʻllab-quvvatlaydi, bu esa React Native ning yangi arxitekturasidan (Fabric + Turbo Module) qoʻshimcha qatlamlarsiz foydalanish imkonini beradi. Bu Hermes va yangi arxitekturani maksimal samaradorlik uchun ideal juftlikka aylantiradi.

Xotirani boshqarish

Hermes mobil qurilmalar uchun optimallashtirilgan avlod strategiyasi (generational GC) bilan axlat yigʻuvchidan (garbage collector) foydalanadi. Axlat yigʻilishi UI da sezilarli pauzalarni (jank) keltirib chiqarishi mumkin boʻlgan JSC dan farqli oʻlaroq, Hermes GC ni kadrlar orasida kichik qismlar bilan bajaradi, foydalanuvchi tajribasiga taʼsirini minimallashtiradi. Meta maʼlumotlariga koʻra, Hermes dagi GC pauzalari odatdagi React Native stsenariylarida JSC dagidan 2–3 marta qisqaroq.

Kechikib yuklash va konstantalar

Hermes modullarni kechikib yuklashni qoʻllab-quvvatlaydi — JavaScript moduli faqat haqiqatan zarur boʻlganda kompilyatsiya qilinadi. Bu baytkod hajmini kamaytiradi va ishga tushishni tezlashtiradi. Qoʻshimcha ravishda Hermes kompilyatsiya bosqichida konstant ifodalarni hisoblab chiqadi, iloji boʻlgan joylarda funksiya chaqiruvlarini konstant qiymatlar bilan almashtiradi.

// Hermes-ga xos optimallashtirish namunasi

// 1. Hermes konstant ifodalarni ichki joylashtiradi
const TAX_RATE = 0.07;
const price = 100;
// Hermes oldindan hisoblaydi: TAX_RATE * price kompilyatsiya vaqtida
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes xususiyatga kirish zanjirlarini optimallashtiradi
const config = { api: { timeout: 5000 } };
// Hermes config.api ga kirishni ichki keshlaydi
const timeout = config.api.timeout;
fetch(url, { timeout });

Shuni taʼkidlash kerakki, Hermes Chrome DevTools orqali disk raskadrovkani qoʻllab-quvvatlaydi (Hermes 0.12 versiyasidan boshlab). Dasturchi tanish vositalardan foydalanishi mumkin: breykpointlar, xotira profillash, oʻzgaruvchilarni tekshirish. Bu disk raskadrovka cheklangan boʻlgan dastlabki versiyalarda Hermes ga qarshi asosiy eʼtirozlardan birini bartaraf qiladi.

Hermes-ni React Native loyihasida sozlash

Hermes ni sozlash React Native versiyasiga bogʻliq. React Native 0.70 dan boshlab Hermes yangi loyihalar uchun standart sifatida yoqilgan. Oldin yaratilgan loyihalar uchun yoki dvigatellar oʻrtasida oʻtish zarur boʻlganda, sozlash qurish konfiguratsiyasi orqali amalga oshiriladi.

Android uchun sozlash

Android uchun Hermes android/app/build.gradle faylida hermesEnabled bayrogʻi orqali yoqiladi. iOS uchun sozlash Podfile da :hermes_enabled oʻzgaruvchisi orqali amalga oshiriladi. Konfiguratsiyani oʻzgartirgandan soʻng podlarni qayta oʻrnatish va loyihani qayta qurish kerak.

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

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

Hermes ilovada ishlatilayotganini tekshirish uchun Android da adb logcat | grep Hermes ni bajaring yoki iOS da Xcode konsolini tekshiring. Ilova ishga tushganda Hermes “Hermes VM initialized” yoki shunga oʻxshash xabarni chiqaradi. Shuningdek, JavaScript kodida globalThis.HermesInternal ni bajarishingiz mumkin — agar Hermes aktiv boʻlsa, bu xususiyat mavjud boʻladi.

// Hermes ishlayotganini tekshirish
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes dvigateli aktiv');
  console.log(
    'Versiya:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes aktiv emas (JSC ga qaytish)');
}