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

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-23 19:01
浙ICP备14020137号-1 $访客地图$