Hermes engine

React Native апп ажиллуулахад JavaScript кодыг гүйцэтгэдэг engine байдаг. Анх JavaScriptCore (Safari-н engine) ашиглагдаж байсан бол Meta 2019 онд мобайл аппд зориулан тусгайлан бүтээсэн Hermes engine-г нийтэд нээлттэй болгосон. Expo SDK 48-аас эхлэн Hermes нь default болсон тул ихэнх тохиолдолд тусад нь тохируулах шаардлагагүй — гэхдээ яг яаж ажилладгийг мэдэх нь чухал.

Hermes яагаад хурдан вэ?

JavaScriptCore нь JavaScript кодыг ажиллуулах үед parse хийдэг байсан бол Hermes нь bytecode урьдчилан compile хийдэг:

JavaScriptCore:  JS файл → parse → AST → interpret → ажиллана
Hermes:          JS файл → compile → bytecode → [суулгах үед] → шууд ажиллана

Үр дүн нь:

• Апп эхлэх хугацаа 30–50% хурдасдаг
• Санах ойн хэрэглээ буурдаг
• TTI (Time to Interactive) багасдаг

Hermes идэвхтэй эсэхийг шалгах

Аппаа ажиллуулаад доорх кодыг нэмэн Hermes ажиллаж байгаа эсэхийг шалгана:

import { View, Text, StyleSheet } from 'react-native';

export default function HermesInfo() {
  // global.__hermesInternal байгаа бол Hermes ажиллаж байна
  const isHermes = () => !!global.__hermesInternal;

  const hermesVersion = global.HermesInternal?.getRuntimeProperties?.()?.['OSS Release Version'] ?? 'мэдэгдэхгүй';

  return (
    <View style={styles.container}>
      <Text style={styles.label}>JavaScript engine:</Text>
      <Text style={[styles.value, { color: isHermes() ? '#4ade80' : '#fb7185' }]}>
        {isHermes() ? `Hermes ${hermesVersion}` : 'JavaScriptCore'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, backgroundColor: '#0f172a', borderRadius: 12, margin: 16 },
  label: { color: '#94a3b8', fontSize: 14, marginBottom: 4 },
  value: { fontSize: 18, fontWeight: 'bold' },
});

app.json дахь Hermes тохируулга

Expo дээр app.json-д тохируулна:

{
  "expo": {
    "name": "MyApp",
    "jsEngine": "hermes",
    "android": {
      "jsEngine": "hermes"
    },
    "ios": {
      "jsEngine": "hermes"
    }
  }
}

Хэрэв Hermes-г унтрааж JavaScriptCore руу буцахыг хүсвэл "jsEngine": "jsc" гэж тохируулна. Гэхдээ ихэнх тохиолдолд Hermes нь илүү дээр сонголт.

Hermes debugger ашиглах

Hermes дээр дибаг хийхэд Chrome DevTools ашиглаж болно. Expo Go эсвэл development build ажиллаж байхад:

# Metro server ажиллуулна
npx expo start

# Дараа нь утас дээрх аппаас "Open Debugger" сонгоно
# Эсвэл terminal дээр 'j' товч дарна

Flipper-тэй ажиллахад react-native-flipper суулгасан байх шаардлагатай. Hermes-н profiler нь JavaScript ажиллалтын хаана удааширч байгааг харуулдаг:

// Performance-г хэмжих энгийн арга
const start = performance.now();

// Удаан кодыг энд ажиллуулна
const result = heavyCalculation();

const end = performance.now();
console.log(`Хугацаа: ${(end - start).toFixed(2)}ms`);

function heavyCalculation() {
  let sum = 0;
  for (let i = 0; i < 1_000_000; i++) {
    sum += i;
  }
  return sum;
}

Hermes-н хязгаарлалт

Hermes нь ES2015+ стандартын ихэнх функцуудыг дэмждэг боловч зарим advanced JavaScript feature дэмжихгүй. Хамгийн түгээмэл асуудлуудыг мэдэж байх хэрэгтэй:

| Feature | Дэмждэг эсэх | | ---------------------- | ------------------------------------- | | async/await | ✅ Тийм | | Promise | ✅ Тийм | | Optional chaining ?. | ✅ Тийм | | Proxy | ❌ Үгүй | | WeakRef | ❌ Үгүй | | eval() | ❌ Үгүй (аюулгүй байдлын шалтгаанаар) |

eval() ажиллахгүй тул eval()-г ашигладаг зарим хуучин library Hermes дээр асуудал гаргаж болзошгүй — ийм тохиолдолд тухайн library-г орлуулах хэрэгтэй.

Hermes нь тусгайлан тохируулах шаардлага бага, автоматаар ажилладаг тул "дэвшилтэт сэдэв" гэж бодохгүй байгаарай — зүгээр л идэвхтэй байгаа эсэхийг шалгаад, дибаг хийх арга барилыг мэдэж байхад хангалттай.

Дараагийн хичээлд:

TypeScript React Native-д — аппын кодоо TypeScript ашиглан бичих, interface, type, generic зэрэг ойлголтуудыг React Native-н жишээн дээр сурна. TypeScript нь алдааг эрт илрүүлж, кодыг ойлгомжтой болгодог.