Hermes: React Native için özellikler ve optimizasyon

Hermes Nedir?

Hermes, Meta ekibi tarafından özellikle React Native için oluşturulmuş kompakt bir JavaScript motorudur. 2019 yılında React Native'de varsayılan olarak kullanılan JavaScriptCore'un (JSC) alternatifi olarak duyurulmuştur. Hermes'in temel amacı, özellikle sınırlı kaynaklara sahip Android'de mobil uygulamalar için mümkün olan en hızlı başlatmayı sağlamaktır.

Hermes'in temel özelliği önceden derleme (AOT — Ahead-of-Time)'dir. Kodu çalışma zamanında derleyen geleneksel JS motorlarının (JIT — Just-in-Time) aksine, Hermes JavaScript'i uygulama derleme aşamasında bayt koduna derler. Bu, cihazda hiçbir derleme olmadığı anlamına gelir — bayt kodu, Hermes sanal makinesi tarafından hemen yürütülür.

Hermes evrensel bir JS motoru değildir — yalnızca React Native senaryoları için optimize edilmiştir. Mobil geliştirmede ihtiyaç duyulmayan özelliklerden yoksundur: eval, oluşturucular ve bazı ES6 özellikleri. Bu, motorun daha kompakt ve hızlı olmasını sağlar. Meta'ya göre, Hermes'in sıkıştırılmış boyutu yaklaşık 200–300 KB'dir, bu da JSC'den (yaklaşık 2–3 MB) önemli ölçüde daha küçüktür.

Hermes Mimarisi ve Bayt Kodu

Hermes mimarisi, JIT derleyicisinin olmamasıyla geleneksel JS motorlarından farklıdır. Bunun yerine, Hermes önceden derlenmiş bayt kodunu yürüten verimli bir sanal makine (VM) kullanır. JIT'ten vazgeçmek üç temel avantaj sağlar: öngörülebilir performans, daha düşük bellek tüketimi ve azaltılmış başlatma süresi.

Hermes bayt kodu, hızlı yürütme için optimize edilmiş JavaScript kodunun kompakt bir temsilidir. Derleme aşamasında (Metro aracılığıyla), JavaScript dosyaları .hbc (Hermes Bytecode) dosyalarına derlenir. Uygulama bu dosyaları yükler ve Hermes VM bunları ek derleme olmadan yürütür. Derleme süreci, hermes-transformer eklentisi aracılığıyla Metro'ya entegre edilmiştir.

Kod İşleme Aşamaları

Hermes'teki JavaScript işleme akışı üç aşamadan oluşur: Parse — kaynak kodun sözdizimsel analizi, Compile — bayt koduna çeviri, Execute — sanal makine tarafından bayt kodunun yürütülmesi. İlk iki aşama derleme aşamasında çalışır, üçüncüsü cihazda çalışır. Bu, üç aşamanın da cihazda çalıştığı JSC'den temel olarak farklıdır.

# Hermes bayt kodu derlemesi (derleme sırasında)
hermes -emit-binary -out index.hbc index.js

# Oluşturulan bayt kodu boyutunu kontrol et
ls -lh index.hbc

# Bayt kodu istatistiklerini görüntüle
hermes -dump-bytecode index.hbc

# Bayt kodunu üretim için optimize et
hermes -O index.js -emit-binary -O target.hbc

Derlemeden sonra, tüm .hbc dosyaları yerel kodla birlikte APK veya IPA içinde paketlenir. Uygulama başladığında, Hermes VM bayt kodunu yükler ve neredeyse anında yürütmeye başlar — V8 ve JSC için tipik olan JIT ısınma süresine gerek yoktur.

Hermes vs JSC: Karşılaştırma

Hermes ve JavaScriptCore (JSC) karşılaştırması, hangi motorun ne zaman seçileceğini anlamaya yardımcı olur. JSC, Apple'dan Safari'de kullanılan tam özellikli bir JS motorudur. Hermes, React Native için özelleşmiş bir motordur. Aralarındaki seçim proje önceliklerine bağlıdır.

