0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Jetpack Compose助力Play商店实现进一步的优化

谷歌开发者 来源:Android 开发者 作者:Android 开发者 2022-04-02 13:38 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

作者 / Google Play 技术负责人 Andrew Flynn 和 Jon Boekenoogen

2020 年,Google Play 商店开发团队管理层做出了一个重大决定: 改造整个 Play 商店技术栈。因为现有代码的历史已经长达 10 多年,在无数的 Android 平台版本发布和功能更新的过程中产生了巨大的技术负债。我们需要新的框架,在不影响开发者的工作效率、用户体验或 Play 商店自身性能的同时,能够支撑数百名工程师同时开展工作。

我们为此制定了一个长期路线图,来更新商店内从网络层一直到像素渲染的所有内容。在这之中,我们还想要采用现代的声明式界面框架,以实现我们围绕交互性和用户满意度的产品目标。在分析了各种选择后,我们做出了 (在当时) 一个大胆的决定——使用当时还处于 Alpha 预览阶段的 Jetpack Compose。

从那时起,Google Play 商店与 Jetpack Compose 团队密切合作,发布并完善了满足我们特定需求的 Jetpack Compose 版本。本文将为您介绍我们的迁移方法以及在此过程中发现的挑战和优势,并分享一些对于有众多贡献者的应用选择 Compose 的洞察。

优先考虑

当我们对新的界面渲染层使用 Jetpack Compose 时,需要优先考虑以下两点:

开发者的工作效率: Play 商店团队有数百个工程师改进代码,因此开发起来应该很容易 (也很有趣)。

性能: Play 商店会渲染大量媒体密集型内容,其中很多业务指标对延迟和卡顿十分敏感,所以我们需要确保它在所有设备上表现良好,尤其是低内存硬件和 Android (Go 版本) 设备。

开发者的工作效率

一年多来,我们一直在使用 Jetpack Compose 编写用户界面代码,也得益于 Jetpack Compose 让界面开发变得更加简单。

我们倾向于编写界面时使用更少的代码,有时甚至可以减少 50%。此项改进的实现得益于 Compose 是一个利用了 Kotlin 简洁性的声明式界面框架。自定义绘图和布局现在是简单的函数调用,而不用再通过对视图子类进行各种复写。

以评分表格为例:

使用视图类编写,此表格包含:

总共 3 个视图类,其中 2 个需要自定义绘制圆角矩形和星形

约 350 行 Java 代码,55 行 XML

使用 Compose 编写,此表格包含:

所有的 @Composable 函数都包含在同一文件和语言中!

约 210 行 Kotlin 代码

动画因其简单、富有表现力

而成为 Compose 备受赞誉的一项功能。我们的团队正在使用 Compose 构建动效功能,极大地提高了 Play 商店用户的满意度。借助 Compose 的声明性和动画 API,编写连续或并行动画从未如此简单。我们的团队不再担心关于动画取消和回调链的所有极端情况。Lottie 是一个流行的动画库,已经提供了易于使用的 Compose API。

现在您可能会想: 这一切听起来都很棒,但提供视图的库依赖项呢?确实,并非所有的库开发者都实现了基于 Compose 的 API,尤其是在我们首次迁移时。但是,Compose 通过其 ComposeView 和 AndroidView API 提供了简单的视图互操作性。我们以这种方式成功地与 ExoPlayer 和 YouTube Player 等流行库集成。

性能Play 商店和 Jetpack Compose 团队密切合作,以确保 Compose 可以像视图框架一样快速运行并且没有卡顿。由于需要把 Compose 打包在应用中 (而不是作为 Android 框架的一部分),这是一项艰巨的任务。在屏幕上渲染单个界面组件很快,但是将整个 Compose 框架加载到应用内存中所用的端到端时间却很长。

Play 商店采用 Compose 后最大的性能改进之一来自基准配置文件的开发。虽然已经推出了一段时间的云配置文件可以帮助改善应用启动时间,但是它们只适用于 API 28+,且对于更新节奏频繁 (每周) 的应用效果不佳。为了解决这一问题,Play 商店和 Android 团队合作开发了基准配置文件 (Baseline Profiles): 开发者预定义打包好的、应用可以指定的一个配置文件,它们随您的应用提供,与云配置文件完全兼容,并且可以在具体应用级别和库级别进行定义 (适配 Compose 的开发者可免费使用此功能!)。通过推出基准配置文件,Play 商店发现其搜索结果页的初始页面渲染时间减少了 40%。这是巨大的进步!

