Hermes: шта је то, могућности и оптимизација за React Native

Шта је Hermes?

Hermes — је компактни JavaScript мотор, створен од стране Meta тима посебно за React Native. Објављен је 2019. године као алтернатива JavaScriptCore (JSC), који се подразумевано користио у React Native. Главни циљ Hermes-а је да обезбеди најбрже могуће покретање апликација на мобилним уређајима, посебно на Android-у са ограниченим ресурсима.

Кључна карактеристика Hermes-а је претходна компилација (AOT — Ahead-of-Time). За разлику од традиционалних JS мотора који компилују код у току извршавања (JIT — Just-in-Time), Hermes компилује JavaScript у бајткод већ у фази изградње апликације. То значи да се на уређају не обавља компилација — бајткод одмах извршава виртуелна машина Hermes.

Hermes није универзални JS мотор — оптимизован је искључиво за React Native сценарије. У њему недостају функционалности које нису потребне у мобилном развоју: eval, генератори, неке ES6 карактеристике. То омогућава да мотор буде компактнији и бржи. Према Meta, величина Hermes-а је око 200–300 KB у компресованом облику, што је значајно мање од JSC (отприлике 2–3 MB).

Архитектура Hermes и бајткод

Архитектура Hermes се разликује од традиционалних JS мотора по одсуству JIT компилатора. Уместо тога, Hermes користи ефикасну виртуелну машину (VM) која извршава унапред компиловани бајткод. Одустајање од JIT-а даје три кључне предности: предвидљиве перформансе, мању потрошњу меморије и скраћење времена покретања.

Бајткод Hermes-а је компактна репрезентација JavaScript кода, оптимизована за брзо извршавање. У фази изградње (преко Metro-а) JavaScript датотеке се компилују у .hbc (Hermes Bytecode) датотеке. Апликација учитава ове датотеке, а VM Hermes их извршава без додатне компилације. Процес изградње је интегрисан у Metro кроз плaгин hermes-transformer.

Фазе обраде кода

Процес обраде JavaScript-а у Hermes-у се састоји од три фазе: Parse — синтаксна анализа изворног кода, Compile — превођење у бајткод, Execute — извршавање бајткода од стране виртуелне машине. Прве две фазе се обављају у фази изградње, трећа — на уређају. Ово се суштински разликује од JSC, где се све три фазе обављају на уређају.

# Hermes компилација бајткода током изградње
hermes -emit-binary -out index.hbc index.js

# Провери величину генерисаног бајткода
ls -lh index.hbc

# Прикажи статистику бајткода
hermes -dump-bytecode index.hbc

# Оптимизуј бајткод за продукцију
hermes -O index.js -emit-binary -O target.hbc

Након компилације, све .hbc датотеке се пакују у APK или IPA заједно са изворним кодом. При покретању апликације, VM Hermes учитава бајткод и почиње извршавање готово тренутно — није потребно време за JIT загревање, типично за V8 и JSC.

Hermes vs JSC: поређење

Поређење Hermes и JavaScriptCore (JSC) помаже да се разуме када који мотор изабрати. JSC — пуноправни JS мотор од Apple-а, који се користи у Safari-ју. Hermes — специјализовани мотор за React Native. Избор између њих зависи од приоритета пројекта.

Hermes побеђује у брзини покретања и потрошњи меморије, али губи од JSC у перформансама извршавања сложених прорачуна. JIT компилација JSC оптимизује вруће делове кода током извршавања, што даје предност у CPU-интензивним операцијама. За типичну React Native апликацију, где ажурирања UI и навигација чине главно оптерећење, Hermes пружа боље корисничко искуство захваљујући брзом покретању.

Оптимизације Hermes за React Native

Hermes укључује неколико оптимизација специфичних за React Native. Главна од њих је интеграција са JSI (JavaScript Interface). Hermes изворно подржава JSI, што омогућава коришћење нове архитектуре React Native (Fabric + Turbo Module) без додатних слојева. То чини Hermes и нову архитектуру идеалним паром за максималне перформансе.

Управљање меморијом

Hermes користи сакупљач отпада са генерацијском стратегијом (generational GC), оптимизован за мобилне уређаје. За разлику од JSC, где сакупљање отпада може изазвати приметне паузе у UI (jank), Hermes извршава GC у малим порцијама између кадрова, минимизирајући утицај на корисничко искуство. Према Meta, GC паузе у Hermes-у су 2–3 пута краће него у JSC у типичним React Native сценаријима.

Лењо учитавање и константе

Hermes подржава лењо учитавање модула — JavaScript модул се компилује само када је стварно потребан. То смањује величину бајткода и убрзава покретање. Додатно, Hermes израчунава константне изразе у фази компилације, замењујући позиве функција константним вредностима тамо где је то могуће.

// Пример оптимизација специфичних за Hermes

// 1. Hermes убацује константне изразе
const TAX_RATE = 0.07;
const price = 100;
// Hermes унапред израчунава: TAX_RATE * price током компилације
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes оптимизује ланце приступа својствима
const config = { api: { timeout: 5000 } };
// Hermes интерно кешира приступ config.api
const timeout = config.api.timeout;
fetch(url, { timeout });

Важно је напоменути да Hermes подржава отклањање грешака путем Chrome DevTools (од верзије Hermes 0.12). Програмер може да користи познате алате: брејкпоинте, профилисање меморије, инспекцију променљивих. Ово уклања један од главних приговора против Hermes-а у раним верзијама, када је отклањање грешака било ограничено.

Подешавање Hermes у React Native пројекту

Подешавање Hermes зависи од верзије React Native. Од React Native 0.70 Hermes је подразумевано укључен за нове пројекте. За пројекте креиране раније или при потреби пребацивања између мотора, подешавање се врши кроз конфигурацију изградње.

Подешавање за Android

За Android, Hermes се укључује у датотеци android/app/build.gradle кроз флаг hermesEnabled. За iOS, подешавање се врши у Podfile-у кроз променљиву :hermes_enabled. Након промене конфигурације, потребно је поново инсталирати pod-ове и преградити пројекат.

// android/app/build.gradle — омогући Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — омогући Hermes
hermes_enabled = true
pod 'hermes-engine'

Да бисте проверили да ли се Hermes користи у апликацији, извршите adb logcat | grep Hermes на Android-у или проверите конзолу Xcode на iOS-у. При покретању апликације, Hermes приказује поруку „Hermes VM initialized” или сличну. Такође можете извршити globalThis.HermesInternal у JavaScript коду — ако је Hermes активан, ово својство ће бити доступно.

// Провери да ли Hermes ради
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes мотор је активан');
  console.log(
    'Верзија:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes није активан (повратак на JSC)');
}