BaguTree Compose 分享

BaguTree 组织地址：jetpack.net.cn/#/blog/all

目录:

1. Compose 是什么
2. 如何学习 Compose
3. 用示例了解 Compose 重组
4. Compose 的性能怎么样
5. Compose 与 AGP、KGP 的关系
6. Compose 对编译速度的影响
7. Compose 跨平台现状

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

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

一、Compose 是什么

• 为什么采用 Compose

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 路线图
• 了解 Compose 的样貌： 使用 Jetpack Compose 更快地打造 更出色的应用
• 官方教程文档 : Jetpack Compose 使用入门
• 跟着官方动手实践： Compose Codelabs
• 参考官方写的应用：Compose-Sample
• Compose 补充库，有很多 UI 框架：Accompanist

博文资料：

• 官方公众号：Jetpack Compose
• fundroid  Compose 系列
• Compose 博物馆文档
• Compose 博物馆开源项目

书籍：

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

三、用示例了解 Compose 重组

• 沉思录 | 如何优化 Compose 的性能？通过「底层原理」寻找答案。
• 探索 Compose 内核：深入 SlotTable 系统
• 揭秘 Jetpack Compose 快照系统
• 实践 | Jetpack Compose 中的状态管理
• 深度解析 Jetpack Compose 布局
• 深入详解 Jetpack Compose | 实现原理
• 深入详解 Jetpack Compose | 优化 UI 构建

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

优化前：

输出结果：
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          // 重组
复制代码

优化后：

输出结果：
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 性能到底怎么样？ - 掘金
• Google I/O : Jetpack Compose 中常见的性能问题 - 掘金
• Jetpack Compose 笔记(3) - 重组的性能风险

4.1 Compose 与原生启动性能比较

• Compose 与原生启动性能对比

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

4.2、Compose Baseline Profiles 加持

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

结论：有 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 的兼容性对应关系

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编译器”
• Kotlin 编译之路 “Kotlin编译器”
• Jetpack Compose 导致的编译劣化 | KCP 简介 - 掘金

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

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

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

七、Compose 跨平台现状

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

Compose 跨平台现状图

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

总结

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

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

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