1. ICBU Flutter探索之路 讲师：路少德(白及)

2. 目录 / CONTENTS PART 01 PART 02 PART 03 PART 04 背景介绍 Flutter Flutter 结果&规划 技术接入 能力补齐

3. 个人简介 路少德（白及） ICBU高级无线开发工程师 18年8月将Flutter接入ICBU无线 主导并参与ICBU Flutter的业务落地、架构设计和 演进。

4. 背景 ICBU Flutter现状 场景覆盖 人员掌握 30+Flutter页面 所有的无线开发掌握Flutter开发 交易业务覆盖90% Android&iOS的壁垒逐渐消失 所有新页面选择Flutter 提效效果 技术成果 累计提效大量人日 参与AliFlutter的建设 解放生产力投入其他有价值的事情 基于官方的工程体系和混合栈方案 多语言、本地化等多种国际化方案

5. 背景 ICBU Flutter页面展示 会话列表 - Android 会话列表 – RTL（阿拉伯语） 会话列表 – iOS 购物车 名片展示

6. 背景 业务背景 B类国际电商业务特点： 发展迅猛 业务复杂 源 资 发 开 % 0 8 力 压 务 业 % 0 11 跨境B类贸易28步流程 业务取舍 开发加班 研发效率 Android 实现差异 跨端一致性 iOS

7. 背景 技术决策 Flutter - 技术原理对比 ICBU无线技术诉求：取代Native开发的跨端框架 0. 跨端提效 Native的优点 极致体验 高性能 1. 完美的一致性 高稳定性 2. 性能上限高 不同的跨端框架 Web渲染 H5、小程序、uni-app …… Native渲染 Weex、ReactNative …… 动态组件 VV、DinamicX …… App Store政策风险的考量 其他框架的问题 性能差 一致性低 能力缺陷 开发效率低 都有各自的优势和使用场景 结论： 但都无法取代Native开发 Apple的核心利益 有风险的技术项 Flutter的应对 应用市场付费渠道 三方支付 无支付相关技术 应用市场存在的意义 动态化能力 无法动态化 iOS用户的体验 H5等页面滥用 Cupertino组件库，高性能

8. Flutter - 架构设计 发现问题 – 解决问题 接入 简单规划 能力补齐 动态化 拓盘 混合工程 混合栈 视频播放 DxFlutter共建 Flutter for Web 中间件 国际化 数据预加载 DxFlutter接入 Flutter for Destkop

9. Flutter- 混合工程 背景&工程结构 原生开发 混合开发 工程体系 官方支持 官方不成熟 页面栈管理 官方支持 官方不成熟 适合新App 适合存量App， 有基建成本 总结 从效率和集团技术现状来看，我们必须Native和 Flutter混合开发。 混合开发要解决的问题： 1. 2. 3. 4. Native工程如何源码依赖Flutter工程 Flutter工程如何生成中间产物(aar等) Native工程如何依赖中间产物 Native页面和Flutter页面的栈管理

10. Flutter- 混合工程 打包 源码依赖 产物依赖 打包的主要问题： 1. 如何产出和依赖release和debug产物 2. 如何递归的打出插件的Native产物 3. 如何优雅的一键依赖如此多的产物 Shell脚本 + Gradle脚本 + Gradle脚本注入 + POM文件

11. Flutter- 混合栈 引擎复用 – 核心问题 混合栈包括两部分 复用引擎的核心问题： 生命周期的处理 1. 引擎复用方案 1. 正常生命周期处理（A打开关闭） 2. Native页面&Flutter页面约束方案 不 复 用 引 擎 onAttach onStart onResume onPause getEngine attachSurface attachEngine onStop onDetach detachEngine detachSurface 2. 半透明界面生命周期处理（A打开半透明B） onStart onResume onPause onAttach onStart onResume 3. 返回时生命周期处理（B返回A） onPause onStart onResume onStop onDetach 4. ViewPager/Transaction的Fragment生命周期处理 （入场） onAttach 复 用 引 擎 （切出） onPause （切入） onStart onStop onResume （退出） onDetach Android生命周期十分复杂，牵一发动全身 Flutter引擎处理十分复杂，时序错乱会带来严重后果 onHiddenChanged setUserVisibleHint