重复使用界面组件是使 Compose 在渲染方面表现出色的核心机制,尤其是在滚动情况下。Compose 会尽可能跳过已知可以跳过的可组合项的重组 (例如,它们是不可变的),但是如果所有参数满足 @Stable 注释要求,开发者也可以强制将可组合项设置为可跳过。Compose 编译器还提供了一份便捷指南,说明防止特定函数被跳过的原理。当在 Play 商店中创建在滚动情况下频繁使用的大量重复使用界面组件时,我们发现不必要的重组会增加丢失的帧时间,从而导致卡顿。我们建立了一个修饰符 (Modifier),以便在我们的调试设置中轻松发现这些重组。通过将这些技术应用于我们的界面组件,我们能够将卡顿减少 10-15%。

为 Play 商店应用优化 Compose 的另一个关键是为整个应用制定详细的端到端的迁移策略。在最初的集成实验中,我们遇到了双栈问题: 在单个用户会话中同时运行 Compose 和视图类渲染非常占用内存,尤其是在低端设备上。当代码在同一页面上运行时就会出现这种情况,当两个不同的页面 (例如,Play 商店主页和搜索结果页) 各自位于不同的堆栈上时,也会出现这种情况。为了改善这种启动延迟,我们为页面迁移到 Compose 的顺序和时间安排制定一个具体计划,这是非常重要的。同时我们发现,在应用迁移到完全使用 Compose 进行渲染使用之前,对一些通用类进行一定的 "预热" 是有助于提高内存性能的。

将 Compose 从 Android 框架中分离出来减少了我们团队直接为 Jetpack Compose 做出贡献的开销,从而缩短了改进工作的周转时间,使所有开发者受益。我们与 Jetpack Compose 团队合作,推出 LazyList 项目类型缓存等功能,并快速进行轻量级修复,如额外的对象分配。

展望未来

Play 商店采用 Compose 后,提升了我们团队开发者的幸福感,并大大提高了代码质量和健康度。所有的全新 Play 商店功能都建立在此框架之上,且 Compose 有助于为应用实现更快的速度和更顺畅的访问。由于我们 Compose 迁移策略的性质,我们无法准确衡量 APK 大小变化或构建速度等,但是我们看到的所有迹象都非常积极!

Compose 是 Android 界面开发的未来,也帮助 Play 商店实现了进一步的优化。欢迎您持续关注我们了解最新内容。

原文标题:使用 Jetpack Compose 提升 Play 商店的用户体验

文章出处:【微信公众号:谷歌开发者】欢迎添加关注!文章转载请注明出处。

审核编辑:汤梓红

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • Android
    +关注

    关注

    12

    文章

    3985

    浏览量

    133058
  • Google
    +关注

    关注

    5

    文章

    1801

    浏览量

    60264
  • 设备
    +关注

    关注

    2

    文章

    4783

    浏览量

    73282

原文标题:使用 Jetpack Compose 提升 Play 商店的用户体验

文章出处:【微信号:Google_Developers,微信公众号:谷歌开发者】欢迎添加关注!文章转载请注明出处。

