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