Hermes başlatma hızı ve bellek tüketiminde kazanır, ancak karmaşık hesaplama performansında JSC'nin gerisinde kalır. JSC'nin JIT derlemesi, yürütme sırasında sıcak kod yollarını optimize ederek CPU yoğun işlemlerde avantaj sağlar. UI güncellemeleri ve navigasyonun ana iş yükünü oluşturduğu tipik bir React Native uygulaması için Hermes, hızlı başlatma sayesinde daha iyi bir kullanıcı deneyimi sunar.

React Native için Hermes Optimizasyonları

Hermes, React Native'e özgü birkaç optimizasyon içerir. En önemlisi, JSI (JavaScript Interface) ile entegrasyondur. Hermes, JSI'yi yerel olarak destekleyerek yeni React Native mimarisinin (Fabric + Turbo Modules) ek katmanlar olmadan kullanılmasına olanak tanır. Bu, Hermes ve yeni mimariyi maksimum performans için ideal bir çift haline getirir.

Bellek Yönetimi

Hermes, mobil cihazlar için optimize edilmiş bir nesil atık toplayıcı (generational GC) kullanır. Atık toplamanın kullanıcı arayüzünde fark edilir duraklamalara (takılma) neden olabileceği JSC'nin aksine, Hermes GC'yi kareler arasında küçük parçalar halinde gerçekleştirerek kullanıcı deneyimi üzerindeki etkiyi en aza indirir. Meta'ya göre, tipik React Native senaryolarında Hermes'teki GC duraklamaları JSC'ye göre 2–3 kat daha kısadır.

Tembel Yükleme ve Sabitler

Hermes, tembel modül yüklemeyi destekler — bir JavaScript modülü yalnızca gerçekten ihtiyaç duyulduğunda derlenir. Bu, bayt kodu boyutunu azaltır ve başlatmayı hızlandırır. Ayrıca Hermes, derleme zamanında sabit ifadeleri değerlendirerek mümkün olduğunda işlev çağrılarını sabit değerlerle değiştirir.

// Hermes'e özgü optimizasyon örneği

// 1. Hermes sabit ifadeleri satır içine alır
const TAX_RATE = 0.07;
const price = 100;
// Hermes derleme sırasında TAX_RATE * price değerini önceden hesaplar
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes özellik erişim zincirlerini optimize eder
const config = { api: { timeout: 5000 } };
// Hermes dahili olarak config.api erişimini önbelleğe alır
const timeout = config.api.timeout;
fetch(url, { timeout });

Hermes'in Chrome DevTools aracılığıyla hata ayıklamayı (Hermes 0.12'den itibaren) desteklediğini belirtmek önemlidir. Geliştiriciler tanıdık araçları kullanabilir: kesme noktaları, bellek profili oluşturma, değişken inceleme. Bu, hata ayıklamanın sınırlı olduğu ilk sürümlerde Hermes'e yönelik temel itirazlardan birini ortadan kaldırır.

React Native Projesinde Hermes Kurulumu

Hermes kurulumu, React Native sürümüne bağlıdır. React Native 0.70'ten itibaren Hermes, yeni projeler için varsayılan olarak etkindir. Önceden oluşturulmuş projeler için veya motorlar arasında geçiş yaparken, yapılandırma derleme ayarları üzerinden yapılır.

Android Kurulumu

Android için Hermes, android/app/build.gradle dosyasında hermesEnabled bayrağı aracılığıyla etkinleştirilir. iOS için yapılandırma, Podfile'da :hermes_enabled değişkeni aracılığıyla yapılır. Yapılandırmayı değiştirdikten sonra, pod'ları yeniden yüklemeniz ve projeyi yeniden derlemeniz gerekir.

// android/app/build.gradle — Hermes'i etkinleştir
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — Hermes'i etkinleştir
hermes_enabled = true
pod 'hermes-engine'

Uygulamanızda Hermes'in çalıştığını doğrulamak için Android'de adb logcat | grep Hermes komutunu çalıştırın veya iOS'ta Xcode konsolunu kontrol edin. Uygulama başladığında, Hermes “Hermes VM initialized” veya benzer bir mesaj görüntüler. JavaScript kodunda globalThis.HermesInternal değerini de kontrol edebilirsiniz — Hermes etkinse bu özellik kullanılabilir olacaktır.

// Hermes'in çalışıp çalışmadığını kontrol et
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes motoru etkin');
  console.log(
    'Sürüm:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes etkin değil (JSC'ye geri dönüş)');
}