Hermes — шта је то, JS мотор за React Native и принцип рада

Шта је Hermes

Hermes — је компактни JavaScript мотор са отвореним кодом (MIT лиценца), створен од стране Meta за React Native и оптимизован за рад на мобилним уређајима са ограниченим ресурсима. Главна иновација Hermes-а је одустајање од JIT компилације у корист AOT (Ahead-of-Time). У фази изградње React Native апликације, Metro Bundler прослеђује компилирани JavaScript Hermes CLI-ју, који га претвара у HBC бајткод (Hermes ByteCode). Овај бајткод се извршава директно од стране мотора без додатне компилације на уређају. Овај приступ пружа предвидљиве перформансе: нема „загревања" JIT-а, нема пауза за компилацију, нема додатне потрошње батерије. Hermes је дизајниран узимајући у обзир ограничења мобилних уређаја: мала RAM меморија (1-4 GB), ограничена потрошња енергије и потреба за брзим хладним стартом. Прво јавно издање Hermes-а било је 2019. године, а од React Native 0.70 (2022) мотор је постао стандард на Android-у.

Hermes vs JavaScriptCore: поређење мотора

JavaScriptCore (JSC) — стандардни WebKit мотор, који користе Safari и React Native пре верзије 0.70. JSC подржава JIT компилацију, што пружа високе перформансе за сложене JavaScript операције. Међутим, JIT захтева загревање: прве секунде код се извршава спорије (интерпретирани режим), затим JIT компилира вруће делове. На iOS-у JIT је практично недоступан због политика App Store (забрана динамичке генерације кода), па JSC на iOS-у ради само у интерпретираном режиму — перформансе опадају. JSC има већу бинарну величину (око 10 MB) и троши више RAM-а због JIT инфраструктуре. Hermes не зависи од JIT-а, што пружа предвидљиве перформансе одмах након покретања (хладан старт). JSC потпуније подржава ECMAScript стандард (укључујући Proxy, BigInt, Reflect), али по цену веће потрошње ресурса. За React Native пројекте где су хладан старт и мала величина критични — Hermes је пожељнији. За пројекте са тешким прорачунима у JS-у (игре, WebGL) — JSC може пружити веће вршне перформансе.

AOT компилација: како функционише претходна изградња

AOT компилација (Ahead-of-Time) у Hermes-у се одвија у две фазе. У првој фази, Metro Bundler сакупља JavaScript датотеке у јединствени пакет и прослеђује га Hermes CLI-ју (алат hermesc). У другој фази, hermesc парсира JavaScript AST, генерише посредну репрезентацију HIR (Hermes Intermediate Representation) и затим емитује бинарни HBC бајткод. Резултат је датотека са екстензијом .hbc која садржи само бајткод без оригиналног JavaScript-а. Hermes runtime учитава HBC директно, без парсирања и компилације. Ово радикално убрзава покретање: уместо парсирања хиљада JS линија (async), мотор чита претходно компилирани бинарни формат. AOT такође смањује величину: бајткод је у просеку 30% компактнији од JavaScript AST. Недостатак AOT-а — немогућност извршавања eval, new Function или динамичког require-а у рантајму — сви модули морају бити познати у фази изградње.

# Инсталирајте Hermes CLI самостално
npm install hermes-engine

# Компилирајте JS у HBC бајткод
npx hermesc -emit-binary -out bundle.hbc bundle.js

# Статистика бајткода
npx hermesc -dump-bytecode bundle.hbc  # shows HBC instructions

# Величина оригиналног JS vs HBC
wc -c bundle.js      # 2,300,000 bytes
wc -c bundle.hbc     # 1,450,000 bytes (37% reduction)

Метрике перформанси Hermes-а

Перформансе Hermes-а мере се по три кључне метрике: Time-To-Interactive (TTI), величина APK/IPA и потрошња RAM-а. Према Meta, на Android-у Hermes смањује TTI за 34% у поређењу са JSC: са 4.2 секунде на 2.8 секунди на уређају средњег сегмента (Moto G7). Величина APK-а се смањује за 28% захваљујући компактном бајткоду и одсуству JIT библиотека. Потрошња RAM-а је у просеку 22% нижа при истом оптерећењу — ово је посебно важно за уређаје са 2-3 GB RAM-а. На iOS-у предност је још већа: пошто JSC не може да користи JIT, Hermes даје повећање TTI до 45%. Метрике се заснивају на тестовима Meta са апликацијом Facebook Lite. У реалним пројектима предност варира: за једноставне екране (листе, текст) Hermes даје веће повећање, за тешке анимације — мање. Алат за профилисање: React Native Profiler + hermes profile --heap.

