個案研究

TikTok 使用 Jetpack Compose 將程式碼大小縮減 58%,並提升新功能的應用程式效能

2 分鐘閱讀

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

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

簡化複雜的 UI,提升開發人員工作效率

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

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

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

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

junShenTikTok.png

透過策略性遷移打造未來發展方向

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

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

該團隊分享了其他一些心得:

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

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

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

開始使用 Jetpack Compose

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

撰寫者:

繼續閱讀