Hermes: الميزات والتحسين لتطبيقات React Native

ما هو Hermes؟

Hermes هو محرك JavaScript صغير الحجم أنشأه فريق Meta خصيصاً لتطبيقات React Native. تم الإعلان عنه في 2019 كبديل لـ JavaScriptCore (JSC)، الذي كان يُستخدم افتراضياً في React Native. الهدف الرئيسي لـ Hermes هو توفير أسرع بدء ممكن للتطبيقات المحمولة، خاصة على Android ذي الموارد المحدودة.

الميزة الرئيسية لـ Hermes هي التجميع المسبق (AOT — Ahead-of-Time). على عكس محركات JS التقليدية التي تجمع الكود في وقت التشغيل (JIT — Just-in-Time)، يقوم Hermes بتجميع JavaScript إلى بايت كود أثناء مرحلة بناء التطبيق. هذا يعني عدم حدوث تجميع على الجهاز — يتم تنفيذ البايت كود فوراً بواسطة الآلة الافتراضية لـ Hermes.

Hermes ليس محرك JS عالمي — فهو مُحسَّن حصرياً لسيناريوهات React Native. يفتقر إلى ميزات غير مطلوبة في التطوير المحمول: eval، المولدات (generators)، وبعض ميزات ES6. هذا يسمح بجعل المحرك أكثر صغراً وسرعة. وفقاً لـ Meta، يبلغ حجم Hermes حوالي 200–300 كيلوبايت مضغوطاً، وهو أصغر بكثير من JSC (حوالي 2–3 ميغابايت).

بنية Hermes والبايت كود

تختلف بنية Hermes عن محركات JS التقليدية بعدم وجود مترجم JIT. بدلاً من ذلك، يستخدم Hermes آلة افتراضية (VM) فعالة تنفذ بايت كود مُجمَّع مسبقاً. التخلي عن JIT يوفر ثلاث مزايا رئيسية: أداء قابل للتنبؤ، استهلاك أقل للذاكرة، وتقليل وقت البدء.

البايت كود لـ Hermes هو تمثيل مضغوط لكود JavaScript مُحسَّن للتنفيذ السريع. أثناء مرحلة البناء (عبر Metro)، يتم تجميع ملفات JavaScript إلى ملفات .hbc (Hermes Bytecode). يقوم التطبيق بتحميل هذه الملفات، وتقوم VM Hermes بتنفيذها دون تجميع إضافي. عملية البناء مدمجة في Metro عبر إضافة hermes-transformer.

مراحل معالجة الكود

يتكون تدفق معالجة JavaScript في Hermes من ثلاث مراحل: Parse — التحليل النحوي للكود المصدري، Compile — الترجمة إلى بايت كود، Execute — تنفيذ البايت كود بواسطة الآلة الافتراضية. يتم تنفيذ المرحلتين الأوليين أثناء مرحلة البناء، والثالثة على الجهاز. وهذا يختلف جوهرياً عن JSC، حيث يتم تنفيذ المراحل الثلاث على الجهاز.

# تجميع بايت كود Hermes أثناء البناء
hermes -emit-binary -out index.hbc index.js

# التحقق من حجم البايت كود المُنشأ
ls -lh index.hbc

# عرض إحصائيات البايت كود
hermes -dump-bytecode index.hbc

# تحسين البايت كود للإنتاج
hermes -O index.js -emit-binary -O target.hbc

بعد التجميع، يتم تعبئة جميع ملفات .hbc في APK أو IPA مع الكود الأصلي. عند بدء التطبيق، تقوم VM Hermes بتحميل البايت كود وتبدأ التنفيذ فوراً تقريباً — لا حاجة لوقت إحماء JIT، وهو أمر معتاد لـ V8 و JSC.

Hermes ضد JSC: مقارنة

مقارنة Hermes و JavaScriptCore (JSC) تساعد في فهم متى تختار أي محرك. JSC هو محرك JS كامل من Apple، يُستخدم في Safari. Hermes هو محرك متخصص لتطبيقات React Native. يعتمد الاختيار بينهما على أولويات المشروع.

