React Native実行環境についてメモ
React NativeはJavaScriptで書ける
iOS上とローカルのMacでは実行環境が異なる(2パターンある)
- JavaScriptCore 実機のiOS上で実行する場合は、JavaScriptCoreが使われる JavaScriptCoreはsafariブラウザのJavaScriptエンジンでもある iOSアプリにはiOS上のメモリへの書込みが許可されていないため、JavaScriptCoreはJITコンパイラを使えない。(モバイルのため、そこまでメモリを積んでいない) MobileSafari.appやApple謹製のアプリはJITコンパイラを使っているかも(?)
- V8 開発中に使うシミュレーターはWebソケット経由でGoogleが開発したV8上で実行される。 V8はChromeブラウザのJavaScriptエンジン。Node.jsのエンジンとしても使われている。
コンパイラについての補足メモ
JIT(Just In Time) プログラムの実行時に中間コードを機械語にコンパイルする。JITは最近人気のコンパイラで、有名なプロダクトでは、Javaや.Net等の言語で採用されている。Javaは以前、インタプリタを採用していたが、JITの方が高速にプログラムを実行できるため、置き換えた。 インタプリタも呼ばれた時にコンパイルされるが、毎回コンパイルをする必要があるため、パフォーマンスがよくない。JITは一度コンパイルされたプログラムの塊はキャッシュされるので、初回実行時のみのオーバーヘッドになる。
AOT(Ahead Of Time) JITと反対に、事前にコンパイルするコンパイラにAOT(Ahead Of Time)コンパイラがある。C言語やC++、C#で使われており、iOSとAndroidもAOTを採用している。JITコンパイルは部分的な最適化をするが、AOTコンパイルはどのプラットフォームに対して最適化を行うのか事前にわかっているため、プラットフォームに合わせたコード全体の最適化が可能になる。
参考
React Nativeをアップグレードする
初めてReact Nativeのアップグレード作業をした時、たくさんコンフリクトしてかなり焦った。次回アップグレードをする時にどうすればいいかの手順を自分なりにまとめた。 公式ドキュメントはこちら。 facebook.github.io
インストール済のreact-nativeのバージョンを確認する
既にreact-native-git-upgradeを実行していると、package.jsonのバージョンと異なる場合があるので、念のためバージョンを確認する。
※ node_modules以下のreact-nativeのバージョンを表示してくれる。
$ react-native --version react-native-cli: 2.0.1 react-native: 0.51.0
グレードアップするためのモジュールをインストールする
$ npm install -g react-native-git-upgrade
react-native-git-upgradeを実行する
- バージョンを指定してアップグレードする
$ react-native-git-upgrade 0.52.0
バージョンを指定しないと最新版がインストールされる。 一気に最新バージョンまで上げると、コンフリクトが大量に発生した祭に手間取るので、個人的には0.1.0刻みくらいでアップグレードするほうが好み。
実行後、特に問題なければそのままコミットして、完了!
コンフリクトが発生したらひたすらコンフリクトを解決する。基本的には古いものを新しいものに置き換えていくことが多い。 途中で迷子になったらReact Nativeのバージョン間の差分を確認できる、rn-diffを見る。 github.com
flowのバージョンも上げる
React Nativeのアップグレードをすると毎回flowのバージョンアップもある。 自動でアップデートされないので、flowの場合は、.flowconfigのバージョンを確認して手動でアップデートする必要がある。
$ npm install --save-dev flow-bin@0.57.1 $ flow
flowコマンドを実行し、エラーがなくなるまで修正すれば完了。
まとめ
初めてアップグレードした時は最新のバージョンまで一気にやってしまい、マジどうなっているんだろうと思いながらの作業だった。 一度経験してから、手順を見直すとそこまで大変じゃない気がしてきます。 flow次第ではプログラムの修正数が凄いことになりますが... アップグレードする前に一度rn-diffを見ると、どんな変更があるか簡単に把握できるので、とりあえずrn-diffを見ておくことがオススメ。