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-নিবিড় অপারেশনে সুবিধা দেয়। একটি সাধারণ 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-তে ফallback)');
}