收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    BlackBerry QNX与芯驰科技进一步深化战略合作

    BlackBerry有限公司(纽约证券交易所代码:BB;多伦多证券交易所代码:BB)旗下业务部门QNX与中国创新汽车半导体供应商芯驰科技今日宣布,双方将进一步深化合作,基于芯驰科技最新代X10
    的头像 发表于 12-04 16:42 998次阅读

    BlackBerry QNX与众森软件进一步深化战略合作

    今日,深圳市众森软件有限公司(以下简称"众森软件")正式宣布与全球领先的实时操作系统与嵌入式软件供应商 QNX(BlackBerry有限公司旗下部门QNX)进一步深化战略合作。此次合作将进一步推动下代智能网联汽车与智慧出行解决
    的头像 发表于 12-04 16:40 1118次阅读

    纳微半导体与文晔科技进一步强化战略合作

    ——文晔科技股份有限公司(台股代码:3036)今日宣布双方将进一步强化战略合作,共同为亚洲市场提供更强大的氮化镓与碳化硅功率器件技术支持与供应链服务。
    的头像 发表于 12-04 15:13 323次阅读

    上汽奥迪与创维汽车智能合作进一步深化升级

    近日,创维汽车智能迎来重要突破:上汽奥迪客户将当前公司开发的显示屏项目沿用至上汽奥迪其他主力车型。这决定不仅体现了客户对创维汽车智能技术实力与服务品质的高度认可,更标志着双方合作进一步深化升级。
    的头像 发表于 11-25 10:32 440次阅读

    美国 | FCC即将通过新规,进一步封堵华为、海康威视

    FCC即将通过新规,进一步封堵华为、海康威视2025年10月7日,美国联邦通信委员会(FCC)主席宣布,FCC委员会即将投票表决项新规,旨在填补现有法规中可能被利用的两大漏洞,以阻止存在“风险
    的头像 发表于 10-13 18:11 418次阅读
    美国 | FCC即将通过新规,<b class='flag-5'>进一步</b>封堵华为、海康威视

    云知声与头部财产保险公司进一步扩大合作

    近日,云知声智能科技股份有限公司(以下简称“云知声”,股票代码:9678.HK)与某头部财产保险公司(以下简称“该财险公司”)进一步扩大合作,双方正式签署协议,将业务从智能医疗审核延伸至该财险公司关注的伤残等级、三期鉴定等更多维度的车险核赔风控业务,标志着双方合作进入规模化、深层次新阶段。
    的头像 发表于 09-10 15:43 583次阅读

    蔚来进一步拓展其全球业务

    8月18日,蔚来公司宣布将于2025年至2026年期间陆续进入新加坡、乌兹别克斯坦和哥斯达黎加三个市场,进一步拓展其全球业务,为当地用户带来创新、可持续、高品质的智能电动出行体验。
    的头像 发表于 08-20 17:00 1121次阅读

    广和通助力客户实现北欧5G CPE部署

    广和通基于FG370的BE7200 5G CPE解决方案成功助力客户赢得北欧某主流运营商5G CPE标案并实现批量交付。该项目的成功进一步说明广和通在高性能、高集成度5G CPE领域的技术与产品实力再获国际高端市场认可。
    的头像 发表于 08-16 16:47 1875次阅读

    全新导航库Jetpack Navigation 3发布

    在应用中的不同屏幕之间导航理应简单明了。然而,构建稳健、可扩展且赏心悦目的导航体验却并非易事。多年来,Jetpack Navigation 库直是开发者的重要工具,但随着 Android 界面格局的演变,尤其是 Jetpack
    的头像 发表于 08-06 13:56 948次阅读

    软通动力与中国联通合作关系进一步深化

    近日,软通动力成功中标联通(广东)产业互联网有限公司2025年软件技术开发集中采购项目,中标份额位列榜首。这突破性成果,不仅彰显了软通动力在数字技术服务领域的综合实力,也标志着其与中国联通合作关系的进一步深化。
    的头像 发表于 07-01 09:18 943次阅读

    晶圆级封装:连接密度提升的关键一步

    了解晶圆级封装如何进一步提高芯片的连接密度,为后续技术发展奠定基础。
    的头像 发表于 06-27 16:51 533次阅读

    5G与工业互联网如何进一步融合?

    5G与工业互联网的进一步融合可以从多个方面入手,以实现更高效、智能、灵活的工业生产与管理。以下是些具体的融合方向和建议: 、技术融合与创新 增强网络连接能力 : 5G网络以其高速率
    的头像 发表于 06-18 17:46 777次阅读

    YouTube加入佛瑞亚旗下Appning车载应用商店

    FORVIA佛瑞亚集团旗下品牌Appning,将YouTube集成至其领先的车载应用商店进一步提升驾乘者的车载娱乐体验!
    的头像 发表于 04-14 09:37 812次阅读

    迅为2K0300开发板进一步刨析,打造HMI体机产品的灵活优势

    迅为2K0300开发板进一步刨析,打造HMI体机产品的灵活优势
    的头像 发表于 02-26 13:58 1032次阅读
    迅为2K0300开发板<b class='flag-5'>进一步</b>刨析,打造HMI<b class='flag-5'>一</b>体机产品的灵活优势

    详解Jetpack Compose布局流程

    我们与 Android 经典视图系统的生命周期 (Measure,Layout,Drawing) 做个对比: 组合是 Compose 的特有阶段,是其能够通过函数调用实现声明式 UI 的核心,想要深入理解
    的头像 发表于 02-05 13:38 1045次阅读
    详解<b class='flag-5'>Jetpack</b> <b class='flag-5'>Compose</b>布局流程