AliFlutter客户端研发体系概览

1. AliFlutter客户端研发体系概览讲师：王康(花名：正物)

2. 个⼈介绍 • 王康，花名正物，淘宝终端技术部⽆线技术专家，Flutter Member(kangwang1988)，AspectD 作者。 • 负责了Flutter在闲⻥中的混合开发体系建设与业务落地，做了⼀系列相关技术⽅案。在Flutter原理与应⽤、多端⼀体化编程⽅⾯有丰富的实践经验。 • ⽬前专注于以Flutter为核⼼的多端多平台研发模式的探索与实践。

3. ⽬录 Flutter原理 • Flutter业内现状 • AliFlutter建设与深度实践 • AliFlutter研发模式探索 •

4. Flutter原理 Cupertino Material Widgets Framework (Dart) Rendering Animation Painting Gestures Foundation Engine (C++) Dart Skia Text Embedder (Platform Specific) Surface Thread Event Loop OS iOS Android Windows MacOS Ubuntu

5. Ali为什么选择Flutter ⽤户体验电商业务属性下，保证⽤户体验是前提。⾼性能研发效率尽可能⾼地提⾼研发效率，消除端侧差异开发效率⾼多端多平台不仅iOS，Android，还有钉钉等桌⾯场景，天猫精灵线下等场景多端多平台富交互游戏化等新玩法电商业务重体验&交互，精细化运营场景下对富交互游戏化的需求。丰富表达⼒跨端⼀致性

6. Flutter业内现状 • Alibaba • 淘宝、淘宝特价版、蚂蚁财富、闲⻥、UC、优酷、ICBU、饿了么、考拉、⻜猪等 • Tencent • 微信、腾讯Now直播、腾讯翻译君、腾讯企鹅辅导等 • 字节跳动 • ⻄⽠视频、⽪⽪虾、懂⻋帝等 • 快⼿ • 快影等 • 美团 • 美团骑⼿、美团外卖商家版、美团众包等 • 百度 • 贴吧等

7. Flutter业内现状体系化深度框架更多探索基础建设研发体系监控体系 DevOps ... 引擎大小包大小内存优化启动时间 ... 混合栈状态管理动态化UI AOP框架生态插件 ... 小程序渲染前后端一体化 ...

8. AliFlutter业务实践 ••• 宝⻉详情游戏业务主链路订单

9. AliFlutter业务研发模型

10. AliFlutter引擎研发模型 flutter FLUTTER_STORAGE_BASE_URL stable/v1.12.13+hotfix.8.taobao gclient sync engine deps develop engine (self_upstream) gitlab webhook CI Code Review flutter engine stable/v1.12.13+hotfix.8.taobao

11. AliFlutter基础设施建设 (Docker) Flutter FLUTTER_STORAGE_BASE_URL OSS( nginx ( ) YES ⾃定义引擎服务 ) NO

12. AliFlutter基础设施建设 Flutter pub get &publish web pub OSS OSS pub_server pub_dev Meta meta pub_meta dartfmt analyzer documentation pana 私有pub服务

13. AliFlutter基础设施建设 Runner.app & app.apk ios android Podfile build.gradle BizFlutter (App&Flutter.framework &Plugins iOS BizFlutter Android flutter 持续构建

14. AliFlutter深度实践图⽚库优化

15. AliFlutter深度实践引擎⼤⼩优化

16. AliFlutter深度实践 GC FlutterEngine.notifyGC Shell::NotifyGC Engine::NotifyGC RuntimeController::NotifyGC Dart_NotifyGC ⼤图⽚内存GC优化

17. AliFlutter深度实践 Flutter Canvas实践

18. AliFlutter深度实践业务视角 flutter_tools hello_flutter app.dill _s n e g t o h App.framework aps n kernel_blob.bin Aspectd Read dill into Component 框架视角 AOP开发视角 aop_aspectd.dill Extract all aspectd annotations aop package Transform based on annotation Dill Transform AOP logic based on aspectd flutter_tools aop.dill call call execute execute inject Write component into dill AOP框架(AspectD) inject

19. AliFlutter研发模式研发模式多样化业务生态 Widgets 跨平台运行时 Flutter DX DSL开发模式开发者 Canvas开发模式 Flutter Framework（Dart / C++） Canvas 核心布局渲染 / 弹性扩展 / 组件能力 / 定制性标准2/3D图形API 研发支撑 MTL 编译打包 Flutter Engine 基础图形接口 / 跨平台 / 能力扩展 / 性能 / 稳定性调试灰度 / 发布标准基础设施线上监控基础库垂直能力扩展运维能力数据化多端 / 多平台研发模式 …

20. AliFlutter研发模式展望跨端能⼒基础能⼒标准/API化 Flutter容器化专注业务更易多端多平台部署交互能⼒丰富表达能⼒游戏化⽅向泛化的游戏交互能⼒更多的可玩性与创新性研发效率⼯程解耦(容器+业务) 云端⼀体业务研发解耦类似前端研发体验交付效率动态化UI Web On Flutter 更为灵活的动态性前端技术栈下的动态化能⼒从⾯向端侧负责到⾯向业务整体负责

21. 回顾⼀下 Flutter原理 Flutter业内现状 AliFlutter建设与深度实践 AliFlutter研发模式探索 Beautiful、Productive Fast、Open 主流⼚商纷纷投⼊业务实践研发模式业务研发模型跨端能⼒、交互能⼒、研发效率、交付效率为什么选择Flutter 体系化、深度、框架、更多探索引擎研发模型⾃定义引擎、私有pub服务、持续构建图⽚库优化、引擎⼤⼩优化、图⽚内存优化、 Flutter Canvas实践、AOP框架等

22. 【淘系技术】微信公众号加⼊我们 mailto: kylewong.wk@alibaba-inc.com 扫码获取本期ppt内容及回放