2020年、フリマアプリで有名な「メルカリ」のチームは、Androidアプリの技術基盤を更新する大規模な取り組みを開始した。当時、コードベースは7年前のもので、大きなアーキテクチャ更新が行われていなかった。これにより、新機能の開発やタイムリーなアプリ更新が困難になっていた。この技術的負債を解消するため、メルカリはGroundUPと呼ばれる取り組みを開始し、Androidを含むすべてのプラットフォームでアプリケーションを完全に書き直したのだ。

その目的は、スケーラブルなデザインを持つ完全に近代化されたアプリケーションを作成することだった。メルカリは、アプリのリニューアルにあたって、Android向けの最新の宣言的UIツールキットであるJetpack Composeを採用した。Jetpack Composeを用いることで、コードベースの整理やアプリの見た目をよりコントロールしやすくなることが判明したのだ。

メルカリの開発チームは、Jetpack Composeを使用してAndroidアプリのアーキテクチャと技術スタックを完全に書き直した。開発者たちは、新しいデザインシステムを作成し、Composeを使って完全に統合することで、新機能のテストや実装が容易になったという。この新しいデザインシステムを利用して、メルカリは市場向けの130以上のUI画面をリライトし、多くのコンポーネントの見た目と操作感を刷新した。

Jetpackライブラリのおかげで、メルカリのチームはリライト中にすべてのレガシーコードを排除することができ、コードベースを大幅に削減し、開発者にとってより管理しやすくなったという。メルカリのAndroid技術リーダーであるAllan Conda氏は、「ほぼ同じアプリでありながら、コードがはるかに少なくなりました。リライト後のアプリは、以前のものより約355,000行のコードが少なくなり、69%の削減になりました」と述べている。

GroundUPイニシアチブが始まった当初、Jetpack Composeは開発者プレビュー版しか利用出来なかったが、メルカリはUI作成の新しい宣言的アプローチを活用するため、Jetpack Composeでアプリを完全に作り直すことを決定した。しかし、Jetpack Composeはまだ新しかったため、両方のツールキットを使ってユニークなエッジケースを解決する必要があった。

例えば、メルカリの出品フォーム画面では、ユーザーに出品したい商品の詳細を入力するよう促され、端末のギャラリーから写真を選択して画面上でドラッグで並べ替えることができるようになる予定だった。しかし、当時のJetpack ComposeにはジェスチャAPIがなかったため、チームはComposeのAndroidViewを利用して、出品フォーム画面でジェスチャを扱うViewをシームレスに統合した。これにより、Jetpack Composeでジェスチャ機能が利用可能になるまでの間、安定した一時的な解決策が提供された。

メルカリチームは、2つのツールキット間を切り替えるのがどれだけ簡単かに感銘を受け、ComposeとViewを並行して使用することで、エッジケースへの対応が向上した。現在、ComposeはジェスチャAPIをサポートしており、メルカリの開発者はComposeだけを使ってドラッグジェスチャコンポーネントを完全に実装している。

Jetpack Composeは、メルカリが初めて採用してから大きく成熟し、ほとんどのAndroid開発者はComposeで完全にアプリを作成できるため、両方のツールキットを使い分ける必要はなくなった。

Composeを使用して、メルカリチームはアプリの安定版リリースごとにベースラインプロファイルの自動生成を実現し、これが非常に役立つことが分かった。デフォルトのComposeベースラインプロファイルを使用すると、ホーム画面のフレーム描画速度が2倍に向上した。カスタムプロファイルを提供することで、デフォルトのベースラインプロファイルだけでなく、メルカリユーザーがスクロールするときの速度が最大20%向上したという。

また、チームはAndroid Macrobenchmarkを用いてアプリのコアシナリオに基づく自動パフォーマンステストを作成した。Conda氏は、「Android Macrobenchmarkを使用することで、起動時間、スクロール速度、画面読み込み速度のパフォーマンスを自動的にテストできます。現在、これらのテストで検索結果や商品閲覧など6つのコアシナリオがカバーされています」と述べてる。

さらに、メルカリの開発者は、リアルタイムのアプリパフォーマンス監視ツールであるFirebase Performance Monitoringを、Compose画面のスクロールパフォーマンスを計算するカスタムコードと組み合わせて導入した。Firebase Performance Monitoringを使用して、メルカリチームは検索結果画面でのパフォーマンス問題を検出した。Android Profilerを使用して問題を特定したところ、検索結果をスクロールする際のフレームレートが低いことが判明した。これにより、描画速度の遅いインスタンスが約23.6%減少したという。

メルカリチームは、GoogleのComposeパフォーマンスベストプラクティスとComposeの安定性を指針に、このフレームレートの問題を解決した。メルカリの開発者たちは、検索結果画面で未使用の状態を吊り上げ、そのComposaeをスキップさせることで、フレームレートが大幅に向上した。

コードが少なくなったことで、メルカリの開発者にとって、機能のテストや実装がはるかに容易になった。「リフレッシュされたプラットフォームを使って、ついに実施できる多くの実験があります。メルカリアプリには、これまでよりも迅速に新機能が登場することが期待できます」とConda氏は語っている。

メルカリの開発者は、Animation APIを使用してアプリをさらに開発することを期待している。Composeを使用することで、コンポーネントのアニメーションがはるかに簡単になり、Android UXの大幅な改善が期待出来る。

Source

• Android Developers Blog: Mercari reduces 355K lines of code, a 69% difference, by rebuilding with Jetpack Compose