Hermes Engine សម្រាប់ React Native

សួស្ដី! ថ្ងៃនេះត្រលប់មកជាថ្មីជាមួយនឹងអត្ថបទ​ថ្មីមួយដោយខ្ញុំបាទ។ ថ្ងៃនេះយើង​មកមើលពីរឿងល្អថ្មីមួយសម្រាប់ React Native។ បើអ្នកទាំងអស់គ្នាបានអានអត្ថបទ​ពីមុនៗ​របស់ខ្ញុំ ក៏ប្រហែលជាដឹងដែរហើយថាខ្ញុំជា React Native Developer ម្នាក់ដែរ។ មែនទែនទៅការងារពេញផ្លូវការដំបូងដែលខ្ញុំបានធ្វើនោះជា Project ដែល​សរសេរដោយ React Native។ ការងារជាច្រើនដែលខ្ញុំបានធ្វើ ហើយ​មក​ទល់សព្វថ្ងៃក៏នៅមាន Project ដែលសរសេរដោយ React Native ដែរ។ ពេលថ្មីៗនេះផងដែរ​ ខ្ញុំបានឃើញរឿងល្អមួយដែលមានឡើងសម្រាប់ React Native នោះគឺ Hermes Engine។ អញ្ចឹងថ្ងៃនេះយើងគួរតែនិយាយគ្នាបន្តិច ក៏ដូចជាសាកល្បង ប្រើ Hermes Engine សម្រាប់កម្មវិធីដែល​សរសេរដោយ React Native ទាំងអស់គ្នា។

Hermes Illustrations

ប្រភព​រូបភាព៖ callstack.com

Hermes Engine ជាអ្វី?

យើងដឹងហើយថាយើងសរសេរ React Native ដោយប្រើភាសាចាវ៉ាស្ក្រីបត៍ ហើយដើម្បីអាចដំណើរការចាវ៉ាស្ក្រីបត៍លើម៉ាស៊ីនណាមួយបាននោះយើងត្រូវការ Engine ដើម្បីបកប្រែភាសាស្ក្រីបត៍ (ចាវ៉ាស្ក្រីបត៍) មកជា bytecode សិនទើបអាចរាន់វាបាន។ ហើយសព្វថ្ងៃនេះ JavaScript Engine ដែល React Native ប្រើនោះគឺទីមួយ JavaScriptCore ដែលជាផ្នែកមួយនៃ Webkit សម្រាប់ប្រៅស័រ Safari និងទីពីរ V8 ដែរដែលជាចាវ៉ាស្ក្រីបត៍ Engine នៅពីក្រោយ Chrome និង Node.js សម្រាប់ពេល Debug React Native លើ Chrome។

Hermes is an optimized JavaScript engine for React Native.”។ ហ្នឹងហើយវាជា JavaScript Engine មួយប្រភេពទៀតដែលវាត្រូវបានគេសេរសេឡើងមកដោយ Facebook សម្រាប់ React Native តែម្ដង។ វាជា Engine សម្រាប់បកប្រែភាសាចាវ៉ាស្ក្រីបត៍ជា bytecode ប្រភេទស្រដៀងគ្នានឹង JavaScriptOne និង V8 ដែរ។ ចាប់តាំងពី React Native កំណែរ 0.60.4 មក Facebook បានបើកឲ្យយើងអាចកំណត់យក Hermes Engine ជំនួស Engine ដែលមាន​មកស្រាប់ជាមួយ React Native។

ជាទូទៅ JavaScript Engine បកប្រែភាសាចាវ៉ាស្ក្រីបត៍ទៅជា bytecode បន្ទាប់ពីវាឡូដចាវ៉ាស្ក្រីបត៍ហើយនៅ runtime។ ការដែលត្រូវធ្វើបែបនេះ វាត្រូវខាតពេលបន្តិចមុននឹងកូដអាចរាន់បាន។ ដើម្បីកាត់បន្ថយពេលដែលកូដអាចរាន់បាន Hermes ប្រើវីធី AOT (Ahead of Time) ជំនួស JIT (Just in Time) ដែលដំណើរការពេលដែលយើង build កម្មវិធីដែលធ្វើឲ្យ bytecode មានទំហំតូចជាងមុន និងដើរបានលឿនជាងមុនដោយកាត់ជំហ៊ានដែលត្រូវ parse ស្ក្រីបត៍ច៉ាវ៉ាស្ក្រីបត៍ចេញ។

