闲鱼构建企业级 Flutter 应用挑战与实践

1. 构建企业级 Flutter 应用挑战&方案意境阿里巴巴-闲⻥-无线开发专家

2.

3. • 2021 企业级 Flutter 应用构建挑战 • 混合应用组建和构建解决方案 • 高级 UI - 统一编程模型（动态化 & ⻓列表） • 总结

4. 我们还在做 Flutter 么？ • 整体组织覆盖 App 从 20+ 延展至 40+ • 集团内 20+ Flutter 中间件持续产出，引擎专业团队 • 全研发流程效率工具支撑 • 闲⻥等 App 深度使用（核心链路高覆盖，35% 效率提升） • 去中心化 - 技术社区

5. 企业级 Flutter 应用构建挑战 • 更完善的混合&构建方案 • 更高效的开发效率 • 更可靠的技术保障

6. 工程结构&构建 • 回归 Module • • 标准 & 高一致全自动化构建&部署 • 私域 Pub 服务器 • 私域产物服务器

7. FlutterBoost3.0 • 无侵入引擎方案解耦 Flutter SDK 和 FlutterBoost • Flutter ⻚面和容器解除1对1绑定

8. FlutterBoost3.0

9. FlutterBoost 社区 • 已处理 20+ 核心问题 • 持续投入 • 欢迎共建（文档&代码） • https://github.com/ alibaba/ ﬂutter_boost(master)

10. 高级 UI - 统一编程模型 • 动态模板方案 - DynamicX（动态化） • 统一滚动容器 - PowerScrollView （⻓列表）

11. 动态模板方案 - DynamicX • • 提升发布效率 • 完整的在线编辑 • 端到端一体解决方案标准化动态模板渲染容器 • 稳定性监控 • 高性能UI动态渲染

12. 动态模板-层级优化

13. 动态模板-层级优化超过 16.6ms 的帧/总帧的比例 2.11%-> 1.93 %

14. 动态模板性-异步isolate加载超过 16.6ms 的帧/总帧的比例 2.21%-> 1.79 %

15. 统一滚动容器 - PowerScrollView • Sliver 协议封装 • 补足原生组件功能不足 • • 瀑布流布局 • 精准曝光 • 滚动到指定 index 优化复杂场景性能 • 分帧渲染

16. 协议封装 • 控制器：主要用于基础滚动控制 • 事件回调：事件监听回调 • 刷新配置：灵活配置刷新 • 数据源管理器：用于数据的管理

17. 瀑布流布局

18. 瀑布流布局计算优化 • 始终从上到下布局 • 缓存每一项所在列数据 • 分⻚布局性能优化 • 最小化GC

19. 瀑布流布局计算优化

20. 瀑布流布局 • 最小化布局以优化性能 • 媲美原生的性能布局类型 GridView FlowView 丢帧数 24 25 最差帧耗时 53 52

21. 分帧渲染

22. 分帧渲染

23. 分帧渲染

24. 分帧渲染

25. 总结 & 展望总结 • 工程结构&构建：标准化工程 & FlutterBoost 3.0 • 开发效率：基于动态化的模版框架 • 性能优化：层级打平 & 异步加载 & 高效布局 & 分帧渲染展望 • Flutter 进入更多端 & 更多屏 • Flutter 效率优势在未来愈加凸显

26. 欢迎大家跟我们持续交流

27.

28. • Content Title 2 • Content Title 3 • Content Title 4 • Content Title 5 • Content Title 6