React Nativeの現状 2018

React Nativeの現状について最後のアップデートを公開してから、しばらく時間が経ちました。

Facebookでは、これまで以上に多くのReact Nativeを、そして多くの重要なプロジェクトで使用しています。最も人気のある製品の1つはMarketplaceで、私たちのアプリのトップレベルタブの1つであり、毎月8億人のユーザーが利用しています。2015年の立ち上げ以来、MarketplaceのすべてはReact Nativeで構築されており、アプリのさまざまな部分にわたって100以上の全画面ビューが含まれています。

また、アプリの多くの新しい部分にもReact Nativeを使用しています。先月のF8基調講演をご覧になった方は、献血、災害時対応、プライバシーショートカット、ウェルネスチェックを覚えているでしょう。これらはすべてReact Nativeで構築された最近の機能です。そして、主要なFacebookアプリ以外のプロジェクトでもReact Nativeが使用されています。新しいOculus Go VRヘッドセットには、完全にReact Nativeで構築されたコンパニオンモバイルアプリが含まれています。ヘッドセット自体の多くの体験にReact VRが利用されていることは言うまでもありません。

もちろん、アプリを構築するために他の多くのテクノロジーも使用しています。LithoとComponentKitは、アプリで広く使用されている2つのライブラリです。どちらも、ネイティブ画面を構築するためのReactのようなコンポーネントAPIを提供します。React Nativeが他のすべてのテクノロジーを置き換えることが目標だったことは一度もありません。私たちはReact Native自体をより良くすることに焦点を当てていますが、他のチームがReact Nativeからアイデアを借用し、JavaScript以外のコードにもインスタントリロードをもたらすのを見るのが大好きです。

アーキテクチャ

2013年にReact Nativeプロジェクトを開始したとき、JavaScriptとネイティブの間に単一の「ブリッジ」があり、それが非同期で、シリアル化可能で、バッチ処理されるように設計しました。React DOMがReactの状態更新を、document.createElement(attrs)や.appendChild()のようなDOM APIへの命令的で可変的な呼び出しに変換するように、React Nativeは、[["createView", attrs], ["manageChildren", ...]]のように、実行するミューテーションをリストする単一のJSONメッセージを返すように設計されました。私たちは、同期応答が返されることに決して依存せず、そのリスト内のすべてがJSONに完全にシリアル化されて元に戻せることを保証するように、システム全体を設計しました。これは、私たちに与えられた柔軟性のために行ったことです。このアーキテクチャの上に、WebSocket接続を介してすべてのJavaScriptコードを非同期に実行するChromeデバッグのようなツールを構築することができました。

過去5年間で、これらの初期原則が一部の機能の構築をより困難にしていることがわかりました。非同期ブリッジとは、同期応答を期待する多くのネイティブAPIとJavaScriptロジックを直接統合できないことを意味します。ネイティブ呼び出しをキューに入れるバッチ処理されたブリッジは、React Nativeアプリがネイティブに実装された関数を呼び出すことをより困難にします。そして、シリアル化可能なブリッジは、2つの世界間でメモリを直接共有するのではなく、不必要なコピーを意味します。完全にReact Nativeで構築されたアプリの場合、これらの制限は通常耐えられます。しかし、React Nativeと既存のアプリコードとの複雑な統合を持つアプリの場合、それらはフラストレーションを引き起こします。

React Nativeのフレームワークをより柔軟にし、ハイブリッドJavaScript/ネイティブアプリでネイティブインフラストラクチャとより適切に統合するために、React Nativeの大規模な再アーキテクチャに取り組んでいます。このプロジェクトでは、過去5年間で学んだことを適用し、アーキテクチャを段階的により現代的なものにします。React Nativeの内部の多くを書き直していますが、変更のほとんどは内部的なものです。既存のReact Nativeアプリは、変更なしまたはほとんど変更なしで引き続き動作します。

React Nativeをより軽量にし、既存のネイティブアプリにより適切に適合させるために、この再アーキテクチャには3つの主要な内部変更があります。まず、スレッドモデルを変更しています。各UI更新が3つの異なるスレッドで作業を実行する必要がある代わりに、応答性を維持するために優先度の低い作業をメインスレッドから外しながら、高優先度の更新のために任意の​​スレッドでJavaScriptを同期的に呼び出すことが可能になります。次に、複数のレンダリング優先度を可能にし、非同期データ処理を簡素化するために、React Nativeに非同期レンダリング機能を組み込んでいます。最後に、ブリッジを簡素化して、より高速で軽量にします。ネイティブとJavaScript間の直接呼び出しはより効率的になり、クロス言語スタックトレースのようなデバッグツールの構築を容易にします。

これらの変更が完了すると、より密接な統合が可能になります。現在、複雑なハックなしに、ネイティブナビゲーションとジェスチャー処理、またはUICollectionViewやRecyclerViewのようなネイティブコンポーネントを組み込むことはできません。スレッドモデルの変更後、このような機能の構築は簡単になります。

この作業が完了に近づくにつれて、今年後半に詳細を公開する予定です。

コミュニティ

Facebook内のコミュニティとともに、Facebook以外にも活発なReact Nativeユーザーと協力者がいることを嬉しく思います。React Nativeユーザーをより良くサポートし、プロジェクトへの貢献を容易にすることで、React Nativeコミュニティをさらに支援したいと考えています。

アーキテクチャの変更がReact Nativeと他のネイティブインフラストラクチャとのよりクリーンな相互運用を助けるのと同様に、React NativeはVMとバンドラーを交換可能にすることを含め、JavaScriptエコシステムにより良く適合するようにJavaScript側でよりスリムであるべきです。私たちは、破壊的変更のペースに追いつくのが難しいことを知っているので、より少ないメジャーリリースを行う方法を見つけたいと考えています。最後に、一部のチームが、私たちの専門知識がまだ書き留められていない起動最適化のようなトピックで、より徹底したドキュメントを求めていることを知っています。来年には、これらの変更の一部が見られることを期待してください。

あなたがReact Nativeを使用しているなら、あなたは私たちのコミュニティの一員です。React Nativeをあなたにとってより良くするために、引き続きご意見をお聞かせください。

React Nativeはモバイル開発者の道具箱の中の一つのツールに過ぎませんが、私たちが強く信じているツールであり、過去1年間で500人以上のコントリビューターから2500以上のコミットを得て、日々改善しています。