過去2年間、Walmartのエンジニアたちは、自分たちのモバイル開発ツールにReact Nativeを取り込む作業を着実に進めてきた。純粋にReact Nativeなアプリに代えて彼らが選んだのは、ネイティブとReactのよい部分を活用したハイブリッドアプリだ。
iOSとAndroidで動作するモバイルアプリの開発には、いくつかのアプローチが存在する。コードを一切共有しない、完全に独立したネイティブ実装を選ぶこともできれば、FlutterやReact Native、Ionic、Xamarinなどを使って、単一コードベースによる完全なクロスプラットフォームを目指す方法もある。あるいは、一部はネイティブで、一部にクロスプラットフォームな開発フレームワークを使用した、ハイブリッドなアプリを選択することもできる。いずれのソリューションも、それぞれにコストとメリットのバランスがあり、すべてのケースにおいてベストなソリューションというものは存在しない。
ハイブリッドアプリのアプローチは最も合理的に思われるが、テクノロジの選択を誤ると、コードベースを共有するハイブリッドアプリの開発では、ネイティブアプリを個別に開発する場合以上の隠れたコストを抱える危険性もある。それとは逆に、ネイティブとクロスプラットフォームのテクノロジを適切に併用すれば、優れたバランスが実現して、素晴らしい開発パフォーマンスを達成することができるのだ。
これはまさに、React Nativeを採用して自社の既存アプリをAndroidおよびiOS用に書き直したWalmartのケースだ。このアプローチのおかげで2倍の開発速度が実現できた、とWalmartのエンジニアたちは言う。モバイルアプリ間だけでなく、React/Redux Webアプリともビジネスロジックを共有できたこと、モバイル機能の開発にWebテクノロジの開発経験を活用できたこと、重大な問題の修正にインスタントページリロードとOver the Air(OTA)のメリットを利用できたこと、などがその理由だ。
Walmartのアプローチで重要な部分を占めるのは、同社独自のElectrodeプラットフォームと、それに付属するElectrode Nativeだ。
ソフトウェアのマイグレーションプロジェクトを成功させるには、3つのTが重要です — チーム(Team)、ツール(Tool)、そして粘り強さ(Tenacity)です。当社には以前から、モバイルアプリの開発を行うReact開発者の小さなチームがありました。彼らはそのテクノロジを高く評価していました。RNページをネイティブアプリに統合して、JavaScriptとネイティブアプリ間の標準的な通信手段を提供するものが、当時の私たちには必要だったのです。
Electrode Nativeを導入することで、AARファイルやフレームワークを使って、既存のモバイルアプリにMiniAppを統合することが可能になる。MiniAppとは、自動生成されたJavaScriptやJava、あるいはSwiftのAPIを経由して、アプリの他部分との通信が可能なReact Nativeのアプリケーションだ。さらにElectrode Nativeアプリでは、中央のドキュメントデータベースを使用して、モバイルアプリケーションのバージョンやネイティブコードの依存関係、MiniAppに関する情報を共有することもできる。
Walmartのエンジニアたちが選択したもうひとつの設計判断は、React Nativeのナビゲーションシステムの代わりにネイティブナビゲーションを使用することだった。これにより、ネイティブのアニメとスピードを備えた新しいページを、既存のビュースタックにひとつずつ統合することが可能になった。
さらに、既存のナビゲーションスタックに新たなページを組み込むことで、A/Bテストを使って新機能に対するユーザの反応を理解したり、問題が発生した場合にはReact Nativeページを一時的に無効にすることも可能になる、。
現在では、WalmartモバイルアプリのほぼすべてにReact Nativeが使用されているが、統合性を向上させる目的から、いずれのアプリもハイブリッド構成を維持していく予定だ。元の記事を読んで、詳細をすべて把握すると同時に、関連する組織的な課題と、Walmartがそれをどのように克服したかを学んでほしい。