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 offstage 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内容及回放 内推阿⾥本地⽣活

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