TikTok は Jetpack Compose を使用してコードサイズを 58% 削減し、新機能のアプリのパフォーマンスを向上

TikTok は、大規模なユーザーベースと革新的な機能で知られるグローバルなショートムービー プラットフォームです。チームは、ユーザー向けにアップデート、試験運用、新機能を常にリリースしています。技術的負債を管理しながら速度を維持するという課題に直面した TikTok Android チームは、Jetpack Composeに目を向けました。

チームは、プロダクト要件の反復をより迅速かつ高品質に実現したいと考えていました。Compose を活用することで、コードの記述量を減らして認知負荷を軽減し、エンジニアリングの効率を向上させるとともに、パフォーマンスと安定性を高めることを目指しました。

複雑な UI を効率化してデベロッパーの生産性を向上

TikTok のページは、見た目よりも複雑で、多数のレイヤ化された条件付き要件が含まれていることがよくあります。この複雑さにより、保守が難しい、最適化されていない構造のビュー階層や、過剰なビューのネストが発生し、測定パスの数が増加してパフォーマンスが低下していました。

Compose は、この構造上の問題に対する直接的なソリューションを提供しました。

さらに、Compose の 測定戦略 は 二重課税 を軽減し、測定パフォーマンスの最適化を容易にします。

デベロッパーの生産性を向上させるため、TikTok の中央デザイン システム チームは、さまざまなアプリ機能に取り組むチーム向けにコンポーネント ライブラリを提供しています。 チームは、Compose での開発はシンプルであることに気づきました。小さなコンポーズ可能関数を活用することは非常に効果的であり、条件付きロジックを含む大きな UI ブロックを組み込むことは簡単で、オーバーヘッドも最小限に抑えられます。

戦略的な移行による今後の道筋の構築

Jetpack Compose を戦略的に採用することで、TikTok は技術的負債を抑えながら、ユーザーに優れたエクスペリエンスを提供することに引き続き注力できました。Compose の条件付きロジックを適切に処理してコンポジションを効率化する機能により、チームは新しいページまたは完全に書き換えられたページのページ読み込み時間を最大 78% 短縮できました。 この改善は、小規模なケースでは 20 ～ 30%、完全な書き換えと新機能では 70 ～ 80% でした。また、Views で構築された同じ機能と比較してコードサイズを 58%削減、 できました。 チームは、さらにいくつかの学びを共有しています。

TikTok チームの全体的な戦略は、特定のユーザー ジャーニーを段階的に移行することでした。これにより、移行して測定可能なメリットを確認し、より多くの画面にスケールすることができました。まず、Compose を使用して QR コード機能の全体的な構造を簡素化し、改善を確認しました。その後、ログインと登録のエクスペリエンスに移行を拡大しました。

チームは、さらにいくつかの学びを共有しています。

移行中にパフォーマンスを確認したところ、TikTok チームは、1 つの ViewHolder 内の要素を置き換えるために多くの小さな ComposeViews を使用すると、コンポジションのオーバーヘッドが発生することに気づきました。移行を拡大して ViewHolder 全体に 1 つの ComposeView を使用することで、より良い結果が得られました。

ViewPager 内の Fragment を移行する場合、カスタムの高さロジックと、試験運用に基づいて UI の表示と非表示を切り替える条件付きロジックがある場合、パフォーマンスに影響はありませんでした。この場合、Fragment を移行するよりも、ViewPager をコンポーズ可能関数に移行する方がパフォーマンスが向上しました。

Jun Shen は、Compose が「機能開発に必要なコード量を減らし、テストのしやすさを向上させ、リリースを加速させる」ことを高く評価しています。チームは、Compose の採用を段階的に増やし、長期的には優先フレームワークにすることを目指しています。Jetpack Compose は、デベロッパー エクスペリエンスと本番環境の指標の両方を大規模に改善するための強力なソリューションであることが証明されました。

Jetpack Compose を使ってみる

Jetpack Compose  がチームにどのように役立つかについて詳しくは、こちらをご覧ください。