Vegaアプリ向けReact Nativeのアーキテクチャ

このドキュメントでは、Vega向けReact Native（RNV）のアーキテクチャの概要について説明します。このドキュメントは、Vegaアプリを作成するときに、設計上の選択や制約を示す参考資料として使用できます。React Nativeフレームワークの詳細については、React Nativeのアーキテクチャに関するドキュメント（英語のみ）を参照してください。 Vega向けReact Native（RN）は、React NativeフレームワークをVegaデバイス向けにツリー外で移植したもので、React Nativeアプリを開発するためのよく知られた機能を提供します。Vega向けReact Nativeには、React NativeのコアコンポーネントとAPIのサポートに加えて、開発者に最もよく使用されているコミュニティサポートライブラリのセットが含まれています。さらに、フォーカス管理などのTV固有の機能に対応するために、Vega向けReact NativeにはReact NativeのtvOS機能のほとんどが組み込まれています。

​

アーキテクチャの指針

​

同等性

Vega向けReact Nativeは、React Nativeのクロスプラットフォームの原則を取り入れ、RN APIや人気のあるライブラリと同等の機能を提供することを目指しています。RNVはRNのコアコンポーネントとAPIの80%以上をサポートしています。さらに、RNエコシステムで広く利用されている40以上のRNライブラリも移植済みです。このサポートにより、Vega OSとその他のOSプラットフォーム間でコードを再利用できます。また、RNVには、TVデバイスに固有のフォーカス管理機能とイベント処理機能をサポートするRN tvOSのAPIも含まれています。そのほか、RNVには必要に応じて特定のRNプラットフォーム専用のAPIも含まれています。これには、BackHandler（Android）やSafeAreaView（iOS）などがあります。 Vega SDKは一般的なRNツールと開発/テスト用のユーティリティもサポートし、アプリ開発を高速化するとともに、高性能なランタイム環境を提供します。React Dev Tools、Chrome Dev Tool、FlashlightなどのツールをRNVで使用できます。これらのツールで既存のワークフローを活用できるため、クロスプラットフォーム環境での作業が可能となります。

​

パフォーマンス

Amazonは、Amazonデバイスでのパフォーマンスが最適化されるようにVega向けReact Nativeを一から設計しました。アプリは、Vegaのパフォーマンスに関するKPIを満たす必要があります。 RNVはReact Nativeの新しいアーキテクチャで構築され、RNコアフレームワークのすべての改善点が取り入れられています。新しいアーキテクチャでは、次の機能がサポートされます。

• 同期レイアウト/イベント
• 並列レンダリング
• JavaScriptの高速実行およびJSIによるネイティブコードの相互運用（ターボモジュールのサポートを含む）

RNVのRNフレームワークとランタイムは、アプリパッケージではなくVegaのシステムイメージにバンドルされています。Vegaライフサイクルマネージャーは、システムにバンドルされたライブラリを活用して、コールドスタートに備えてアプリに割り当てられたプロセスをあらかじめウォームアップします。このライフサイクル管理により、最初のフレーム表示までの時間とアプリ全体の読み込み時間が短縮されます。さらに、VegaはRNランタイムを共有メモリ空間に保持するため、複数のアプリを実行する際のシステムメモリ使用量が削減されます。 RNVはリソース圧迫イベントもサポートしています。これをアプリで処理することで、アプリでのリソース利用を効率的に管理できます。開発者のアプリは、システムパフォーマンスに影響を与えることなく動作を継続でき、中断のないスムーズな体験をユーザーに提供できます。 Vegaの画像システムは、パフォーマンス向上のためにインテリジェントキャッシュを採用しています。画像システムは、表示中かつアクティブなUIコンポーネントを追跡し、RAMとディスク両方のメモリ使用量を最適化します。この最適化により、画像の読み込みと表示が高速化されます。また、画像をグラフィックカードのメモリ内で直接管理することで、処理の負荷を軽減します。RNVアプリは、これらのパフォーマンス機能の恩恵を自動的に受けることができます。

​

