Hermes — nedir, React Native için JS motoru ve çalışma prensibi

Hermes Nedir

Hermes, Meta tarafından React Native için oluşturulmuş ve sınırlı kaynaklara sahip mobil cihazlarda çalışmak üzere optimize edilmiş, kompakt, açık kaynaklı (MIT lisansı) bir JavaScript motorudur. Hermes'in ana yeniliği, JIT derlemesini bırakıp AOT'yi (Ahead-of-Time) benimsemesidir. React Native uygulaması derleme aşamasında, Metro Bundler derlenmiş JavaScript'i Hermes CLI'ye iletir ve bu da onu HBC (Hermes ByteCode) bayt koduna dönüştürür. Bu bayt kodu, cihazda ek derleme olmadan doğrudan motor tarafından yürütülür. Bu yaklaşım öngörülebilir performans sağlar: JIT ısınması yok, derleme duraklamaları yok, ek pil tüketimi yok. Hermes, mobil cihazların sınırlamaları dikkate alınarak tasarlanmıştır: düşük RAM (1-4 GB), sınırlı güç tüketimi ve hızlı soğuk başlatma ihtiyacı. Hermes'in ilk halka açık sürümü 2019'daydı ve React Native 0.70'ten (2022) itibaren motor, Android'de standart haline geldi.

Hermes vs JavaScriptCore: Motor Karşılaştırması

JavaScriptCore (JSC), Safari ve React Native'in 0.70 sürümünden önce kullandığı standart WebKit motorudur. JSC, karmaşık JavaScript işlemleri için yüksek performans sağlayan JIT derlemesini destekler. Ancak JIT ısınma gerektirir: ilk saniyeler daha yavaştır (yorumlanan mod), ardından JIT sık kullanılan yolları derler. iOS'ta, App Store politikaları (dinamik kod oluşturma yasağı) nedeniyle JIT pratikte kullanılamaz, bu nedenle iOS'ta JSC yalnızca yorumlanan modda çalışır — performans düşer. JSC, daha büyük ikili dosya boyutuna (yaklaşık 10 MB) sahiptir ve JIT altyapısı nedeniyle daha fazla RAM tüketir. Hermes JIT'ye bağımlı değildir ve başlatmadan (soğuk başlatma) hemen sonra öngörülebilir performans sağlar. JSC, ECMAScript standardını daha tam olarak destekler (Proxy, BigInt, Reflect dahil), ancak daha yüksek kaynak tüketimi pahasına. Soğuk başlatma ve küçük boyutun kritik olduğu React Native projeleri için Hermes tercih edilir. Ağır JS hesaplamaları (oyunlar, WebGL) olan projeler için JSC daha yüksek tepe performansı sağlayabilir.

AOT Derlemesi: Önceden Derleme Nasıl Çalışır

AOT derlemesi (Ahead-of-Time) Hermes'te iki aşamada gerçekleşir. İlk aşamada, Metro Bundler JavaScript dosyalarını tek bir pakette toplar ve Hermes CLI'ye (yardımcı program hermesc) iletir. İkinci aşamada, hermesc JavaScript AST'sini ayrıştırır, bir ara gösterim HIR (Hermes Intermediate Representation) oluşturur ve ardından ikili HBC bayt kodu üretir. Sonuç, orijinal JavaScript olmadan yalnızca bayt kodu içeren .hbc uzantılı bir dosyadır. Hermes çalışma zamanı, ayrıştırma ve derleme olmadan HBC'yi doğrudan yükler. Bu, başlatmayı kökten hızlandırır: binlerce JS satırını ayrıştırmak (async) yerine motor, önceden derlenmiş ikili bir format okur. AOT ayrıca boyutu da azaltır: bayt kodu, JavaScript AST'sinden ortalama %30 daha derli topludur. AOT'nin dezavantajı — çalışma zamanında eval, new Function veya dinamik require yürütememe — tüm modüller derleme anında bilinmelidir.

# Hermes CLI'yi bağımsız olarak yükle
npm install hermes-engine

# JS'yi HBC bayt koduna derle
npx hermesc -emit-binary -out bundle.hbc bundle.js

# Bayt kodu istatistikleri
npx hermesc -dump-bytecode bundle.hbc  # shows HBC instructions

# Orijinal JS ve HBC boyutu
wc -c bundle.js      # 2,300,000 bytes
wc -c bundle.hbc     # 1,450,000 bytes (37% reduction)

Hermes Performans Metrikleri

Hermes'in performansı üç temel metrikle ölçülür: Time-To-Interactive (TTI), APK/IPA boyutu ve RAM tüketimi. Meta verilerine göre, Android'de Hermes TTI'yı JSC'ye kıyasla %34 azaltır: orta seviye bir cihazda (Moto G7) 4,2 saniyeden 2,8 saniyeye. Kompakt bayt kodu ve JIT kitaplıklarının olmaması sayesinde APK boyutu %28 azalır. Aynı yük altında RAM tüketimi ortalama %22 daha düşüktür — bu, özellikle 2-3 GB RAM'li cihazlar için önemlidir. iOS'ta kazanç daha da belirgindir: JSC, JIT kullanamadığı için Hermes, TTI'da %45'e varan iyileştirme sağlar. Metrikler, Meta'nın Facebook Lite uygulamasıyla yaptığı testlere dayanmaktadır. Gerçek projelerde kazanç değişir: basit ekranlar (listeler, metin) için Hermes daha büyük iyileştirme sağlar, ağır animasyonlar için — daha az. Profil oluşturma aracı: React Native Profiler + hermes profile --heap.