ហេតុអ្វី Hermes Engine?

ដូចបាននិយាយខាងលើហើយ JavaScriptCore ដែលជា Default JavaScript Engine សម្រាប់ React Native នោះជា Engine ដែលគេសរសេរឡើង​មក​សម្រាប់ប្រៅស័រ អ៊ីចឹងហើយចង់មិនចង់វាមានចំនុចច្រើនដែលវាដំណើរការមិនបានល្អឡើយពេល​យក​មកប្រើសម្រាប់សរសេរ App នោះ។ បើងាក​មកមើល Hermes វិញ គេសរសេរវាឡើង​មក​សម្រាប់ React Native តែម្ដង។ វាបានន័យថាវានឹងដំណើរបានល្អជាង JavaScriptCore ហើយសម្រាប់ React Native នោះ។

កម្មវិធីដែលរើសយក Hermes Engine មានអត្ថប្រយោជន៍ដូចជា៖

  • បើកបានលឿនជាងមុន (TTI - Time to interaction)
  • ទំហំកម្មវិធីអាចនឹងតូចជាមុន (Application Size)
  • ប្រើម៉េមម៉ូរីតិចជាមុនពេលដំណើរការ (Memory utilization)

Hermes Stats

ប្រភព​រូបភាព៖ FB Engineering

តែទន្ទឹមនឹងការបើកឲ្យប្រើនេះផងដែរ ចូរចាំថាវានៅថ្មីនៅឡើយ ហើយ Hermes ក៏មិនទាន់ក្លាយជា Default JavaScript Engine សម្រាប់ React Native ដែរ។ បើកម្មវិធីដែលអ្នក​សរសេរ​មកមានមុខងារច្រើនហើយ វាអាចនឹងមានបញ្ហានៅឡើយក៏ថាបានពេលយើងដូរ​មកប្រើ Hermes Engine។

បើកដំណើរការ Hermes Engine

Hermes ដំបូងឡើយត្រូបានគេបើកឲ្យប្រើសម្រាប់តែ Android ប៉ុណ្ណោះចាប់តាំងពី React Native កំណែ 0.60.4 មកម្ល៉េះ។​ ទើបតែកាលពីថ្មីៗនេះទើបគេអាចបើកវាឲ្យប្រើលើ iOS បានដែរនៅកំណែ 0.64.0 ដោយមានការសហការពីក្រុមវិស្វករ Callstack, Facebook និង Microsoft

ដើម្បីបើកប្រើ Hermes Engine បានសម្រាប់ Project ថ្មី វាងាយស្រួលមែនទែន យើងគ្រាន់តែធ្វើការផ្លាស់ប្ដូរមួយចំនួនដូចខាងក្រោមនេះ៖

Android

នៅលើ Android យើងបើកដោយរើសយកជម្រើស Hermes នៅក្នុងហ្វាល់ android/app/build.gradle ដូចខាងក្រោម

  project.ext.react = [
      entryFile: "index.js",
      // ដើម្បីបើកប្ដូរពី false មក true បន្ទាប់មក clean ហើយ rebuild
-     enableHermes: false
+     enableHermes: true
  ]

បើសិនយើងប្រើ ProGuard យើងត្រូវថែមពីរបន្ទាត់នេះនៅក្នុង proguard-rules.pro

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

បន្ទាប់មកនៅក្នុង Project Android យើងរាន់ ./gradlew clean និងរាន់ Project React Native npx react-native run-android សារជាថ្មីជាការស្រេច (បើមិន Crash App យើងទេ 😂)!

iOS

