メインコンテンツにスキップ

React Native 2018の現状

·5 分で読めます
Sophie Alpert
Sophie Alpert
FacebookのReactエンジニアリングマネージャー

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と既存のアプリコードの間に複雑な統合があるアプリの場合、イライラします。

フレームワークをより柔軟にし、ハイブリッド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はJavaScriptエコシステムにうまく適合するためにJavaScript側でスリム化する必要があります。これには、VMとバンドラーを交換可能にすることが含まれます。破壊的変更のペースに追いつくのは難しい場合があることを理解しているため、メジャーリリースの数を減らす方法を見つけたいと考えています。最後に、一部のチームは、スタートアップの最適化などのトピックで、専門知識がまだ書き留められていない、より徹底的なドキュメントを探していることを知っています。来年中にこれらの変更のいくつかが表示されることを期待してください。

React Nativeを使用している場合は、コミュニティの一員です。React Nativeをどのように改善できるかをお知らせください。

React Nativeは、モバイル開発者のツールボックスの1つにすぎませんが、私たちが強く信じているツールです。そして、500人以上のコントリビューターからの過去1年間で2500を超えるコミットにより、毎日改善しています。