マルチプロファイルとマルチモーダル

Vega向けReact Nativeは、テレビやスマートスピーカーなど、さまざまなAmazonデバイスをサポートし、柔軟なレイアウトを使用してさまざまな画面サイズにコンテンツをフィットさせます。Platform APIを使用して、実行時にさまざまなデバイスタイプに合わせてアプリを調整できます。また、Vegaのビルドツールを使用すれば、アプリのビルド段階で特定のデバイス向けに機能をカスタマイズすることもできます。 ユーザーは、音声、タッチ、リモコンなど、さまざまな方法でAmazonデバイスを制御できます。Vega向けReact Native（RNV）は、これらすべての制御方法を自動的にサポートします。RNVのコンポーネントは、タッチスクリーンとリモコンのD-Padの両方に対応しています。このフレームワークにはAlexa音声制御も含まれているため、ユーザーは音声コマンドでアプリを操作したりメディアを制御したりできます。特にテレビアプリに対しては、リモコンのナビゲーションとフォーカス管理を処理するための専用ツールが用意されています。

​

標準への準拠

RNVでは、アプリ機能の構築にアプリ開発で広く採用されている標準規格を使用しています。React Nativeと同様のAPIを提供することを目標としつつ、コア機能にはW3C標準規格も取り入れています。たとえば、メディア再生にはW3C標準を採用しているため、既存のJavaScriptメディアプレーヤーの多くを簡単に使用できます。RNVの今後のリリースでは、ウェブ標準規格に基づくWebCryptoおよびWebWorkersもサポートされる予定です。これらの広く普及している標準規格を採用することで、RNVでは、ウェブブラウザ向けに作成された多くのJavaScriptライブラリをVegaアプリで容易に使用することができます。

​

実装

Amazonは、Vega OSを実行するデバイスをサポートするため、React Nativeフレームワークのツリー外実装としてVega向けReact Nativeを構築しました。RNVは、React Common、Yoga、HermesなどのReact NativeソフトウェアスタックをVega OS向けに移植して、VegaのネイティブUIフレームワーク上で動作するようにしています。RNVはReact Nativeの新しいアーキテクチャを使用しており、JavaScriptとネイティブコードとのインターフェイスにはJSIのみをサポートします。新しいFabricレンダラーにも対応しており、同期レイアウトとエフェクト処理の改善、および並列レンダリングを実現します。さらにRNVは、Vegaプラットフォーム用のTurbo NativeモジュールとFabric Nativeコンポーネントを通じたネイティブ統合をサポートしています。

​

OSへの組み込みと動的なリンク

RNVでは、React Nativeランタイム全体をVega OSにバンドルし、実行時にアプリに動的にリンクするという独自のアーキテクチャが採用されています。または、既存のVegaプラットフォームの場合、ランタイムをアプリバイナリに静的にリンクし、アプリコードとともにバンドルしています。 この独自のアプリアーキテクチャを採用することで、Vega OSを実行するデバイスで、オンディスクストレージ、起動とアプリの切り替えにかかる時間、メモリ使用量が最適化されます。React Nativeランタイムの削除により、アプリバンドルのサイズは10MB以上削減されます。また、OSからランタイムを読み込む方式にすることで、Vegaプラットフォームがプロセスプールを事前にウォームアップできるため、React Nativeアプリの起動時間が短縮されます。 RNVでは、スプリットバンドリングでメインのJavaScriptコードをReactとReact Nativeのライブラリから分離することもできます。スプリットバンドリングを使用すると、アプリのサイズを1～2メガバイト削減できるほか、デバイスのオペレーティングシステムでのアプリの動作も改善します。アプリ起動時には、これら分離されたReactおよびReact Nativeコンポーネントがアプリ本体のコードとともに読み込まれます。このアプローチは、標準的なReact Nativeランタイムの仕組みと似ています。

​

APIとABIの安定性

