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内容及回放