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でこれらの問題に取り組むことで、あるプラットフォームで得た教訓や書かれたコードをより簡単に借りて、他のプラットフォームに適用できることがわかりました。
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のような並行機能につながりました。昨年、これらの機能は新しいFacebook.comウェブサイトで検証されました。現在、新しいレンダラーにより、これらの機能はReact Nativeに導入され、イベントスケジューリングと優先順位の設計方法に影響を与えています。ReactチームのWeb体験向上への投資は、ネイティブプラットフォーム向けのReact Nativeに恩恵をもたらしています。
競争がイノベーションを推進する
ドメイン固有のエンジニア、ミートアップ、カンファレンスに加えて、各プラットフォームには同様の問題を解決する他のユニークなプレイヤーもいます。ウェブでは、React（React Nativeを直接動かしています）は、Vue、Preact、Svelteのような他のオープンソースのウェブフレームワークから頻繁にインスピレーションを得ています。モバイルでは、React Nativeは他のオープンソースのモバイルフレームワークからインスピレーションを受けており、Facebook内部で構築された他のモバイルフレームワークからも学んできました。
長期的に見れば、競争はすべての人にとってより良い結果をもたらすと信じています。各プラットフォームの他のプレイヤーを素晴らしいものにしている要因を研究することで、他のプラットフォームにも適用できる教訓を学ぶことができます。例えば、複雑なウェブサイトを簡素化するための競争はReactの開発に影響を与え、React Nativeにモバイルアプリ向けの宣言的フレームワークを提供する先行者利益を与えました。ウェブ向けのより速い反復サイクルとビルド時間の要求は、Fast Refreshの開発にもつながり、React Nativeに大きく貢献しました。同様に、私たちの内部モバイルフレームワークにおけるパフォーマンス最適化 — 特にデータ取得と並列化に関するもの — は、新しいFacebook.comウェブサイトを構築する際にReactにも影響を与える形で、React Nativeを改善するよう私たちに挑戦しました。
ReactとRelayはFacebook.comのウェブサイトを支えています。
新しいプラットフォームへの拡大
ReactとReact Nativeは転換点にあります。ReactはReact 18リリースへの道を開始し、新しいReact Nativeレンダラーは現在Facebookモバイルアプリを完全に支えています。今年のチームは、Facebookでの採用拡大をサポートするために大幅に成長しました。他のプラットフォームで開発しているチームは、その採用に気づき、React Nativeの恩恵を受ける機会を見出しています。
過去1年間、私たちはMicrosoftおよびMessengerチームと協力し、WindowsとmacOSで真にネイティブなビデオ通話体験を創造してきました。モバイルアプリの起動時間に対して私たちが非常に厳しく監視しているため、React Nativeを使用してデスクトップビデオ通話の初期実装は、それが置き換えたElectron実装のパフォーマンスを完全に凌駕しました。この体験を構築した最初の数週間、私たちは複数のライブビデオ通話を持つウィンドウのサイズ変更を録画し、滑らかなフレームレートに驚嘆しました。
デスクトップ向けに構築することは、私たちにとって非常に刺激的なことでした。私たちはモバイル体験の構築で培った知識を、デスクトップにもオープンな視点で適用してきました。複数の子ウィンドウ、メニューバー、システムトレイなど、視野を広げました。新しいデスクトップ版Messengerの機能で引き続き協力していく中で、ウェブやモバイルでの構築方法に影響を与える機会を見つけると期待しています。最新情報を入手したい場合は、私たちのデスクトップコラボレーション作業は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はOfficeとWindows 10でネイティブデスクトップ体験を構築するためにReactをすでに使用していました。
まとめ
要約すると、私たちのビジョンはReact Nativeのリーチをモバイルを超えて拡大することで、すでにFacebookのデスクトップチームやVRチームと提携して着手しています。各プラットフォームの制約を受け入れ、制度的知識から学び、他のプレイヤーからインスピレーションを得ることで、エコシステム内のすべてのプラットフォームに利益をもたらすことを知っています。そして最も重要なことは、そうすることで、私たちの指導原則に忠実であり続けることです。
React Nativeにとって多くのプラットフォームがもたらすものを探求し続けるにつれて、将来に何が待ち受けているかを楽しみにしています。さらなるアップデートやご意見を(@reactnative)までお寄せください！