ICBU Flutter探索之路
如果无法正常显示,请先停止浏览器的去广告插件。
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