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، جنریٹرز، اور کچھ ES6 خصوصیات۔ یہ انجن کو مزید کمپیکٹ اور تیز بناتا ہے۔ Meta کے مطابق، Hermes کا سائز کمپریسڈ حالت میں تقریباً 200–300 KB ہے، جو JSC (تقریباً 2–3 MB) سے نمایاں طور پر چھوٹا ہے۔

Hermes کا آرکیٹیکچر اور بائٹ کوڈ

Hermes کا آرکیٹیکچر JIT کمپائلر کی عدم موجودگی میں روایتی JS انجنوں سے مختلف ہے۔ اس کے بجائے، Hermes ایک موثر ورچوئل مشین (VM) استعمال کرتا ہے جو پہلے سے کمپائل شدہ بائٹ کوڈ پر عمل کرتی ہے۔ JIT کو ترک کرنے سے تین اہم فوائد حاصل ہوتے ہیں: پیش قیاسی کارکردگی، کم میموری استعمال، اور کم شروع ہونے کا وقت۔

Hermes بائٹ کوڈ JavaScript کوڈ کی ایک کمپیکٹ نمائندگی ہے جو تیز عملدرآمد کے لیے موزوں ہے۔ بلڈ مرحلے (Metro کے ذریعے) کے دوران، JavaScript فائلیں .hbc (Hermes Bytecode) فائلوں میں کمپائل ہوتی ہیں۔ ایپ ان فائلوں کو لوڈ کرتی ہے، اور Hermes VM بغیر اضافی کمپائلیشن کے ان پر عمل کرتی ہے۔ بلڈ کا عمل hermes-transformer پلگ ان کے ذریعے Metro میں ضم ہے۔

کوڈ پروسیسنگ کے مراحل

Hermes میں JavaScript پروسیسنگ کا بہاؤ تین مراحل پر مشتمل ہے: 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 میں پیک ہو جاتی ہیں۔ جب ایپ شروع ہوتی ہے، Hermes VM بائٹ کوڈ لوڈ کرتی ہے اور تقریباً فوری طور پر عملدرآمد شروع کر دیتی ہے — JIT وارم اپ وقت کی ضرورت نہیں ہے، جو V8 اور JSC کے لیے عام ہے۔

Hermes بمقابلہ JSC: موازنہ

Hermes اور JavaScriptCore (JSC) کا موازنہ یہ سمجھنے میں مدد دیتا ہے کہ کب کون سا انجن منتخب کرنا ہے۔ JSC Apple کا مکمل خصوصیات والا JS انجن ہے، جو Safari میں استعمال ہوتا ہے۔ Hermes React Native کے لیے ایک خصوصی انجن ہے۔ ان کے درمیان انتخاب پروجیکٹ کی ترجیحات پر منحصر ہے۔

Hermes شروع ہونے کی رفتار اور میموری استعمال میں جیتتا ہے لیکن پیچیدہ حسابات کی کارکردگی میں JSC سے پیچھے ہے۔ JSC کی JIT کمپائلیشن عملدرآمد کے دوران ہاٹ کوڈ پاتھ کو بہتر بناتی ہے، جس سے CPU-heavy آپریشنز میں فائدہ ہوتا ہے۔ ایک عام React Native ایپ کے لیے، جہاں UI اپ ڈیٹس اور نیویگیشن بنیادی کام کا بوجھ بناتے ہیں، Hermes تیز شروع ہونے کے ذریعے بہتر صارف تجربہ فراہم کرتا ہے۔

React Native کے لیے Hermes کی اصلاح

Hermes میں React Native کے لیے مخصوص کئی اصلاحیں شامل ہیں۔ سب سے اہم JSI (JavaScript Interface) کے ساتھ انضمام ہے۔ Hermes JSI کو مقامی طور پر سپورٹ کرتا ہے، جس سے اضافی پرتوں کے بغیر نئے React Native آرکیٹیکچر (Fabric + Turbo Modules) کا استعمال ممکن ہوتا ہے۔ یہ Hermes اور نئے آرکیٹیکچر کو زیادہ سے زیادہ کارکردگی کے لیے مثالی جوڑی بناتا ہے۔

میموری کا انتظام

Hermes موبائل آلات کے لیے موزوں جنریشنل گاربیج کلکٹر (generational GC) استعمال کرتا ہے۔ JSC کے برعکس، جہاں گاربیج کلکشن UI میں نمایاں وقفے (jank) کا سبب بن سکتی ہے، Hermes فریموں کے درمیان چھوٹے حصوں میں GC انجام دیتا ہے، صارف کے تجربے پر اثر کو کم سے کم کرتا ہے۔ Meta کے مطابق، عام React Native منظرناموں میں Hermes میں GC وقفے JSC کے مقابلے میں 2–3 گنا چھوٹے ہیں۔

سست لوڈنگ اور مستقل

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 کے خلاف ایک اہم اعتراض کو ختم کرتا ہے، جہاں ڈیبگنگ محدود تھی۔

React Native پروجیکٹ میں Hermes کا سیٹ اپ

Hermes کا سیٹ اپ React Native ورژن پر منحصر ہے۔ React Native 0.70 سے، Hermes نئے پروجیکٹس کے لیے طے شدہ طور پر فعال ہے۔ پہلے بنائے گئے پروجیکٹس کے لیے، یا انجنوں کے درمیان سوئچ کرتے وقت، کنفیگریشن بلڈ سیٹنگز کے ذریعے کی جاتی ہے۔

Android سیٹ اپ

Android کے لیے، Hermes android/app/build.gradle فائل میں hermesEnabled فلیگ کے ذریعے فعال کیا جاتا ہے۔ iOS کے لیے، کنفیگریشن Podfile میں :hermes_enabled متغیر کے ذریعے کی جاتی ہے۔ کنفیگریشن تبدیل کرنے کے بعد، آپ کو پوڈز دوبارہ انسٹال کرنے اور پروجیکٹ دوبارہ بلڈ کرنے کی ضرورت ہے۔

// android/app/build.gradle — Hermes فعال کریں
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — Hermes فعال کریں
hermes_enabled = true
pod 'hermes-engine'

یہ تصدیق کرنے کے لیے کہ آپ کی ایپ میں Hermes چل رہا ہے، Android پر adb logcat | grep Hermes چلائیں یا iOS پر Xcode کنسول چیک کریں۔ جب ایپ شروع ہوتی ہے، Hermes “Hermes VM initialized” جیسا پیغام دکھاتا ہے۔ آپ JavaScript کوڈ میں globalThis.HermesInternal بھی چیک کر سکتے ہیں — اگر Hermes فعال ہے، تو یہ پراپرٹی دستیاب ہوگی۔

// چیک کریں کہ Hermes چل رہا ہے یا نہیں
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes انجن فعال');
  console.log(
    'ورژن:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes فعال نہیں (JSC پر فال بیک)');
}