React Nativeのマルチプラットフォームビジョン
React Nativeは、Facebookおよび業界全体でモバイル開発の基準を大きく引き上げることに成功しました。新しい方法でコンピュータと対話し、新しいデバイスが発明されるにつれて、React Nativeがすべての人々にとって利用可能になることを願っています。React Nativeはもともとモバイルアプリを構築するために作成されましたが、多くのプラットフォームに焦点を当て、各プラットフォームの強みと制約に合わせて構築することが相乗効果をもたらすと考えています。この技術をデスクトップや仮想現実にも拡張したときに大きなメリットが得られたことを確認しており、これがReact Nativeの将来にとって何を意味するのかを共有することを楽しみにしています。
プラットフォームの尊重
私たちの最初の指針は、各プラットフォームに対する人々の期待に合わせることです。Androidユーザーは、TalkBackを使用したアクセシブルなアプリを期待しています。ナビゲーションは、他のAndroidアプリと同じように機能する必要があります。ボタンは、Androidでボタンが表示され、操作されるように見えるはずです。iOSボタンのように見えるべきではありません。一貫したクロスプラットフォームの開発者エクスペリエンスを提供しようと努めていますが、ユーザーの期待を犠牲にすることを避けようとしています。
React Nativeを使用すると、開発者はより優れた開発者エクスペリエンスのメリットを得ながら、ユーザーの期待に応えることができると信じています。このセクションでは、次の内容を共有します。
- プラットフォームの制約を受け入れることで、実際には他のプラットフォームでのエクスペリエンスが向上します。
- 制度的な知識から学び、より高度なクロスプラットフォーム抽象化を構築できます。
- 各プラットフォームの他のプレーヤーは、より優れた開発者およびユーザーエクスペリエンスを構築するためのインスピレーションを与えてくれます。
プラットフォームの制約の受け入れ
特定のデバイスハードウェアまたはユーザーの期待により、独自の制約と要件が課せられます。例として、メモリは通常、iOS、macOS、およびWindowsよりもAndroidおよびVRヘッドセットでより制約されています。別の例として、ユーザーはモバイルアプリがほぼ瞬時に起動することを期待していますが、デスクトップアプリの起動に時間がかかってもそれほど不満を感じません。これらの問題にReact Nativeでアプローチすることで、1つのプラットフォームで学んだ教訓と作成されたコードをより簡単に借用し、他のプラットフォームに適用できることがわかりました。
React NativeとRelayは、AndroidとiOSで1000以上のFacebookサーフェスを動かしています。
たとえば、React Nativeは、Androidでのメモリ使用量を削減するために重要な「ビューのフラット化」として知られる最適化に依存しています。iOSには同じメモリ制約がないため、この最適化をiOS向けに構築することはありませんでした。過去数年にわたって新しいクロスプラットフォームレンダラーを構築する際に、「ビューのフラット化」を再実装する必要がありました。しかし今回は、プラットフォーム固有のJavaではなく、C++で記述されました。この同じ最適化をiOSで試すことは、スイッチを切り替えるだけの問題でした。本番のFacebookアプリでは、これによりiOSでのパフォーマンスが向上することが観察されました。iOS向けにこれを構築することはなかったかもしれませんが、Androidへの投資がiOSへの投資に役立つことができました。
制度的な知識からの学習
React Nativeがもともと作成された理由の1つは、エンジニアリングのサイロを削減することでした。Androidエンジニアは、同じ製品で作業するiOSエンジニアからサイロ化される傾向があります。AndroidエンジニアはAndroidエンジニアのコードをレビューし、Androidのミートアップやカンファレンスに参加します。iOSエンジニアはiOSエンジニアのコードをレビューし、iOSのミートアップやカンファレンスに参加します。異なるプラットフォームで作業するエンジニアは、優れた製品エクスペリエンスを構築する方法に関する独自のドメインおよび制度的な知識をもたらします。
React Nativeのようなクロスプラットフォームフレームワークの最良の結果の1つは、非常に異なる専門知識を持つエンジニアをどのようにまとめるかです。より多くのプラットフォームをターゲットにすることで、プラットフォームの専門家間の制度的な知識の相互交流を加速できると信じています。
例として、React Nativeのアクセシビリティ抽象化は、Android、iOS、およびWebがそれぞれ異なる方法でアクセシビリティにアプローチする方法に影響を受けています。これにより、両方のモバイルプラットフォームでのアクセシビリティヒントの処理方法を改善する共通のインターフェイスを構築することができました。
別の例として、Webでの速度に対するユーザーの認識に関する私たちの調査は、Suspenseのような同時機能につながりました。過去1年間、これらの機能は新しいFacebook.com Webサイトで検証されました。新しいレンダラーでは、これらの機能がReact Nativeに移行しており、イベントのスケジューリングと優先順位の設計方法に影響を与えています。Webエクスペリエンスを改善するためのReactチームの投資は、ネイティブプラットフォーム向けのReact Nativeに役立っています。
競争がイノベーションを促進する
ドメイン固有のエンジニア、ミートアップ、カンファレンスに加えて、各プラットフォームは同様の問題を解決する他の独自のプレーヤーももたらします。Webでは、React（React Nativeを直接動かす）は、Vue、Preact、およびSvelteなどの他のオープンソースWebフレームワークから頻繁にインスピレーションを得ています。モバイルでは、React Nativeは他のオープンソースモバイルフレームワークからインスピレーションを得ており、Facebook内部で構築された他のモバイルフレームワークから学んでいます。
競争は長期的にはすべての人々にとってより良い結果につながると信じています。各プラットフォームでの他のプレーヤーを優れたものにするものを研究することにより、他のプラットフォームに適用できる教訓を学ぶことができます。たとえば、複雑なWebサイトを簡素化する競争は、Reactの開発に影響を与え、React Nativeにモバイルアプリ用の宣言型フレームワークを提供する上で先駆的なスタートを切ることができました。Webでのより高速な反復サイクルとビルド時間の要求も、React Nativeに大きなメリットをもたらしたFast Refreshの開発につながりました。同様に、特にデータフェッチと並列処理に関する社内モバイルフレームワークのパフォーマンス最適化により、新しいFacebook.com Webサイトを構築したときに、Reactにも影響を与えた方法でReact Nativeを改善する必要がありました。
ReactとRelayは、Facebook.com Webサイトを動かしています。
新しいプラットフォームへの拡張
ReactとReact Nativeは転換期を迎えています。ReactはReact 18のリリースに向けた道のりを歩み始めており、新しいReact Nativeレンダラーは現在、Facebookのモバイルアプリを完全に動かしています。Facebookでの採用が拡大していることに対応するため、私たちのチームは今年大幅に成長しました。他のプラットフォームで開発しているチームもこの採用に気づき、React Nativeの恩恵を受ける機会があると考えています。
昨年、私たちはMicrosoftおよびMessengerチームと協力し、WindowsとmacOSで真にネイティブなビデオ通話体験を作り上げてきました。モバイルアプリの起動時間に非常に厳しい目を向けているため、React Nativeを使用したデスクトップビデオ通話の初期実装は、それを置き換えたElectron実装のパフォーマンスを完全に凌駕しました。この体験を構築した最初の数週間、私たちは複数のライブビデオ通話が表示されたウィンドウのサイズを変更する様子を録画し、滑らかなフレームレートに驚嘆しました。
デスクトップ向けの構築は、私たちにとって非常に刺激的なものでした。モバイルエクスペリエンスの構築に関する知識を、広い視野を持ってデスクトップに応用してきました。複数の子ウィンドウ、メニューバー、システムトレイなど、視野を広げてきました。今後も新しいデスクトップMessenger機能の共同開発を続ける中で、Webやモバイルでの構築方法に影響を与える機会が見つかることを期待しています。最新情報を知りたい方は、私たちのデスクトップでの共同作業はGitHubで行われています。
React Nativeは、WindowsおよびmacOS版Messengerのビデオ通話を支えています。
また、Facebook Reality Labsともより緊密に連携し、ReactがOculusで仮想現実体験を提供する上でいかに独自の地位にあるかを理解しようとしています。React NativeでVR体験を構築することは、メモリ制約が厳しく、ユーザーがインタラクションの遅延に敏感であるため、特に興味深いものになるでしょう。
モバイル向けReact Nativeへのアプローチと同様に、一般公開する前にFacebookの規模で技術を検証します。まだ多くのことが変化しており、まだ多くの疑問があります。コミュニティと共有する前に、技術が実用段階にあり、信頼できるという確信を持ちたいと考えています。
VRの開発のほとんどはまだ社内で行われますが、できるだけ早く詳細を共有したいと考えています。また、VR向けのReact Nativeの改善がオープンソースにも現れると予想しています。たとえば、VRユースケースでのメモリ使用量を削減するプロジェクトは、モバイルおよびデスクトップエクスペリエンスでのReact Nativeのメモリ使用量も削減すると予想されます。
ReactとRelayは、Oculus Homeやその他多くの仮想現実体験を支えています。
業界がReactをどのように採用してきたかを振り返ってみると、コミュニティでは常に、より多くのプラットフォームでのReactに対する需要がありました。React Nativeをコミュニティに発表する前でさえ、NetflixはすでにReactを使用してTVエクスペリエンスを構築するためのカスタムレンダラーであるGibbonを作成していました。また、Facebookがデスクトップ版Messengerの構築を開始する前は、MicrosoftはすでにReactを使用してOfficeおよびWindows 10でネイティブなデスクトップエクスペリエンスを構築していました。
まとめ
まとめると、私たちのビジョンは、React Nativeのリーチをモバイルを超えて拡大することであり、すでにFacebookのデスクトップおよびVRチームと提携することでそれを開始しています。各プラットフォームの制約を受け入れ、制度的知識から学び、他のプレーヤーからインスピレーションを得るとき、エコシステムのすべてのプラットフォームに利益をもたらすことを私たちは知っています。そして最も重要なのは、そうすることで、私たちの指針に忠実であり続けることです。
React Nativeにとって多くのプラットフォームが何をもたらすかを探求し続ける中で、これから起こることに私たちは興奮しています。最新情報については私たちに連絡を取り(@reactnative)、あなたの考えを共有してください！