Профилисање меморије са Hermes-ом

Hermes укључује уграђени профилер меморије, доступан путем Chrome DevTools. Повежите се на апликацију преко Metro-а, отворите картицу Memory и изаберите Hermes (JavaScript) у типовима снимака. Hermes подржава три типа снимака: Heap Snapshot (сви објекти), Allocation Timeline (животни век објеката) и Allocation Sampling (селективни профил). Hades GC смањује број GC пауза на минимум — у просеку једна пауза од 2-5ms на 10 секунди рада наспрам пауза од 10-20ms код JSC у истом периоду.

Сакупљач смећа Hades GC

Hades GC — је сакупљач смећа у Hermes-у, дизајниран за мобилне сценарије са минималним паузама. За разлику од mark-sweep GC у JSC, Hades користи конкурентно сакупљање: сакупљач ради паралелно са главном нити извршења, заустављајући је само на кратке периоде. Hades GC дели меморијску гомилу на генерације: млада генерација (nursery) се сакупља често и брзо (Scavenge), стара генерација се сакупља ређе и са мањим паузама. Величина гомиле се подешава: подразумевано — 2/3 доступног RAM-а апликације, минимални праг — 32 MB. Hades не користи stop-the-world приступ: чак и потпуно сакупљање старе генерације траје не више од 5-8ms. Сакупљач је оптимизован за типичан мобилни сценарио: много краткотрајних објеката (привремени стрингови, React fibre објекти), мало дуготрајних. За апликације са интензивним стварањем објеката (листе, анимације) Hades обезбеђује глаткији FPS у поређењу са JSC.

Како укључити Hermes у React Native пројекту

Укључивање Hermes-а зависи од верзије React Native и платформе. Од React Native 0.70, Hermes је подразумевано укључен за Android у новим пројектима. За iOS Hermes је опционалан. За укључивање на Android-у: у датотеци android/app/build.gradle поставите enableHermes: true у блоку project.ext.react.enableHermes. За iOS: поставите hermes_enabled на true у Podfile-у преко use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true). Након укључивања, извршите pod install. За постојеће пројекте проверите компатибилност библиотека: Hermes не подржава Proxy, eval и неке ES2021 функције. Користите npx react-native info за проверу конфигурације. За прелазак између Hermes-а и JSC, промените флаг и извршите clean rebuild.

// android/app/build.gradle — укључите Hermes
project.ext.react = [
    enableHermes: true,
    cliPath: "node_modules/react-native/cli.js"
]

// iOS/Podfile — укључите Hermes на 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

Ограничења Hermes-а: шта се не подржава

Главна ограничења Hermes-а су везана за одустајање од JIT-а. Hermes не подржава: Proxy и Reflect API (користи се у MobX, Vue, неким управљачима стања), BigInt (велики бројеви), Symbol.toStringTag, WeakRef и FinalizationRegistry. Функције eval и new Function генеришу изузетак током извршења. Callback-и метода Array.prototype.flat и flatMap са this аргументом раде са ограничењима. ISO 8601 формати датума са временским зонама се не обрађују у потпуности. Већина ових ограничења не утиче на типичне React Native апликације: React и React Native користе ограничен скуп ES функција. Ако библиотека захтева Proxy (нпр. MobX 6+ са Proxy), користите configure({ useProxies: false }) или изаберите алтернативу. За проверу компатибилности постојећег кода, покрените npx hermesc -check на свом пакету — приказаће листу неподржаних функција.

• Proxy / Reflect — нису имплементирани; библиотеке са Proxy захтевају fallback режим
• BigInt — недоступан; користите bignumber.js библиотеке за велике бројеве
• eval / new Function — позив throw; сви модули морају бити статички
• WeakRef / FinalizationRegistry — нису подржани; нема алтернативе
• Symbol.toStringTag — игнорише се; instanceof ради исправно