React NativeをVegaオペレーティングシステムに組み込むことには、いくつかの課題が伴います。重要な変更を含むReact Nativeの新しいバージョンがリリースされると、アプリが正しく動作しなくなる可能性があります。また、Hermes（JavaScriptエンジン）によるコードの処理方法が変わるため、新しいリリースごとにJavaScriptコードを再コンパイルする必要があります。React Nativeを使用する他のプラットフォームでは、React Nativeランタイムを各アプリとともにパッケージ化することで、これらの問題を回避しています。ランタイムは、アプリのビルド時に使っていたバージョンを必ず使用するようにします。 現在のVegaオペレーティングシステムはReact Nativeバージョン0.72を使用していますが、近日中により新しいバージョンへの更新を予定しています。対象のVegaデバイスで利用可能なReact Nativeバージョンを確認し、それに応じてアプリを設定する必要があります。正しいバージョンを確認することにより、古いバージョンとの互換性を維持しながら、現在と将来どちらのVegaデバイスでもアプリが正しく動作することを保証できます。 RNVは、互換性の問題を処理するために以下の2つの主要なソリューションを提供しています。

• デュアルバンドルパッケージ：RNVには、各アプリにコンパイル済みJavaScriptコードとコンパイル前のJavaScriptコードの両方が含まれています。そのため、デバイスが新しいバージョンのJavaScriptエンジン（Hermes）で更新された場合、Amazonアプリストアはインストール中にアプリのコードを自動的に再コンパイルできます。
• バージョン管理システム：アプリの依存関係について、必要最小バージョンと推奨バージョンの両方を指定できます。このバージョン管理により、アプリストアはどのデバイスでアプリを実行できるかを判断できます。RNVには、あるデバイスで依存関係の特定のバージョンを使用できるかどうかを確認するためのisPresentOnOSというツールも用意されています。

これらの機能は、Vegaデバイスのバージョンが異なる環境でも、アプリが継続的に動作することを支援します。 RNVチームはMeta（旧Facebook）と協力して、React Nativeの安定性向上に取り組んでいます。Metaは最近、React Native向けの安定したJavaScript APIを始めてリリースし、今後は全プラットフォームで他の機能の安定化も進めていく予定で、この安定化の取り組みにより、Hermes JavaScriptエンジンの後方互換性を確保します。これが完了すれば、RNVアプリはVegaオペレーティングシステムのあらゆるバージョンで正しく動作できるようになります。

​

ヘッドレスJavaScriptコード

Vegaでは、ヘッドレスタスク/サービスを通じて、バックグラウンドでJavaScriptコードを実行できます。ヘッドレスタスクは一度かぎりの処理を独立して実行する役割を担い、ヘッドレスサービスはUIとバックグラウンドプロセス間の継続的な連携を実現します。このアーキテクチャは、メディアの再生やEPGデータ同期など、リソースを大量に消費する操作をメインのUIスレッドから切り離すことでパフォーマンスを向上させます。各ヘッドレスコンポーネントは、Hermesを基盤とした独自のJavaScriptランタイムインスタンスで実行されます。ヘッドレスランタイムは、メモリ使用量を最小限に抑えるために、サポート対象モジュールを必要最低限に絞って最適化されています。アプリは、ヘッドレスJS再生サービスなどのAPIを通じてこの機能を活用できます。このサービスでは、メディアをUIとは別に処理することで、最初の動画フレームまでの時間が最大30%短縮されました。

​

バージョン管理とアップグレード

VegaはRNVの新しいバージョンを年に1回リリースする予定です。一度にサポートされる新しいシステムバージョンは3つで、各バージョンのサポート期間は3年です。より多くのバージョンサポートにより、準備が整い次第アプリを更新できる一方、異なるデバイスバージョン間での互換性も維持できます。アプリに必要なRNVバージョンは設定で指定できます。 デバイスのストレージとメモリを節約するために、事前読み込みされるのは最新の2バージョンのみとなります。Amazonでは、アプリのバージョン間移行をより容易に行えるよう、アップグレード支援ツールの開発を進めています。また、3年間のサポート期間内にアプリを更新できない開発者を支援するためのソリューションについても検討を進めています。

---