12. Flutter- 混合栈 引擎复用 – 技术方案 onAttach 页 面 进 入 页 面 退 出 B返回 getEngine A重现 onPause onStop onStart onDetach onResume onStart onResume onPause attachSurface attachEngine detachEngine postResumed 引擎 detachEngine postMessage detachSurface Try Release Engine 延时+轮询 postPaused detachSurface 1. 保证Flutter生命周期的完整性 onStop 2. onResume + onPause 解决半透明界面的问题 3. 通过延时+轮询突破生命周期的限制 onDetach Try Release Engine postDetached Fragment 生命周期 Flutter 引擎处理 Flutter 生命周期 attachSurface attachEngine

13. Flutter- 混合栈 引擎复用 – 方案对比 Flutter SDK Flutter Boost ICBU 混合栈 不支持半透明界面 生命周期不完整 兼顾Native和Flutter 生命周期

14. Flutter- 混合栈 上层页面约束 ICBU混合栈特点 引擎复用层 生命周期还原完善 适配半透明场景 页 面 约 束 方 案 页面约束层 维护成本低 – Flutter层很薄 适用场景有限 – 多Flutter Tab不支持 稳定性低 – 引擎复用出错会导致约束出错 Flutter Boost特点 页面约束层 页面管理灵活 – Flutter页面开Dialog 适用场景全面 – 支持多Flutter Tab 规划 接入FlutterBoost 共建FlutterBoost

15. Flutter 阶段结果&新的问题 混合工程 初步总结 一键切换源码或产物依赖 一键本地或MTL打包 搭建AliFlutter初版工程框架 提效 UI富有表现力 极致体验 基建50人日，提效100人日 扩展能力完备，组件库丰富 运行效率、UI还原 混合栈 内 存 基础内存 订单列表 订单详情 复用 300.2M 394.6M 440.5M 不复用 300.1M 409.8M 460.0M 待优化项 1. 视频播放 页 面 启 动 时 长 2. 动态化能力 版本 准备时间 请求时间 总耗时 7.4.1 747ms 810ms 1557ms 7.5.1 454ms 437ms 891ms 对比新旧版本，页面启动时长减少了42% 3. 架构优化

16. Flutter – 视频播放 背景 & 方案 Flutter视频渲染流程 - Android 视频开始在ICBU落地 视频的播放量飞速上升 如何借助Flutter为视频业务提效？ 难点 Flutter 复用View十分昂贵（PlatformView） 如何借用Native播放器能力 解法 Android 放弃View级别的复用 通过纹理传递视频流实现跨技术栈渲染 纹理传递 + 修改手淘播放器SDK

17. Flutter – 视频播放 结果 视频技术方案 页面示例 结果 视频页启动时长 对比Weex降低400ms 方案输出给考拉&健康 优点 1. 无需修改FlutterSDK和引擎 2. 下层实现对上层透明 3. 封装视频组件赋能业务

18. Flutter - 动态化 技术选型 技术方案 技术示例 下发内容 两端一致 性能损失 维护成本 动态范围 政策风险 编译产物下发 Hot Patch 小 否 无 中 高（全代码） 非常高 JS类框架 RN、Weex 中 是 很大 高 高（全代码） 中 动态组件 DinamicX 小 是 较小 中 中（组件） 无 以DinamicX为代表的动态组件方案，在各个方面取得了优秀的平衡。 1+1 > 2 DinamicX的优点 1. 组件级接入，使用灵活 2. 使用Android Layout Xml，学习成本低 电商业务的特点 1. 需要运营场馆多 -> 重视UI动态性 +Flutter 1. 完美的一致性 2. 维护成本减少 3. 迁移成本低

19. Flutter - 动态化 节奏 1. 实现多种控件 2. 国际化：RTL 3. 高版本SDK适配 参与同闲鱼的技术共建 未来场景

20. 结果 架构图 …… Android iOS H5 Flutter SDK Android Runtime iOS Runtime

21. 结果 技术结果 丰富的技术沉淀 同集团的紧密合作 逐渐扩大的技术影响力 解放生产力 技术贡献 更多 业务 60% 大量人日 端智能 开发效率提升 资源弹性增大 累计节省资源 数据化

22. 规划 FY2021 核心目标： 保障Flutter的性能和质量，进一步提升提效效果、进一步扩大提效范围。 性能&质量 页面启动时长 质量标准的建立 内存&帧率 长效机制的建立 拓盘 接入AliFlutter 工程体系 打包体系 混合栈 卖家无线 接入 PC Flutter for Desktop接入 H5 Flutter for Web接入 核心价值 核心价值 核心价值 用户体验 极大减少维护成本 卖家无线 增加基建的价值 PC 新技术栈的提效 H5 和App的共用页面 跨端提效/买家共用页面

23. Thanks ICBU shaode.lsd@alibaba-inc.com ppt