Hermes ile Bellek Profil Oluşturma

Hermes, Chrome DevTools aracılığıyla erişilebilen yerleşik bir belek profilleyici içerir. Metro aracılığıyla uygulamaya bağlanın, Bellek sekmesini açın ve anlık görüntü türlerinden Hermes (JavaScript)'i seçin. Hermes üç tür anlık görüntüyü destekler: Heap Snapshot (tüm nesneler), Allocation Timeline (nesne ömürleri) ve Allocation Sampling (örnekleme profili). Hades GC, GC duraklamalarını minimuma indirir — aynı dönemde JSC için 10-20ms'lik duraklamalara kıyasla 10 saniyelik çalışmada ortalama bir 2-5ms duraklama.

Hades GC Çöp Toplayıcı

Hades GC, Hermes'teki çöp toplayıcıdır ve minimum duraklamalarla mobil senaryolar için tasarlanmıştır. JSC'deki mark-sweep GC'nin aksine Hades, eşzamanlı (concurrent) toplama kullanır: toplayıcı ana yürütme iş parçacığına paralel çalışır ve onu yalnızca kısa aralıklarla durdurur. Hades GC, yığını nesillere ayırır: genç nesil (nursery) sık ve hızlı bir şekilde toplanır (Scavenge), yaşlı nesil daha seyrek ve daha kısa duraklamalarla toplanır. Yığın boyutu yapılandırılabilir: varsayılan olarak — uygulamanın kullanılabilir RAM'inin 2/3'ü, minimum eşik — 32 MB. Hades, stop-the-world yaklaşımını kullanmaz: yaşlı neslin tam toplanması bile 5-8ms'den fazla sürmez. Toplayıcı, tipik mobil senaryolar için optimize edilmiştir: çok sayıda kısa ömürlü nesne (geçici dizeler, React fiber nesneleri), az sayıda uzun ömürlü nesne. Yoğun nesne oluşturma (listeler, animasyonlar) olan uygulamalar için Hades, JSC'ye kıyasla daha akıcı FPS sağlar.

React Native Projesinde Hermes Nasıl Etkinleştirilir

Hermes'i etkinleştirmek, React Native sürümüne ve platforma bağlıdır. React Native 0.70'ten itibaren, yeni projelerde Android için Hermes varsayılan olarak etkindir. iOS için Hermes isteğe bağlıdır. Android'de etkinleştirmek için: android/app/build.gradle dosyasında project.ext.react.enableHermes bloğunda enableHermes: true olarak ayarlayın. iOS için: use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true) aracılığıyla Podfile'da hermes_enabled değerini true olarak ayarlayın. Etkinleştirdikten sonra pod install komutunu çalıştırın. Mevcut projeler için kitaplık uyumluluğunu kontrol edin: Hermes, Proxy, eval ve bazı ES2021 özelliklerini desteklemez. Yapılandırmayı doğrulamak için npx react-native info kullanın. Hermes ve JSC arasında geçiş yapmak için bayrağı değiştirin ve temiz yeniden derleme yapın.

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

// iOS/Podfile — iOS'ta Hermes'i etkinleştir
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 Sınırlamaları: Desteklenmeyenler

Hermes'in ana sınırlamaları JIT eksikliğiyle ilgilidir. Hermes şunları desteklemez: Proxy ve Reflect API (MobX, Vue, bazı durum yöneticilerinde kullanılır), BigInt (büyük sayılar), Symbol.toStringTag, WeakRef ve FinalizationRegistry. eval ve new Function işlevleri çalışma zamanında istisna oluşturur. this argümanına sahip Array.prototype.flat ve flatMap yöntemlerinin geri çağrımları sınırlamalarla çalışır. Saat dilimli ISO 8601 tarih biçimleri tam olarak işlenmez. Bu sınırlamaların çoğu tipik React Native uygulamalarını etkilemez: React ve React Native sınırlı bir ES özellikleri kümesi kullanır. Bir kitaplık Proxy gerektiriyorsa (örneğin, Proxy ile MobX 6+), configure({ useProxies: false }) kullanın veya bir alternatif seçin. Mevcut kodun uyumluluğunu kontrol etmek için paketinizde npx hermesc -check komutunu çalıştırın — desteklenmeyen özelliklerin listesini gösterecektir.

• Proxy / Reflect — uygulanmadı; Proxy gerektiren kitaplıkların geri dönüş moduna ihtiyacı var
• BigInt — kullanılamaz; büyük sayılar için bignumber.js kitaplıklarını kullanın
• eval / new Function — çağrıldığında istisna oluşturur; tüm modüller statik olmalı
• WeakRef / FinalizationRegistry — desteklenmez; alternatifi yok
• Symbol.toStringTag — yok sayılır; instanceof doğru çalışır