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 σε bytecode ήδη στο στάδιο κατασκευής της εφαρμογής. Αυτό σημαίνει ότι στη συσκευή δεν πραγματοποιείται μεταγλώττιση — το bytecode εκτελείται αμέσως από την εικονική μηχανή Hermes.

Το Hermes δεν είναι καθολική μηχανή JS — είναι βελτιστοποιημένο αποκλειστικά για σενάρια React Native. Του λείπουν δυνατότητες που δεν απαιτούνται στην ανάπτυξη κινητών: eval, generators, ορισμένα χαρακτηριστικά ES6. Αυτό επιτρέπει να γίνει η μηχανή πιο συμπαγής και ταχύτερη. Σύμφωνα με τη Meta, το μέγεθος του Hermes είναι περίπου 200–300 KB σε συμπιεσμένη μορφή, το οποίο είναι σημαντικά μικρότερο από το JSC (περίπου 2–3 MB).

Αρχιτεκτονική Hermes και bytecode

Η αρχιτεκτονική του Hermes διαφέρει από τις παραδοσιακές μηχανές JS λόγω της απουσίας μεταγλωττιστή JIT. Αντ’ αυτού, το Hermes χρησιμοποιεί μια αποδοτική εικονική μηχανή (VM) που εκτελεί εκ των προτέρων μεταγλωττισμένο bytecode. Η παραίτηση από το JIT προσφέρει τρία βασικά πλεονεκτήματα: προβλέψιμη απόδοση, χαμηλότερη κατανάλωση μνήμης και μείωση του χρόνου εκκίνησης.

Το bytecode Hermes είναι μια συμπαγής αναπαράσταση κώδικα JavaScript, βελτιστοποιημένη για γρήγορη εκτέλεση. Στο στάδιο κατασκευής (μέσω Metro), τα αρχεία JavaScript μεταγλωττίζονται σε αρχεία .hbc (Hermes Bytecode). Η εφαρμογή φορτώνει αυτά τα αρχεία και η VM Hermes τα εκτελεί χωρίς πρόσθετη μεταγλώττιση. Η διαδικασία κατασκευής ενσωματώνεται στο Metro μέσω του πρόσθετου hermes-transformer.

Στάδια επεξεργασίας κώδικα

Η διαδικασία επεξεργασίας JavaScript στο Hermes αποτελείται από τρία στάδια: Parse — συντακτική ανάλυση του πηγαίου κώδικα, Compile — μετάφραση σε bytecode, Execute — εκτέλεση bytecode από την εικονική μηχανή. Τα πρώτα δύο στάδια εκτελούνται στο στάδιο κατασκευής, το τρίτο — στη συσκευή. Αυτό διαφέρει ριζικά από το JSC, όπου και τα τρία στάδια εκτελούνται στη συσκευή.

# Μεταγλώττιση bytecode Hermes κατά την κατασκευή
hermes -emit-binary -out index.hbc index.js

# Ελέγξτε το μέγεθος του παραγόμενου bytecode
ls -lh index.hbc

# Εμφάνιση στατιστικών bytecode
hermes -dump-bytecode index.hbc

# Βελτιστοποίηση bytecode για παραγωγή
hermes -O index.js -emit-binary -O target.hbc

Μετά τη μεταγλώττιση, όλα τα αρχεία .hbc συσκευάζονται σε APK ή IPA μαζί με τον εγγενή κώδικα. Κατά την εκκίνηση της εφαρμογής, η VM Hermes φορτώνει το bytecode και αρχίζει την εκτέλεση σχεδόν αμέσως — δεν απαιτείται χρόνος προθέρμανσης JIT, τυπικός για V8 και JSC.

Hermes vs JSC: σύγκριση

Η σύγκριση του Hermes και του JavaScriptCore (JSC) βοηθά να κατανοήσουμε πότε να επιλέξουμε ποια μηχανή. JSC — μια πλήρης μηχανή JS από την Apple, που χρησιμοποιείται στο Safari. Hermes — μια εξειδικευμένη μηχανή για React Native. Η επιλογή μεταξύ τους εξαρτάται από τις προτεραιότητες του έργου.

Το Hermes κερδίζει σε ταχύτητα εκκίνησης και κατανάλωση μνήμης, αλλά υστερεί έναντι του JSC στην απόδοση εκτέλεσης σύνθετων υπολογισμών. Η μεταγλώττιση JIT του JSC βελτιστοποιεί τα θερμά τμήματα κώδικα κατά την εκτέλεση, δίνοντας πλεονέκτημα σε λειτουργίες έντασης CPU. Για μια τυπική εφαρμογή React Native, όπου οι ενημερώσεις UI και η πλοήγηση αποτελούν το κύριο φορτίο, το Hermes παρέχει καλύτερη εμπειρία χρήστη χάρη στη γρήγορη εκκίνηση.

Βελτιστοποιήσεις Hermes για React Native

Hermes περιλαμβάνει αρκετές βελτιστοποιήσεις ειδικές για React Native. Η κυριότερη από αυτές είναι η ενσωμάτωση με το JSI (JavaScript Interface). Το Hermes υποστηρίζει εγγενώς το JSI, επιτρέποντας τη χρήση της νέας αρχιτεκτονικής React Native (Fabric + Turbo Module) χωρίς πρόσθετα στρώματα. Αυτό καθιστά το Hermes και τη νέα αρχιτεκτονική ιδανικό ζεύγος για μέγιστη απόδοση.

Διαχείριση μνήμης

Το Hermes χρησιμοποιεί συλλέκτη σκουπιδιών με στρατηγική γενεών (generational GC), βελτιστοποιημένο για κινητές συσκευές. Σε αντίθεση με το JSC, όπου η συλλογή σκουπιδιών μπορεί να προκαλέσει αισθητές παύσεις στο UI (jank), το Hermes εκτελεί GC σε μικρές δόσεις μεταξύ των καρέ, ελαχιστοποιώντας την επίδραση στην εμπειρία χρήστη. Σύμφωνα με τη Meta, οι παύσεις GC στο Hermes είναι 2–3 φορές μικρότερες από ό,τι στο JSC σε τυπικά σενάρια React Native.

Τεμπέλικη φόρτωση και σταθερές

Το Hermes υποστηρίζει τεμπέλικη φόρτωση μονάδων — η μονάδα JavaScript μεταγλωττίζεται μόνο όταν πραγματικά χρειάζεται. Αυτό μειώνει το μέγεθος του bytecode και επιταχύνει την εκκίνηση. Επιπλέον, το 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)');
}