Apa yang Diharapkan Dari Mesin Hermes di React Native 0.70

Apa yang Diharapkan Dari Mesin Hermes di React Native 0.70
Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi.

React Native 0.70 sudah keluar, dan Hermes adalah mesin JavaScript default baru yang dikirimkan dengan pembaruan ini. Inilah yang diharapkan dari Hermes dan beberapa fitur yang akan memengaruhi kinerja aplikasi React Native Anda.





Apa Itu Hermes?

Hermes adalah mesin JavaScript open-source yang mengoptimalkan kinerja selama peluncuran aplikasi iOS dan Android dengan melakukan pra-kompilasi kode JavaScript menjadi bytecode yang efisien dan mengurangi penggunaan memori aplikasi.



cara menghilangkan peringatan hak cipta comcast
VIDEO MAKEUSEOF HARI INI

Memperbarui Versi Asli React yang Lebih Lama untuk Mendukung Hermes

Aplikasi React Native yang berjalan pada 0.70 akan mengaktifkan Hermes secara default. Untuk aplikasi React Native yang lebih lama, build Hermes dikirimkan dengan setiap versi React Native mulai dari versi 0.60.4 untuk build Android dan versi 0.64.0 untuk iOS. Versi yang cocok menghilangkan risiko ketidakcocokan ketergantungan dalam aplikasi React Native Anda.





Untuk mengaktifkan Hermes di versi React Native yang lebih lama ini, Anda perlu menambahkan beberapa konfigurasi ke aplikasi Android dan iOS Anda.

Di Android, edit android/app/build.gradle mengajukan:



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

Di iOS, Anda membuat perubahan berikut pada ios/Podfile :

use_react_native!( 
    :path => config[:reactNativePath], 
    :hermes_enabled => true 
)

iOS mengharuskan Anda untuk menginstal pod Hermes setelah mengonfigurasi pengaturan.



Jalankan perintah berikut untuk menginstal pod:

cd ios && pod install

Mengaktifkan Hermes Dengan Expo

Anda juga dapat menggunakan mesin Hermes untuk aplikasi React Native yang dibangun atau dijalankan menggunakan Expo. Pustaka Expo mendukung Hermes dari SDK versi 42 di Android dan SDK versi 43 di iOS hingga versi saat ini 0.70. Penting untuk dicatat bahwa aplikasi yang berdiri sendiri tidak dapat menjalankan Hermes kecuali dibangun menggunakan Expo Application Services Build.



Untuk mengaktifkan Hermes di aplikasi React Native, edit app.json mengajukan:

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

Sekarang aplikasi Anda yang dibangun dengan Expo Application Services akan mengaktifkan Hermes sebagai mesin JavaScript-nya.

Pengoptimalan Kinerja Hermes untuk Aplikasi Asli Bereaksi

Sebagian besar mesin JavaScript mengurai semua kode sumber JavaScript menggunakan sistem kompilasi JIT (Just in Time). Sistem JIT memperlambat eksekusi karena perangkat Anda harus menunggu seluruh proses kompilasi selesai. Hermes menggunakan pendekatan kompilasi sebelumnya (AOT), mentransfer sebagian besar pekerjaan mesin JavaScript tugas berat untuk membangun waktu.

Hermes terutama mempengaruhi tiga metrik kinerja aplikasi: aplikasi TTI (Time to Interactive), ukuran biner, dan penggunaan memori.

Saatnya Interaktif

TTI adalah waktu yang dibutuhkan aplikasi untuk memuat dan mendukung interaksi pengguna seperti menggulir atau mengetik. Hermes meningkatkan TTI rata-rata untuk aplikasi React Native dibandingkan dengan mesin JavaScript lainnya.

Pengurangan TTI ini karena Hermes tidak menjalankan compiler JIT.

Ukuran Biner

Ukuran biner adalah ukuran aplikasi React Native yang dibundel. Aplikasi Android menggunakan format file APK , sedangkan aplikasi iOS menggunakan format panggilan Apple IPA. Menggunakan Hermes secara signifikan mengurangi ukuran aplikasi pada perangkat Android.

Penggunaan Memori

Penggunaan memori adalah metrik penting lainnya untuk dioptimalkan dalam aplikasi. Pengalaman pengguna aplikasi akan terpengaruh secara negatif jika menggunakan terlalu banyak memori. Hermes mengimplementasikan sistem Pengumpul Sampah yang mengatur penggunaan memori sesuai permintaan, memastikan aplikasi hanya menggunakan ruang memori yang dibutuhkan saat berjalan.

Debugging React Native Dengan Hermes dan Chrome DevTools

Hermes hadir dengan pengalaman baru untuk men-debug aplikasi React Native yang berjalan pada emulator, simulator, atau perangkat fisik menggunakan Expo. Hermes mendukung debugging aplikasi React Native menggunakan Protokol Inspektur Chrome DevTools. Anda tidak harus bingung ini dengan tradisional Debug JavaScript menggunakan konsol browser .

Untuk mengonfigurasi Chrome untuk men-debug aplikasi Hermes, ikuti langkah-langkah ini.

  1. Navigasi ke chrome://periksa di dalam browser Chrome Anda.
  2. Klik pada Konfigurasikan tombol.
  3. Di dalam modal di layar, masukkan alamat server untuk bundel metro yang menjalankan aplikasi React Native Anda dan klik Selesai .

Anda sekarang dapat men-debug aplikasi React Native Anda menggunakan tautan inspeksi target Hermes.

Mengapa Hermes Dioptimalkan Hanya untuk Bereaksi Asli

Performa optimal Hermes sebagai mesin JavaScript React Native sebagian disebabkan oleh lingkungan runtime-nya. Di React Native, Anda menggabungkan semua kode JavaScript di dalam lingkungan aplikasi. Sistem ini membuat pengiriman bytecode menjadi efisien.

Faktor lain yang perlu dipertimbangkan adalah jumlah pekerjaan yang dilakukan selama kompilasi JavaScript. Hermes mengelola interaksi pengguna yang sering diantisipasi dari aplikasi seluler sambil menghindari pengoptimalan bytecode yang agresif. Mesin JavaScript kompiler JIT tidak akan melakukan tugas dengan cara ini.