يتفوق Hermes في سرعة البدء واستهلاك الذاكرة لكنه يتخلف عن JSC في أداء العمليات الحسابية المعقدة. تجميع JIT لـ JSC يُحسِّن مسارات الكود الساخنة أثناء التنفيذ، مما يمنحه ميزة في العمليات كثيفة المعالجة (CPU). لتطبيق React Native النموذجي، حيث تشكل تحديثات واجهة المستخدم والتنقل عبء العمل الرئيسي، يوفر Hermes تجربة مستخدم أفضل بفضل البدء السريع.

تحسينات Hermes لتطبيقات React Native

يتضمن Hermes العديد من التحسينات الخاصة بـ React Native. وأهمها التكامل مع JSI (JavaScript Interface). يدعم Hermes JSI بشكل أصلي، مما يسمح باستخدام بنية React Native الجديدة (Fabric + Turbo Modules) بدون طبقات إضافية. وهذا يجعل Hermes والبنية الجديدة الثنائي المثالي لأقصى أداء.

إدارة الذاكرة

يستخدم Hermes جامع القمامة بالأجيال (generational GC) المُحسَّن للأجهزة المحمولة. على عكس JSC، حيث يمكن أن يتسبب جمع القمامة في توقف ملحوظ لواجهة المستخدم (jank)، يقوم Hermes بتنفيذ GC بكميات صغيرة بين الإطارات، مما يقلل التأثير على تجربة المستخدم. وفقاً لـ Meta، فإن فترات توقف GC في Hermes أقصر بمقدار 2–3 مرات من JSC في سيناريوهات React Native النموذجية.

التحميل البطيء والثوابت

يدعم Hermes التحميل البطيء للوحدات النمطية — يتم تجميع وحدة JavaScript فقط عندما تكون مطلوبة فعلياً. هذا يقلل حجم البايت كود ويسرع البدء. بالإضافة إلى ذلك، يقوم Hermes بتقييم التعبيرات الثابتة في وقت التجميع، مستبدلاً استدعاءات الدوال بقيم ثابتة حيثما أمكن.

// مثال تحسينات Hermes الخاصة

// 1. Hermes يدمج التعبيرات الثابتة
const TAX_RATE = 0.07;
const price = 100;
// Hermes يحسب مسبقاً: TAX_RATE * price أثناء التجميع
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes يُحسِّن سلاسل الوصول إلى الخصائص
const config = { api: { timeout: 5000 } };
// Hermes يخزن الوصول إلى config.api داخلياً مؤقتاً
const timeout = config.api.timeout;
fetch(url, { timeout });

من المهم ملاحظة أن Hermes يدعم التصحيح عبر Chrome DevTools (بدءاً من Hermes 0.12). يمكن للمطورين استخدام أدوات مألوفة: نقاط التوقف، تحديد أداء الذاكرة، فحص المتغيرات. هذا يلغي أحد الاعتراضات الرئيسية على Hermes في الإصدارات المبكرة، حيث كان التصحيح محدوداً.

إعداد Hermes في مشروع React Native

يعتمد إعداد Hermes على إصدار React Native. بدءاً من React Native 0.70، يتم تمكين Hermes افتراضياً للمشاريع الجديدة. للمشاريع المنشأة سابقاً، أو عند التبديل بين المحركات، يتم التكوين عبر إعدادات البناء.

إعداد Android

لـ Android، يتم تمكين Hermes في ملف android/app/build.gradle عبر العلم hermesEnabled. لـ iOS، يتم التكوين في Podfile عبر المتغير :hermes_enabled. بعد تغيير التكوين، تحتاج إلى إعادة تثبيت الـ pods وإعادة بناء المشروع.

// android/app/build.gradle — تمكين Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — تمكين Hermes
hermes_enabled = true
pod 'hermes-engine'

للتحقق من أن Hermes يعمل في تطبيقك، قم بتشغيل adb logcat | grep Hermes على Android أو افحص وحدة تحكم Xcode على iOS. عند بدء التطبيق، يخرج Hermes رسالة مثل «Hermes VM initialized» أو ما شابه. يمكنك أيضاً التحقق من globalThis.HermesInternal في كود JavaScript — إذا كان Hermes نشطاً، ستكون هذه الخاصية متاحة.

// التحقق من تشغيل Hermes
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ محرك Hermes نشط');
  console.log(
    'الإصدار:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes غير نشط (رجوع إلى JSC)');
}