案例研究

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

阅读用时:2 分钟

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 具有自定义高度逻辑和基于实验结果隐藏和显示界面的条件逻辑,则性能不会受到影响。在这种情况下,将 ViewPager 迁移到可组合项的效果优于迁移 Fragment。

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

Jetpack Compose 使用入门

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

继续阅读