React Native 0.70 çıktı ve Hermes, bu güncellemeyle birlikte gönderilen yeni varsayılan JavaScript motorudur. Hermes’ten neler bekleyebileceğinizi ve React Native uygulamanızın performansını etkileyecek bazı özellikleri burada bulabilirsiniz.
Hermes Nedir?
Hermes, JavaScript kodunu verimli bayt koduna önceden derleyerek ve uygulama belleği kullanımını azaltarak iOS ve Android uygulama başlatmaları sırasında performansı optimize eden açık kaynaklı bir JavaScript motorudur.
Hermes’i Desteklemek için Eski React Native Sürümlerini Güncelleme
0.70 üzerinde çalışan React Native uygulamalarında varsayılan olarak Hermes etkin olacaktır. Daha eski React Native uygulamaları için, bir Hermes yapısı, Android sürümleri için 0.60.4 sürümünden ve iOS için 0.64.0 sürümünden başlayarak her React Native sürümüyle birlikte gelir. Eşleşen sürümler, React Native uygulamanızda bağımlılık uyumsuzluğu riskini ortadan kaldırır.
Hermes’i React Native’in bu eski sürümlerinde etkinleştirmek için hem Android hem de iOS uygulamalarınıza bazı yapılandırmalar eklemeniz gerekir.
Android’de android/app/build.gradle dosyanızı düzenleyin:
project.ext.react = [
entryFile: “index.js”,
enableHermes: true // clean and rebuild if changing
]
iOS’ta, ios/Podfile dosyanızda aşağıdaki değişiklikleri yaparsınız :
use_react_native!(
:path => config[:reactNativePath],
:hermes_enabled => true
)
iOS, ayarları yapılandırdıktan sonra Hermes bölmelerini yüklemenizi gerektirir.
Bölmeleri yüklemek için aşağıdaki komutu çalıştırın:
cd ios && pod install
Expo ile Hermes’i Etkinleştirmek
Hermes motorunu, Expo kullanılarak oluşturulan veya çalıştırılan React Native uygulamaları için de kullanabilirsiniz. Expo kütüphanesi, Android’de SDK 42 sürümünden ve iOS’ta SDK 43 sürümünden mevcut 0.70 sürümüne kadar Hermes’i destekler. Expo Application Services Build kullanılarak oluşturulmadıkça bağımsız uygulamaların Hermes’i çalıştıramayacağını unutmamak önemlidir.
Bir React Native uygulamasında Hermes’i etkinleştirmek için app.json dosyanızı düzenleyin:
{
“expo”: {
“jsEngine”: “hermes”
}
}
Artık Expo Application Services ile oluşturulan uygulamanız, JavaScript motoru olarak Hermes’i etkinleştirecektir.
React Native Uygulamaları için Hermes Performans Optimizasyonu
Çoğu JavaScript motoru, bir JIT (Tam Zamanında) derleme sistemi kullanarak tüm JavaScript kaynak kodunu ayrıştırır. JIT sistemi yürütmeyi yavaşlatır çünkü cihazınızın tüm derleme işleminin tamamlanmasını beklemesi gerekir. Hermes, ağır iş JavaScript motoru çalışmasının çoğunu zaman oluşturmak için aktaran bir önceden derleme (AOT) yaklaşımı kullanır.
Hermes, temel olarak uygulama performansının üç ölçüsünü etkiler: uygulama TTI (Etkileşim Zamanı), ikili boyut ve bellek kullanımı.
Etkileşim Zamanı
TTI, bir uygulamanın kaydırma veya yazma gibi kullanıcı etkileşimini yüklemesi ve desteklemesi için geçen süredir. Hermes, diğer JavaScript motorlarına kıyasla React Native uygulamaları için ortalama TTI’yi geliştirir.
TTI’deki bu azalma, Hermes’in bir JIT derleyicisi çalıştırmamasından kaynaklanmaktadır.
İkili Boyut
İkili boyut, paketlenmiş React Native uygulamasının boyutudur. Android uygulamaları APK dosya biçimini kullanırken, iOS uygulamaları Apple’ın IPA olarak adlandırdığı bir biçimi kullanır. Hermes’i kullanmak, Android cihazlarda uygulama boyutunu önemli ölçüde azaltır.
Hafıza kullanımı
Bellek kullanımı, uygulamalarda optimize edilmesi gereken bir diğer kritik ölçümdür. Bir uygulamanın kullanıcı deneyimi, çok fazla bellek kullanırsa olumsuz etkilenir. Hermes, isteğe bağlı olarak bellek kullanımını düzenleyen ve bir uygulamanın çalışırken yalnızca gerekli bellek alanını kullanmasını sağlayan bir Çöp Toplayıcı sistemi uygular.
Hata Ayıklama Hermes ve Chrome DevTools ile Native React
Hermes, Expo kullanarak bir emülatör, simülatör veya fiziksel cihaz üzerinde çalışan React Native uygulamalarında hata ayıklamak için yeni bir deneyimle birlikte gelir. Hermes, Chrome DevTools’un Denetçi Protokolünü kullanarak React Native uygulamalarında hata ayıklamayı destekler. Bunu , tarayıcının konsolunu kullanarak geleneksel JavaScript hata ayıklaması ile karıştırmamalısınız .
Chrome’u Hermes uygulamalarında hata ayıklayacak şekilde yapılandırmak için aşağıdaki adımları izleyin.
Chrome tarayıcınızın içinde chrome://inspect adresine gidin .
Yapılandır düğmesine tıklayın .
“Yapılandır…” düğmesi bulunan Chrome DevTools cihazları panelinin ekran görüntüsü
Ekran modelinin içinde, React Native uygulamanızı çalıştıran metro paketleyicinin sunucu adresini girin ve Done öğesini tıklayın .
Kullanılabilir ağ sunucusu adreslerine sahip Chrome DevTools Target ağ panelinin ekran görüntüsü
Artık Hermes hedef inceleme bağlantısını kullanarak React Native uygulamanızın hatalarını ayıklayabilirsiniz.
Hermes Neden Sadece React Native İçin Optimize Edilmiştir?
Hermes’in React Native JavaScript motoru olarak optimum performansı, kısmen çalışma zamanı ortamına bağlıdır. React Native’de, tüm JavaScript kodunu uygulama ortamında paketlersiniz. Bu sistem, gönderim bayt kodunu verimli hale getirir.
Dikkate alınması gereken diğer bir faktör, JavaScript derlemesi sırasında yapılan iş miktarıdır. Hermes, agresif bayt kodu optimizasyonundan kaçınırken, mobil uygulamalardan beklenen sık kullanıcı etkileşimini yönetir. Bir JIT derleyici JavaScript motoru, görevleri bu şekilde gerçekleştirmez.