Flutter在腾讯企鹅辅导上的实践之路

Native_1
Flutter_10
Flutter_2
页面切换
2 实践框架及页面栈管理
混合栈管理
Flutter
Context
Navigator Push/Pop
… Flutter_2 Flutter_1 Flutter_0
Native
UrlScheme
VC/Activity
RouteBuilder
Flutter在腾讯企鹅辅导上的实践之路
目录 / contents
• Flutter简介 • 实践框架及页面栈管理 • 性能优化 • Flutter For Web
1 Flutter简介
1 Flutter简介
跨平台
Write Once, Run Anywhere
Web页面
• H5 + CSS3 + JS • 最成功的的跨平台
2 实践框架及页面栈管理
混合栈管理 - 方案
Native FlutterController
FlutterActivity
FlutterController
FlutterActivity
GPU、IO、UI Dart VM
2 实践框架及页面栈管理
混合栈管理 - 方案
Native
Native页 Flutter页
尝试将部分Widget设置为const 不可见的控件懒加载
自定义控件，尽可能复用配置
4 Flutter For Web
4 Flutter For Web
发展
Flutter在今年GDD大会正式发布stable 1.9，同时宣布Flutter For Web仓库正式合入Flutter主仓库
Dart编译JavaScript
Flutter 依赖库
Native项目
2 实践框架及页面栈管理
实践框架 - Pad端
2 实践框架及页面栈管理
接入层 - MJFlutter
应用UI
Flutter UI层
Alert
Toast
Dialog
Refresh
…
数据传输层
Navigator
专有通道
Storage
CSSender
Notification
腾讯企鹅辅导
2 实践框架及页面栈管理
腾讯企鹅辅导
2 实践框架及页面栈管理
实践框架 - 手机端
2 实践框架及页面栈管理
实践框架 - 手机端
Flutter iOS依赖库 Framework
Flutter Android依赖库 Jar/So
iOS项目
Android项目
2 实践框架及页面栈管理
实践框架 - 手机端
移除平台模块
匹配Web特性
快速开发
富有表现力和灵活的UI
原生性能
1 Flutter简介
生态与模式
原生性能
C/C++ 引擎操作OpenGL、GPU直接渲染 平台一致性
1 Flutter简介
生态与模式
原生性能
2 实践框架及页面栈管理
2 实践框架及页面栈管理
腾讯企鹅辅导
2 实践框架及页面栈管理
腾讯企鹅辅导
2 实践框架及页面栈管理
FlutterController
Flutter页
GPU、IO、UI Dart VM
Flutter页
2 实践框架及页面栈管理
混合栈管理
Native
UrlScheme
Native
UrlScheme
FlutterLeabharlann Baiduie w
Push
Pop
FlutterVie w
Init
FlutterVC/Activity
2013
2014
Hybrid Apps
• Native良好的用户交互体验 • Web跨平台开发
2015
2016
2017
1 Flutter简介
跨平台
Write Once, Run Anywhere
Web页面
2014
2015
2016
2017
React Native
• FaceBook • JS -> iOS + Android
保存页面栈信息
Route Todo Page
FlutterEngine/FlutterNativeView
3 性能优化
3 性能优化
内存 - 降低20%
泄漏
内存
增量
图片加载
引擎
3 性能优化
页面渲染 - 降低20-30%
分析调 试
渲染
定制规 则
优先使用StatelessWidget 最小封装原则
减少build函数中过多操作
FlutterVie w
Push
Pop
FlutterVie w
Init
FlutterVC/Activity
Flutter单例
FlutterEngine/FlutterNativeView
MJFlutter混合栈
Native
2 实践框架及页面栈管理
混合栈管理
Flutter单 例
MJFlutte混合栈
Web页面
React Native
WeeX
2014
2015
2016
2017
2018
Flutter
• Google • Dart -> iOS + Android + Web
1 Flutter简介
初识Flutter
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面
Data Bind
Serve
Data
Native WNS UrlScheme
Callback
2 实践框架及页面栈管理
腾讯企鹅辅导
MJFlutter CSSender Navigator
上课页 Widgets
Navigator
Route
Live、Task
Native
Native Page
WNS
UrlScheme
1 Flutter简介
跨平台
Write Once, Run Anywhere
Web页面
React Native
2014
2015
2016
2017
WeeX
• Alibaba • JS -> iOS + Android + Web
1 Flutter简介
跨平台
Write Once, Run Anywhere
Logger
…
通用通道
Common
Native基础层
基础能力
网络请求
存储
页面栈
推送
日志
…
2 实践框架及页面栈管理
接入层 - MJFlutter
应用UI 通道传输 基础能力
方便接入
接口简单易用
扩展能力强
底层Engine耦合低
终生使用
2 实践框架及页面栈管理
混合栈管理
Native_0
Flutter_0
统一路由
动画分离
2 实践框架及页面栈管理
腾讯企鹅辅导
2 实践框架及页面栈管理
腾讯企鹅辅导
上课页
Live Widget
Tab Widget
Todo Widget
Course Widget
2 实践框架及页面栈管理
腾讯企鹅辅导
上课页 Widgets
MJFlutter CSSender Navigator