ماذا تتوقع من محرك Hermes في React Native 0.70

ماذا تتوقع من محرك Hermes في React Native 0.70
القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة.

تم إصدار React Native 0.70 ، و Hermes هو محرك JavaScript الافتراضي الجديد الذي يتم شحنه مع هذا التحديث. إليك ما يمكن توقعه من Hermes وبعض الميزات التي ستؤثر على أداء تطبيق React Native الخاص بك.





كيفية الحصول على نظام التشغيل Mac OS على نظام التشغيل windows

ما هو هيرميس؟

Hermes هو محرك JavaScript مفتوح المصدر يعمل على تحسين الأداء أثناء تشغيل تطبيقات iOS و Android عن طريق الترجمة المسبقة لرمز JavaScript إلى رمز ثانوي فعال وتقليل استخدام ذاكرة التطبيق.



اجعل فيديو اليوم

تحديث الإصدارات القديمة من React الأصلية لدعم Hermes

تطبيقات React الأصلية التي تعمل على 0.70 ستمكّن Hermes افتراضيًا. بالنسبة لتطبيقات React Native الأقدم ، يأتي إصدار Hermes مع كل إصدار React Native بدءًا من الإصدار 0.60.4 لإصدارات Android والإصدار 0.64.0 لنظام iOS. تزيل الإصدارات المطابقة مخاطر عدم تطابق التبعية في تطبيق React Native الخاص بك.





لتمكين Hermes في هذه الإصدارات القديمة من React Native ، ستحتاج إلى إضافة بعض التكوين لكل من تطبيقات Android و iOS.

على Android ، قم بتحرير ملف android / app / build.gradle ملف:



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

على نظام iOS ، يمكنك إجراء التغييرات التالية على ملف ios / Podfile :

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

يتطلب iOS منك تثبيت بودات Hermes بعد تكوين الإعدادات.



قم بتشغيل الأمر التالي لتثبيت البودات:

كيف يمكنني رؤية الرسائل المحذوفة في الفيسبوك 
cd ios && pod install

تمكين هيرميس مع المعرض

يمكنك أيضًا استخدام محرك Hermes لتطبيقات React Native التي تم إنشاؤها أو تشغيلها باستخدام Expo. تدعم مكتبة Expo Hermes من إصدار SDK 42 على Android و SDK الإصدار 43 على iOS إلى الإصدار الحالي 0.70. من المهم ملاحظة أن التطبيقات المستقلة لا يمكنها تشغيل Hermes ما لم يتم إنشاؤها باستخدام Expo Application Services Build.



لتمكين Hermes في تطبيق React Native ، قم بتحرير ملف app.json ملف:

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

الآن سيتم تمكين Hermes لتطبيقك الذي تم إنشاؤه باستخدام Expo Application Services ليكون محرك JavaScript الخاص به.

تحسين أداء Hermes للتطبيقات الأصلية للتفاعل

تقوم معظم محركات JavaScript بتحليل جميع التعليمات البرمجية المصدر لـ JavaScript باستخدام نظام تجميع JIT (في الوقت المناسب). يعمل نظام JIT على إبطاء التنفيذ لأن جهازك يجب أن ينتظر حتى تكتمل عملية الترجمة بالكامل. يستخدم Hermes أسلوب التجميع المسبق (AOT) ، حيث يقوم بنقل معظم أعمال محرك JavaScript الشاقة لبناء الوقت.

تؤثر Hermes بشكل أساسي على ثلاثة مقاييس لأداء التطبيق: تطبيق TTI (وقت التفاعل) ، والحجم الثنائي ، واستخدام الذاكرة.

حان الوقت للتفاعل

TTI هو الوقت الذي يستغرقه التطبيق لتحميل ودعم تفاعل المستخدم مثل التمرير أو الكتابة. تعمل Hermes على تحسين متوسط ​​TTI لتطبيقات React Native مقارنة بمحركات JavaScript الأخرى.

هذا التخفيض في TTI لأن Hermes لا يقوم بتشغيل مترجم JIT.

الحجم الثنائي

الحجم الثنائي هو حجم تطبيق React Native المجمّع. تستخدم تطبيقات Android ملف تنسيق ملف APK ، بينما تستخدم تطبيقات iOS تنسيقًا تستدعيه Apple IPA. يؤدي استخدام Hermes إلى تقليل حجم التطبيق بشكل كبير على أجهزة Android.

استخدام الذاكرة

يعد استخدام الذاكرة مقياسًا مهمًا آخر لتحسين التطبيقات. ستتأثر تجربة مستخدم التطبيق سلبًا إذا كان يستخدم قدرًا كبيرًا من الذاكرة. تطبق Hermes نظام Garbage Collector الذي ينظم استخدام الذاكرة عند الطلب ، مما يضمن أن التطبيق يستخدم مساحة الذاكرة المطلوبة فقط أثناء التشغيل.

تصحيح أخطاء React Native باستخدام Hermes و Chrome DevTools

تأتي Hermes بتجربة جديدة لتصحيح أخطاء تطبيقات React Native التي تعمل على محاكي أو جهاز محاكاة أو جهاز مادي باستخدام Expo. يدعم Hermes تصحيح أخطاء تطبيقات React الأصلية باستخدام بروتوكول Inspector الخاص بـ Chrome DevTools. يجب ألا تخلط بين هذا والتقليدي تصحيح أخطاء جافا سكريبت باستخدام وحدة تحكم المتصفح .

كيف تصبح مراجع كرمة

لتكوين Chrome لتصحيح أخطاء تطبيقات Hermes ، اتبع هذه الخطوات.

  1. انتقل إلى الكروم: // فحص داخل متصفح Chrome.
  2. اضغط على تهيئة زر.
  3. داخل النموذج الذي يظهر على الشاشة ، أدخل عنوان الخادم لحزمة metro التي تشغل تطبيق React Native وانقر فعله .

يمكنك الآن تصحيح أخطاء تطبيق React Native الخاص بك باستخدام رابط الفحص الهدف من Hermes.

لماذا تم تحسين Hermes للتفاعل المحلي فقط

يعود الأداء الأمثل لـ Hermes كمحرك React Native JavaScript جزئيًا إلى بيئة وقت التشغيل. في React Native ، تقوم بتجميع كل أكواد JavaScript داخل بيئة التطبيق. هذا النظام يجعل الشحن عن طريق الرمز الثانوي فعالاً.

هناك عامل آخر يجب مراعاته وهو مقدار العمل المنجز أثناء تجميع JavaScript. تدير Hermes تفاعل المستخدم المتكرر المتوقع لتطبيقات الهاتف المحمول مع تجنب التحسين العدواني للرمز الثنائي. لن يؤدي محرك JavaScript مترجم JIT المهام بهذه الطريقة.