未分類

React Native 0.64:Hermesについて知っておくこと

Hermes(エルメス)はオープンソースのJavaScriptエンジンであり、多くのReactNative開発者に支持されています。 ベトナムで優秀なReactNative (リアクトネイティブ)開発企業の1つとして、BHSOFTは多くのプロジェクトでHermesも使用しています。今回の記事は、opt-in(オプトイン)React Native機能を使用するメリットとプロジェクトでそれを効果的にする方法説明します。

ReactNativeアプリにHermesを使用するメリット

Hermesは、ReactNativeで実行されるJavaScriptエンジンとして2019年7月11日に導入されました。 オープンソースになる前にFacebookは内部的に使用されていました。

現在、HermesはReact Native用に最適化されたオープンソースのJavaScriptエンジンです。ReactNativeアプリは、Hermesでパフォーマンスを向上:

  • アプリ起動時間の高速化
  • コードの最適化:バイトコードサイズ、ランタイムパフォーマンスを改善
  • Hermesは、メモリ使用量の大幅な削減、アプリのサイズを小さくする

Hermesは、どうやってそれをすることができますか? 次の機能を見てみましょう:

JavaScriptソースコードをバイトコードにプリコンパイル

Hermesは、バイトコードの事前コンパイルによって非常に効率的です。 HermesはJavaScriptをロードしてから解析する必要がなく、直接解析とコンパイルを使用して起動時間を最適化します。 その結果、Hermesは、バイトコードにプリコンパイルする事で、実行時のタスクを減らし、起動時間の高速化やメモリ使用量の削減を実現しています。。 これにより、過剰なメモリ使用量が原因でアプリがOSによって強制終了されるリスクを軽減できます。

Hermesを有効に
Android

ファイルを編集

android/app/build.gradle

以下に示すように変更:

project.ext.react = [
      entryFile: "index.js",
-     enableHermes: false  // clean and rebuild if changing
+     enableHermes: true  // clean and rebuild if changing
  ]

ProGuardを使用している場合は、次のルールを使用

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

次に、ビルドを一旦クリーン:

$ cd android && ./gradlew clean

これで、通常通りアプリを開発してデプロイできるようになる

$ npx react-native run-android
iOS用のHermes

HermesをiOSで実行するには、ReactNativeバージョン0.64が必要です。

React Native 0.64は、 react-native-firebase や状態管理パッケージ mobx などのパッケージとの互換性に必要なプロキシをサポートしています。

React Native0.64はReact17に移行します。これにより、異なるバージョンのReactを1つのページに共存させることができるため、既存のアプリを新しいReactバージョンにアップグレードするプロセスが簡素化されます。

iOS 用のHermesを有効にするには、ios / Podfileを編集し、次のように変更します。

 use_react_native!(
     :path => config[:reactNativePath],
     # to enable hermes on iOS, change `false` to `true` and then install pods
-    :hermes_enabled => false
+    :hermes_enabled => true
   )

次に、Hermesポッドをインストール:

$ cd ios && pod install

これで、通常通りアプリを開発してデプロイできるようになります。

$ npx react-native run-ios
Hermesが使用されていることを確認

Hermesが有効になっている場合は、ようこそビューに表示

HermesInternal グローバルバリアブルがJavaScriptで利用可能になり、Hermesが使用されていることを確認するために使用できます。

const isHermes = () => !!global.HermesInternal;

ベトナムでReactNative開発会社のトップ企業として、BHSOFTは経験豊富のReactNative開発チームを提供します。

弊社のReact Nativeプロジェクトを事例として、一つのプロジェクトを見てみましょう。

このプロジェクトでは、お客様がメール、SMS、ライブ電話、ボイスメール、Facebookメッセージ、ライブチャットなど、セールスリードとのすべてのコミュニケーションを1か所で管理できるようにするモバイルアプリを構築する依頼でした。

お客様の要件に応じて、BHSOFTのモバイル開発チームはReact Nativeを使用してアプリを構築しました。

このアプリを使用すると、ユーザーは、テキストメッセージ、Facebookメッセージ、メール、ライブ電話など、1つのダッシュボードでリードと通信して自動フォローすることができます。 特に:

  • このアプリを使用すると、ユーザーはSMS、メール、ボイスメール、通話、Facebookメッセンジャー、ライブチャットなどの複数のチャネルでリードにメッセージを送信できます。
  • アプリは自動的にリードをフォローアップし、リードとのすべてのコミュニケーションを1つのダッシュボードに表示します。
  • アプリは、ユーザーのアジェンダに基づいてユーザーの予定を自動的に予約できます。
  • ユーザーは、リードが話す準備ができるたびに、またはカレンダーでスケジュールを設定するたびに、自動的にインバウンドコールを受け取ります。
  • このアプリでは、ユーザーがステータスを追跡したり、リードに返信したり、リマインダーを完了したりすることもできます。

ポートフォリオページで他のプロジェクトをご覧して、詳細については、[email protected]までお問い合わせください。

 

Author

Tiep Thi Tuyet Mai