TikTok 採用 Jetpack Compose 後，程式碼大小減少 58%，新功能應用程式效能也獲得提升

TikTok 是全球知名的短片平台，擁有龐大的使用者群和創新功能。團隊會持續為使用者發布更新、實驗和新功能。在管理技術債務的同時，如何維持開發速度是 TikTok Android 團隊面臨的挑戰，因此他們選擇採用 Jetpack Compose。

該團隊希望加快產品需求疊代速度，並提升疊代品質。團隊希望透過 Compose 減少程式碼編寫量和認知負荷，同時提升效能和穩定性，進而提高工程效率。

簡化複雜的 UI，提高開發人員工作效率

TikTok 頁面通常比表面上看起來更複雜，包含許多分層條件式需求。這種複雜性往往導致難以維護、結構不佳的檢視區塊階層，以及過多的檢視區塊巢狀結構，進而導致效能下降，因為測量傳遞次數增加。

Compose 直接解決了這個結構性問題。

此外，Compose 的評估策略有助於減少重複課稅，讓您更輕鬆地評估成效並進行最佳化。

為提升開發人員的工作效率，TikTok 的中央設計系統團隊為處理不同應用程式功能的團隊提供元件程式庫。團隊發現，使用 Compose 開發作業很簡單；善用小型可組合函式非常有效，而納入具有條件邏輯的大型 UI 區塊時，不僅簡單明瞭，而且負擔極小。

透過策略性遷移，為未來發展鋪路

TikTok 策略性地採用 Jetpack Compose，不僅能持續專注於為使用者打造優質體驗，還能有效控制技術債。Compose 可清楚處理條件式邏輯並簡化組合，因此團隊在新的或完全重寫的頁面上，頁面載入時間最多減少了 78%。 如果是較小的案例，這項改善措施可提升 20% 至 30% 的速度；如果是完整重寫和新功能，則可提升 70% 至 80% 的速度。與以 Views 建構的相同功能相比，他們也減少了 58%的程式碼大小。 該團隊進一步分享了幾項心得：

TikTok 團隊的整體策略是逐步移轉特定使用者歷程。這讓他們有機會遷移、確認可衡量的效益，然後擴展到更多螢幕。他們先使用 Compose 簡化 QR code 功能的整體結構，並發現成效有所提升。之後，團隊將遷移作業擴展至登入和註冊體驗。

該團隊分享了一些額外的學習內容：

在遷移期間檢查效能時，TikTok 團隊發現使用許多小型 ComposeView 取代單一 ViewHolder 內的元素，會造成組合負擔。他們將遷移作業擴大到整個 ViewHolder，只使用一個 ComposeView，成效更上一層樓。

遷移 ViewPager 內的片段時，如果片段具有自訂高度邏輯和條件邏輯，可根據實驗結果隱藏及顯示 UI，效能不會受到影響。在本例中，將 ViewPager 遷移至可組合函式的成效，優於遷移 Fragment。

Jun Shen 非常喜歡 Compose，因為「可減少功能開發所需的程式碼量、提升可測試性，並加快交付速度」。該團隊計畫逐步提高 Compose 的採用率，長期而言，Compose 將成為他們的首選架構。Jetpack Compose 證明是強大的解決方案，可大規模改善開發人員體驗和生產指標。

開始使用 Jetpack Compose

進一步瞭解 Jetpack Compose  如何協助您的團隊。