Compose 线上分享会内容

本次分享有录屏，可查看 BaguTree 组织地址，感谢校长、强哥、超哥提供的分享平台：http://jetpack.net.cn/#/blog/all[1]

本期分享目标：让还在观望的开发者们可以没有顾虑的用上 Compose

• 在与一些开发者沟通的过程中发现，有很多开发者并不知道怎么接入 Compose，有的可能尝试接入了，但会报各种奇奇怪怪的编译错误，如果在工程接入这块就发生问题了的话，这简直就是还没入门就劝退。
• 也有的开发者以为需要 AGP 7.0 以上才能使用 Compose，对于目前现存的老工程无法接入。但到底是哪个版本才开始支持，还是有很多人不清楚。

一、Compose 是什么

• 为什么采用 Compose[2]

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发，打造生动而精彩的应用。它可让您更快速、更轻松地构建 Android 界面

1、更少的代码以及更快速的开发

例如一个列表控件：

• compose:

LazyColumn() {
    items(apkInfos, key = { apk -> apk.packageName!! }) { apk ->
        AppInfoItem(apk) {}
    }
}

• 原生 RecyclerView

val rv = findViewById<RecyclerView>(R.id.rv)
val adapter = AppListAdapter()
rv.layoutManager = LinearLayoutManager(this)
rv.adapter = adapter

// 1、要写 Adapter 类
class AppListAdapter() : ListAdapter<ApkInfo, AppListAdapter.AppListViewHolder>(AppListDiff) {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AppListViewHolder {
       ...
    }

    override fun onBindViewHolder(holder: AppListViewHolder, position: Int) {
        ...
    }
}

// 2、要写 ViewHolder 类
class AppListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
       ...
}
// 3、要写 Diff 类
private object AppListDiff : DiffUtil.ItemCallback<ApkInfo>() {
      ...
}
// 4、xml 部分代码

2、直观

Compose 使用声明式 API，可以显示声明组件与状态，并且可以很直观的查看状态在组件上的流转。

3、强大的兼容性

原生可以嵌套 Compose，Compose 可以嵌套原生，并且可以无缝的使用 Jetpack 组件，例如 ViewModel、LiveData、Flow 等

Compose 中嵌套原生 View 原理

二、如何学习 Compose

学习一门框架的几个步骤：

官方学习资料：

• 了解官方走向：Jetpack Compose 路线图[3]
• 了解 Compose 的样貌：使用 Jetpack Compose 更快地打造 更出色的应用[4]
• 官方教程文档 : Jetpack Compose 使用入门[5]
• 跟着官方动手实践：Compose Codelabs[6]
• 参考官方写的应用：Compose-Sample[7]
• Compose 补充库，有很多 UI 框架：Accompanist[8]

博文资料：