នៅលើ iOS ដូចគ្នាដែរ យើងគ្រាន់តែបើក Hermes ក្នុង ios/Podfile ដូចខាងក្រោម

   use_react_native!(
     :path => config[:reactNativePath],
     # ដើម្បីបើកប្ដូរពី false មក true បន្ទាប់មករាន់ pod install
-    :hermes_enabled => false
+    :hermes_enabled => true
   )

បន្ទាប់មកនៅក្នុង Project iOS យើងគ្រាន់តែរាន់ pod install និងរាន់ Project React Native npx react-native run-ios សារជាថ្មីជាការស្រេច។

សម្រាប់ Project ចាស់

សម្រាប់ Project ចាស់ៗដែលយើងមានស្រាប់ យើងត្រូវអាបដេតកំណែ React Native មកជំនាន់យ៉ាងទាបបំផុត 0.64 សិនទើបយើងអាចបើកប្រើ Hermes Engine បាន។ ក្នុងការតម្លើងកំណែនេះផងដែរ ខ្ញុំជឿថាយើងអាចនឹងជួបបញ្ហាច្រើន។ ជាគន្លឺះនោះ ខ្ញុំណែនាំឲ្យប្រើ React Native Upgrade Helper ដែលបង្កើតឡើងដោយ React Native Community ជាជំនួយ។

ដំបូងយើងទៅកាន់វែបសាយ https://react-native-community.github.io/upgrade-helper រួចយើងរើសយកកំណែចាស់របស់យើង និងកំណែថ្មីដែលយើងចង់បាន។ វានឹងបង្ហាញយើងថាយើងត្រូវកែរកូដត្រង់ណាខ្លះដែលយើងអាចធ្វើតាមបាន។

React Native Upgrade Helper

ប្រភព​៖ React Native Upgrade Helper

សរុបសេចក្ដី

ខ្ញុំបានចាប់ផ្ដើមសរសេរ React Native យូរគួរសមដែរហើយ ហើយមកទល់សព្វថ្ងៃនេះខ្ញុំនៅតែចូលចិត្តវាដោយវាមានចេញរបស់ថ្មីឺមកជារឿយៗដែលជារឿងល្អ។ សម្រាប់ Hermes Engine នេះផងដែរ វាជារឿងល្អមែនទែនដែលវាបានជួយ និងនឹងជួយឲ្យ Application ដែលសរសេរដោយ React Native មានសក្តានុពលកាន់តែខ្លាំងថែមទៀត។ ខ្ញុំក៏សង្ឃឹមផងដែរថាវានឹងក្លាយជា Default JavaScript Engine សម្រាប់ React Native ក្នុងពេលឆាប់ៗនេះ។

សូមអរគុណដែលបានអានអត្ថបទមួយនេះ ហើយបើអាចសូមចូលរួមក្នុងឆានែលតេលេក្រាមរបស់ខ្ញុំ ក៏ដូចជាតាមដានគណនីថ្វីទ័រ Daseveny ដែលយើងអាចជែកគ្នា សួរនាំគ្នាបាន ក៏ដូចជាផ្ដល់ជាយោបលមតិផ្សេងៗផងដែរ។

👉 គណនីថ្វីទ័រ៖ https://twitter.com/daseveny
👉 ឆានែលតេលេក្រាម៖ https://t.me/daseveny

យោង៖
ចែករំលែក៖
រូបភាពជ្រើសរើស
កំពុងឡូដ...
អត្ថបទ​ថ្មីៗ
Article's thumbnail

គំនូរសិល្បៈឌីជីថលដែលមានតម្លៃជិត 70 លានដុល្លា

Article's thumbnail

Hermes Engine សម្រាប់ React Native

Article's thumbnail

ការប្រើប្រាស់ Dependency ក្នុងការ​សរសេរសូហ្វវែរ៍

Article's thumbnail

លាហើយបណ្ដាញសង្គម

Article's thumbnail

រឿងដែលកំពុងតែកើតឡើងមកលើ Intel

You've reached singularity, the beginning of time!