案例研究

TikTok 借助 Jetpack Compose 将代码大小缩减 58%,并提升了新功能的应用性能

阅读时间:2 分钟
月 13 日
Ben Trengrove & Ajesh Pai

TikTok 是一个全球性的短视频平台,以庞大的用户群和创新功能而闻名。该团队不断为用户发布更新、实验和新功能。面对在管理技术债务的同时保持开发速度的挑战,TikTok Android 团队转而使用 Jetpack Compose

该团队希望能够更快、更高质量地迭代产品需求。通过利用 Compose,该团队希望通过编写更少的代码和降低认知负荷来提高工程效率,同时实现更好的性能和稳定性。

简化复杂的界面以提高开发者的工作效率

TikTok 页面的复杂程度往往超出表面所见,其中包含许多分层的条件要求。这种复杂性通常会导致难以维护、结构欠佳的视图层次结构和过多的视图嵌套,从而导致测量传递次数增加,进而导致性能下降。

Compose 为此结构性问题提供了直接的解决方案。

此外,Compose 的 测量策略 有助于减少 双重征税,从而更轻松地优化测量性能。

为了提高开发者的工作效率,TikTok 的中央设计系统团队为负责不同应用功能的团队提供了一个组件库。 该团队观察到,在 Compose 中进行开发非常简单;利用小型可组合项非常有效,而整合包含条件逻辑的大型界面块既简单又开销极小。

junShenTikTok.png

通过战略性迁移开辟前进道路

通过战略性地采用 Jetpack Compose,TikTok 能够控制技术债务,同时继续专注于为用户打造卓越的体验。Compose 能够清晰地处理条件逻辑并简化组合,这使得该团队能够将新页面或完全重写页面的页面加载时间缩短高达 78%。 在较小的情况下,这种改进幅度为 20%–30%,对于完全重写和新功能,则为 70%–80%。与在视图中构建相同功能相比,他们还能够将代码大小缩减 58%  该团队还分享了一些经验教训:

TikTok 团队的总体策略是逐步迁移特定的用户体验历程。这让他们有机会进行迁移,确认可衡量的优势,然后扩展到更多屏幕。他们首先使用 Compose 来简化二维码功能中的整体结构,并看到了改进。该团队后来将迁移扩展到了登录和注册体验。

该团队分享了一些额外的经验教训:

在迁移期间检查性能时,TikTok 团队发现,使用许多小型 ComposeView 替换单个 ViewHolder 中的元素会导致组合开销。通过将迁移扩展为对整个 ViewHolder 使用单个 ComposeView,他们取得了更好的结果。

在 ViewPager 中迁移 Fragment 时,性能没有受到影响,因为该 Fragment 具有自定义高度逻辑和条件逻辑,可根据实验隐藏和显示 UI。在这种情况下,将 ViewPager 迁移到可组合项比迁移 Fragment 的效果更好。

Jun Shen 非常喜欢 Compose,因为它“减少了功能开发所需的代码量,提高了可测试性,并加快了交付速度”。该团队计划稳步提高 Compose 的采用率,使其成为长期首选的框架。事实证明,Jetpack Compose 是一种强大的解决方案,可大规模提升开发者体验和生产指标。

Jetpack Compose 使用入门

详细了解 Jetpack Compose 如何帮助您的团队。

作者:

继续阅读