• 官方公众号：Jetpack Compose(https://mp.weixin.qq.com/mp/homepage?__biz=Mzk0NDIwMTExNw==&hid=13&sn=92a0fbf8f1b75db9d1db83e858da83fd&scene=18)
• fundroid Compose 系列(https://mp.weixin.qq.com/mp/appmsgalbum?action=getalbum&__biz=Mzg5MzYxNTI5Mg==&scene=1&album_id=1846144099200876545&count=3&token=2135010104&lang=zh_CN#wechat_redirect)
• Compose 博物馆文档[9]
• Compose 博物馆开源项目[10]

书籍：

• 购买链接：《Jetpack Compose 从入门到实战》(王鹏，关振智，曾思淇)[11]

三、用示例了解 Compose 重组

• 沉思录 | 如何优化 Compose 的性能？通过「底层原理」寻找答案。
• 探索 Compose 内核：深入 SlotTable 系统
• 揭秘 Jetpack Compose 快照系统
• 实践 | Jetpack Compose 中的状态管理
• 深度解析 Jetpack Compose 布局
• 深入详解 Jetpack Compose | 实现原理(https://mp.weixin.qq.com/s?__biz=Mzk0NDIwMTExNw==&mid=100002002&idx=1&sn=1e13c610ced87dfa209edb72bdecfd96&scene=19&token=2135010104&lang=zh_CN#wechat_redirect)
• 深入详解 Jetpack Compose | 优化 UI 构建(https://mp.weixin.qq.com/s?__biz=Mzk0NDIwMTExNw==&mid=100002046&idx=1&sn=f1a0a2508a2ded77f7eb853b0e9e518d&scene=19&token=2135010104&lang=zh_CN#wechat_redirect)

引用朱涛老师文章的示例：

优化前：

输出结果：
MainActivity: MainScreen start
MainActivity: Greeting start Init
MainActivity: Greeting end Init
MainActivity: MainScreen end
等待 1秒
MainActivity: MainScreen start        // 重组
MainActivity: Greeting start Modified // 重组
MainActivity: Greeting end Modified   // 重组
MainActivity: MainScreen end          // 重组

优化后：

image.png

输出结果：
MainActivity: MainScreen start
MainActivity: Greeting start Init
MainActivity: Greeting end Init
MainActivity: MainScreen end
等待 1秒
MainActivity: Greeting start Modified  // 重组
MainActivity: Greeting end Modified    // 重组

一句话总结：状态读取发生在哪个 Scope，状态更新的时候，哪个 Scope 就发生重组。

上面的代码段就是采用 lambda 延迟到 Greeting 方法来读取 state.value 值，将重组限制在 Greeting 这个可组合项的作用域中。

四、Compose 的性能

• 相比 XML , Compose 性能到底怎么样？- 掘金[12]
• Google I/O : Jetpack Compose 中常见的性能问题 - 掘金[13]
• Jetpack Compose 笔记(3) - 重组的性能风险[14]

4.1 Compose 与原生启动性能比较

• Compose 与原生启动性能对比

结论：Compose 的冷启动略逊于原生，两者相差 124ms，但在热启动与温启动状态下，Compose 性能又优于原生

4.2、Compose Baseline Profiles 加持

• 官方文档：Improving performance - Baseline Profiles[15]
• Baseline Profiles 在 Compose 中的应用
• 说一说Android的Dalvik，ART与JIT，AOT[16]

结论：有 Profiles 加持时，启动优化了 30ms

注意：

• 通过查看 AGP 源码了解到，Baseline Profiles 的 task 只在 AGP 7.0 版本才支持，7.0 以下的 AGP 跑 Compose项目时，享受不到 Baseline Profiles 带来的优化

五、Compose 与 AGP(android-gradle-plugin)、KGP(kotlin-gradle-plugin) 的关系

• Compose 与 AGP、KGP 的关系
• AGP 支持正式版 Compose 的最低版本

Compose、AGP、KGP 依赖关系图

基于 KCP(kotlin compiler plugin) 的插件有：

• Compose Compiler

• kotlin-android-extension

• kapt

Kotlin 插件的工作过程(图来自朱涛老师文章)

5.1 Compose 版本最佳配置:

// project build.gradle
buildscript {
   ext.kotlin_version = '1.6.10'
   ext.compose_version = '1.1.0'
   ...
   dependencies {
      ...
      classpath 'com.android.tools.build:gradle:4.1.0'
      classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
   }
}

// app build.gradle
android {
    ...
    buildFeatures{
        compose true
    }
    // 重点：覆盖掉 AGP 中的默认配置
    composeOptions{
        kotlinCompilerVersion  "$compose_version"
        kotlinCompilerExtensionVersion  "$kotlin_version"
    } 
}

Compose 与 Kotlin 的兼容性对应关系[17]

5.2 Compose 在 AGP 不同版本的表现

• AGP 4.2.0 以下不支持正式版本的 Compose。在查看 AGP 4.1.0 时，该版本内置的 compose-compiler 依赖是 androidx.compose:compiler，而正式版本的依赖是 androidx.compose.compiler:compiler
• AGP 4.2.0 开始支持正式版本的 Compose。可根据 composeOptions 来自由配置 compose 版本，但版本需要参考兼容性文档
• AGP 7.0 以下不支持 ArtProfileTask，这会导致无法生成 baseline.prof 文件，进而享受不到 Baseline Profiles 带来的性能优化，结果就是性能不佳
• AGP 7.0 开始支持正式版 Compose 与 Baseline Profiles

六、Compose 对编译速度的影响

• Kotlin 编译之路 “JAVA编译器”[18]
• Kotlin 编译之路 “Kotlin编译器”[19]
• Jetpack Compose 导致的编译劣化 | KCP 简介 - 掘金[20]

如果反编译过 Compose 项目的话，你会发现代码里面有各种在编译期间自动插入的 composer 代码：

然后再来探讨下，compose compiler 到底耗不耗时？需不需要去重点关注？我的总结是：

• 耗时是肯定的，但是不是痛点，我觉得得看项目结构，当项目采用壳工程+组件化方式开发，module 的耗时早就被打 aar 给均摊掉了，在主工程集成时，并不会影响编译耗时

七、Compose 跨平台现状

• Compose 跨平台现状
• GitHub - JetBrains/compose-jb[21]

Compose 跨平台现状图

iOS 、Mac 端跨平台初见端倪，但目前还是实验阶段：

总结

业务开发上，目前 Android 技术发展已经进入存量阶段，现在已经很难再出现一款框架或是技术，来颠覆我们项目的生产，Compose 的推出，无疑是给 Android 生态增添了一份生机。

对于要不要使用 Compose 这个问题，我的建议是：先尝试了解，学习官方文档，然后尝试写一些 Demo，对照着公司的项目，用 Compose 去仿写几个页面，如果整体问题不大的话，可以尝试对公司项目的二三级页面进行改造，然后通过性能监控或是用户反馈的方式，来收集一些意见。

不过话也说回来，Jetpack Compose 容器依然是一个 ViewGroup，没有脱离原生 View 体系，我觉得，问题应该不会太大，最多就是代码使用不当，重组作用域扩大，导致页面卡顿，但这种在开发期间是可以通过调试和监控可发现的，所以，大家赶紧用起来吧。

参考资料

[1]

http://jetpack.net.cn/#/blog/all: http://jetpack.net.cn/#/blog/all

[2]

为什么采用 Compose: https://developer.android.com/jetpack/compose/why-adopt?hl=zh-cn

[3]

Jetpack Compose 路线图: https://developer.android.com/jetpack/androidx/compose-roadmap

[4]

使用 Jetpack Compose 更快地打造 更出色的应用: https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.android.google.cn%2Fjetpack%2Fcompose

[5]

Jetpack Compose 使用入门: https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.android.google.cn%2Fjetpack%2Fcompose%2Fdocumentation

[6]

Compose Codelabs: https://link.juejin.cn/?target=https%3A%2F%2Fcodelabs.developers.google.com%2F%3Fcat%3DAndroid%26text%3DCompose

[7]

Compose-Sample: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fandroid%2Fcompose-samples

[8]

Accompanist: https://link.juejin.cn/?target=https%3A%2F%2Fgoogle.github.io%2Faccompanist%2F

[9]

Compose 博物馆文档: https://jetpackcompose.cn/docs/

[10]

Compose 博物馆开源项目: https://jetpackcompose.cn/docs/open-source-project/compose-douban

[11]

《Jetpack Compose 从入门到实战》(王鹏，关振智，曾思淇): https://item.jd.com/13290169.html

[12]

相比 XML , Compose 性能到底怎么样？- 掘金: https://juejin.cn/post/7008522702835154980

[13]

Google I/O : Jetpack Compose 中常见的性能问题 - 掘金: https://juejin.cn/post/7097066597222711327

[14]

Jetpack Compose 笔记(3) - 重组的性能风险: https://chenhe.me/post/jetpack-compose-notes3-recompose-performance-risk/

[15]

Improving performance - Baseline Profiles: https://developer.android.com/topic/performance/baselineprofiles#measuring-improvements

[16]

说一说Android的Dalvik，ART与JIT，AOT: https://zhuanlan.zhihu.com/p/53723652

[17]

Compose 与 Kotlin 的兼容性对应关系: https://developer.android.com/jetpack/androidx/releases/compose-kotlin

[18]

Kotlin 编译之路 “JAVA编译器”: https://zhuanlan.zhihu.com/p/76140170

[19]

Kotlin 编译之路 “Kotlin编译器”: https://zhuanlan.zhihu.com/p/76622754

[20]

Jetpack Compose 导致的编译劣化 | KCP 简介 - 掘金: https://juejin.cn/post/7115653622926409759

[21]

GitHub - JetBrains/compose-jb: https://github.com/JetBrains/compose-jb