iOSおよびAndroidアプリのネイティブからReact Nativeへの2年間にわたる移行の後、Khan AcademyのエンジニアであるBryan Clark氏は、この決定のメリットとデメリットについて意見を述べた。
Khan Academyは、デザイン、機能、コンテンツが非常に似ている2つのアプリ用の2つの独立したコードベースを維持するためのコストを削減することを目的とした実験として、2017年にReact Nativeを受け入れるための道を進み始めた。
異なるコードベースにより、エンジニアリング作業の重複に加えて、新しい機能を追加したり、既存の機能を変更したりするときに、開発者間のより複雑な相互コミュニケーションが必要となっていた。さらに、基盤となる2つのSDKによって異なるアーキテクチャの選択が行われることで、2つのアプリを機能的に同期させることが、さらにコストがかかり、ますます複雑になる傾向があった。
Khan Academyは、Walmart React Native移行ストーリと同様に、2つの既存のネイティブアプリから選択された機能がReact Nativeを使用して再実装される段階的な移行を選択した。たとえば、Khanのエンジニアは[検索]タブから始めて、その周りにブリッジを作成し、ネットワークやビジネスロジックなどのネイティブコンポーネントと共存してデータを交換できるようにした。最初のステップは、iOSおよびAndroidのコードベースをMonorepoに移行することであった。これは、両方のプラットフォームに共通するJSネイティブブリッジの開発を容易にすることを目的としている。
Clark氏によると、このフェーズは1年以上続き、かなり困難であった。なぜなら、エンジニアは常に2つの異なる技術スタックを操作しなければならなかったからである。最終的にコンテンツデータベースをJavaScriptに移動できるようになると、アプリがほぼ完全にReact Nativeになるまで、既存のネイティブコードを取り除くことができた。
Walmartの場合と同様に、このプログレッシブアプローチを選択できた主な決定は、コンテンツ画面にReact Nativeを使用することであった。そして、ネイティブビューまたはネイティブアクティビティとReact Native画面の間を移動するためにネイティブナビゲーションを使用することであった。Khanのエンジニアは独自のブリッジを開発し、Electrodeネイティブを使おうとはしなかった。Electrodeネイティブは、効率的にReact Nativeコンポーネントを既存のネイティブアプリへ統合するためにWalmartが開発したブリッジである。
Clark氏の見解では、React Nativeによってもたらされる多くの利点がある。たとえば、UIフレームワークはUIKitよりも一貫性があると感じている。
たとえば、
UICollectionViewに対して作成するコードは、UITableViewがUIStackViewとは異なるように、違うものとなりますが、React Nativeでは心配する必要はありません。
Clark氏はまた、Visual Studio Codeが、そのLinterと自動修正機能のおかげで、生産性向上の大きな助けとなると言っている。それは、チーム全体に共通のプログラミングスタイルを実践させる手助けとなる。
まったく異なる点として、一般的なJSベースのコードベースに移行すると、国際化とローカリゼーションも簡素化された。簡素化によって、Khan Academyアプリをサポートする6つのロケールからわずかな労力で19に移行することができた。
Clark氏によると、総合的にReact Nativeは、どちらのモバイルプラットフォームにも特化していないプログラマーが魅力的なモバイルアプリを作成できるようにする効果的なツールである。
React NativeでKhan Academyの旅の詳細を知りたい場合は、Clark氏の記事をお見逃しなく。