React Native 0.70'deki Hermes Engine'den Ne Beklemeli?

React Native 0.70'deki Hermes Engine'den Ne Beklemeli?
Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma yaptığınızda, bir ortaklık komisyonu kazanabiliriz.

React Native 0.70 çıktı ve Hermes, bu güncellemeyle birlikte gönderilen yeni varsayılan JavaScript motorudur. İşte Hermes'ten neler bekleyebileceğiniz ve React Native uygulamanızın performansını etkileyecek bazı özellikler.





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.



GÜNÜN YAPILAN VİDEOSU

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.





Windows 10 fabrika ayarlarına nasıl geri yüklenir

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 dosya:



project.ext.react = [ 
    entryFile: "index.js", 
    enableHermes: true  // clean and rebuild if changing 
]

iOS'ta, aşağıdaki değişiklikleri yaparsınız: ios/Pod dosyası :

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 dosya:

{ 
  "expo": { 
    "jsEngine": "hermes" 
  } 
}

Artık Expo Application Services ile oluşturulan uygulamanız, JavaScript motoru olarak Hermes'i etkinleştirecektir.

1080p ve 1080i arasındaki fark nedir

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çimi , iOS uygulamaları Apple'ın IPA olarak adlandırdığı bir biçimi kullanırken. 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 geleneksel ile karıştırmamalısınız. Tarayıcı konsolunu kullanarak JavaScript hata ayıklama .

Lorem ipsum dolor sit amet, consectetur

Chrome'u Hermes uygulamalarında hata ayıklayacak şekilde yapılandırmak için aşağıdaki adımları izleyin.

  1. Şu yöne rotayı ayarla chrome://incele Chrome tarayıcınızın içinde.
  2. Tıkla Yapılandır buton.
  3. Ekran modelinin içinde, React Native uygulamanızı çalıştıran metro paketleyicinin sunucu adresini girin ve tıklayın. Tamamlandı .

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.