Flutter 在饿了么的应用与沉淀

1. Flutter 在饿了么的应⽤与沉淀讲师：李永光(花名: 雍光)

2. 个⼈简介李永光，花名雍光，饿了么资深iOS⼯程师。近4 年深耕移动端，饿了么最早的⼀批Flutter玩家，重点参与了Flutter在蜂⻦团队的业务开发落地、⼯程架构演进。

3. ⽬录 01 为什么选择使⽤ Flutter 02 Flutter 在饿了么的应⽤ 03 基础建设与沉淀 04 展望与规划

4. 01 为什么选择使⽤ Flutter

5. Flutter 原理 UI渲染的三棵树 E W W W Widgets Rendering Animation W widget树(描述节点) Painting Skia Text Embedder (Platform Specific) Surface Thread Event Loop R R Windows MacOS Ubuntu E Element树(虚拟节点) R Dart Android E Gestures Engine (C++) iOS E W Foundation OS E Cupertino Material Framework (Dart) E W R R RenderObject树(真实节点)

6. 客户端研发⽅案对⽐相对值性能动态性跨端⼀致性开发体验

7. 我们的期望蚘溣寪裌穩" 槯溣抩裌譕" 蚘曃鈾䦎埊譓ⅹ歽萕䧞蚘曃沜擭謑"

8. 我们的选择提升研发效率完备好⽤的⼯具补⾜ HotReload 动态化跨端⼀致⼴阔的应⽤与技术前景保证⽤户体验富有表现⼒的UI ⾼性能⾃有渲染引擎 Google ⽀撑⽕热的社区

9. 02 Flutter在饿了么的应⽤

10. 使⽤Flutter的APP 蜂⻦团队⾄冠配送有菜轻⾈⽅⾈饿百

11. Flutter⻚⾯

12. 混合开发(旧) Flutter Native pushRoute: / LPDFRouter record url pushRoute url isFlutter Yes Flutter View pop Yes No Flutter Container VC Flutter Container VC lastUrl isFlutter No Push Pop Pop Push

13. 混合开发(新-boost) Native … Flutter View Flutter View Container(vc, id: b) Top Container(vc, id: a) Container Manager LifeCycle Messages Coordinator LifeCycle … Widget Widget oﬀstage Container (Navigator, id: b) onstage Container (Navigator, id: a) Container Manager Dart

14. 研发/集成模式 Teemo TeemoiOS TeemoAndroid team_flutter_ dev lib DevAndroid (Runner+dep) DeviOS (Runner+dep) teemo_flutter teemo_rn 抽取的产物(模块形式) 发布⼯程构建-打包 (本地/远端) 依赖 App TeamAndroid TeamiOS 打包(本地/远端) App

15. 质量 & 效率结果 App Flutter ⻚⾯数量占⽐ crash user FPS 节省⼈⽇蜂⻦团队 5% 0.024% 55+ 40+ ⾄冠配送 80% 0.03% 53+ 70+ 指标

16. 03 基础建设与沉淀

17. 控件库

18. 基础插件 Crash上报⽹络请求推送处理定位持久化声⾳播放社交分享⽇志记录

19. dna — 背景与⽬标 @雍光菜叽执卿泽卦双边硬编码限单次调⽤创建成本⾼直接调⽤ native⽅法上下⽂调⽤⽆需创建

20. dna — 使⽤

21. dna — 使⽤

22. dna — 原理 Context JSON object invocation1 method args invocation2 execute parse returnVar … InvocationNode returnVar return var NativeContext dart dna channel native Object Map InContext

23. dna — Android反混淆注解⽅法扫描注解⽣成代理⽅法 APT⽣成代理⽂件存储⽅法名参数信息 dna实际通过代理⽅法调⽤⽬标⽅法

24. Channel vs dna 对⽐项⼯具新建Plugin dart调⽤ native处理 native处理调⽤已有类 dart上下⽂及channel 包含硬编码包含硬编码统⼀调⽤native ⽅法调⽤ C函数 native对象内存管理 Channel Y Y Y N N N N N dna N Y N Y Y Y N N 最⼩收益：1.⽆需创建Plugin及channel 2. native ⽆需额外处理 dna调⽤⼀个native类的⼀个⽅法约定顺序参数列表 channel 调⽤ native的⼀个代码块 dart dart channel method native args native channel method dart args class name method name native args class method

25. 其他 flutter_boost Commiter @eleme WP HotPatch探索 …

26. 参与共建 — 背景 AliFlutter 拉通共同打造基础设施/制定标准/复⽤技术⽣态培育各BU Flutter⽣态/沉淀业务与技术影响⼒联合对外产⽣凝聚的影响⼒

27. 共建 - Pub Server pub 服务器(docker) pub_server(Dart) 开发者上传 pub get/publish PUB_HOSTED_URL OSS对象 + pub.dev查询查询/下载提取authentication 查询上传者Gmail Google OAuth2服务 @砚明持久化存储 OSS对象tag

28. 共建 - Pub Dev(前端检索) 开发者 pub_dev meta数据库读 pub_meta server 更新读任务(读取-解析) OSS存储定时任务主动同步 publish回调 pub_server @砚明 @泽卦

29. 共建 - 产物服务器开发者 Version openresty 查询OSS是否存在Version 产物 N Flutter官⽹cn镜像异步下载 FLUTTER_STORAGE_BASE_URL Y 重定向返回OSS产物地址 OSS存储查询/下载⾃定义引擎服务器docker @泽卦

30. 共建 - ⾃定义引擎⼯作流 gitlab runner Android-linux 1. 编译debug产物 2. copy产物到mac机器⽤户提交代码 copy/映射⽂件到mac⽬录获取switch配置 iOS-mac 1. 编译debug产物 2. copy产物到本机 @泽卦 @昭宗上传通知

31. 共建 - CI/CD Flutter App ipa / apk mtl / grand Flutter Module @eleme WP 构建 Pipeline Flutter特化逻辑产物特化逻辑上传/发布 frameworks+podspec aar

32. 04 展望与规划

33. 规划与展望探索效率质量业务动态化UI/web/三端⼀体/引擎定制/结合前端 UI组件/基础插件/效率⼯具/Alifutter共享性能监控-优化/控制crash/包体积优化更多的Flutter⻚⾯/跨业务组件/分包組㰔楢歽!㰷鰢繞鴇

34. 【淘系技术】微信公众号扫描微信扫码获取本期ppt内容及回放内推阿⾥本地⽣活