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 內的 Fragment 時,如果 Fragment 具有自訂高度邏輯和條件邏輯,可根據實驗結果隱藏及顯示 UI,效能不會受到影響。在本例中,將 ViewPager 遷移至可組合函式的成效,優於遷移 Fragment。
Jun Shen 非常喜歡 Compose,因為「可減少功能開發所需的程式碼量、提升可測試性,並加快交付速度」。該團隊計畫逐步提高 Compose 的採用率,長期而言,這將成為他們的首選架構。Jetpack Compose 證明是強大的解決方案,可大規模改善開發人員體驗和製作指標。
開始使用 Jetpack Compose
進一步瞭解 Jetpack Compose 如何協助您的團隊。
繼續閱讀
-
個案研究
正念應用程式 Gratitude 鼓勵使用者每天寫日記、自我肯定和製作願景板,培養正念習慣。這款應用程式的下載次數超過 600 萬次,獲得 15 萬個 5 星評分,且記錄的日記條目超過 1 億則。
Amrit Sanjeev, Ash Nohe • 3 分鐘可讀完
-
個案研究
Karrot 是一款以社群為導向的超區域點對點市集應用程式,使用者可與其他已驗證的使用者買賣和交易商品。該平台於 2015 年在韓國推出,之後擴展至全球市場,目前已累積超過 4,300 萬名註冊使用者。
Thomas Ezan, Tracy Agyemang • 閱讀時間:2 分鐘
-
個案研究
Monzo 是英國數位銀行,目前有 1,500 萬名客戶,且人數持續增加中。隨著應用程式規模擴大,工程團隊發現應用程式啟動時間是需要改善的關鍵領域,但擔心這會需要大幅變更程式碼集。
Ben Weiss, Tracy Agyemang • 閱讀時間:2 分鐘
隨時掌握最新消息
每週透過電子郵件接收最新的 Android 開發洞察資訊。