个人简介 - 涂金林 东南大学 腾讯企鹅辅导 & 腾讯课堂 & IMWeb团队 iOS & Flutter负责人 目录 / contents • Flutter简介 • 实践框架及页面栈管理 • 性能优化 • Flutter For Web Flutter简介 1 Flutter简介 跨平台 1 201 3 201 5 201 6 Web页面 • H5 + CSS3 生态与模式 原生性能 实践框架及页面栈管理 2 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 实践框架 - 手机端 实践框架及页面栈管理 2 实践框架 - 手机端 Flutter Android依赖库 Jar/So Android项目 Android项目 iOS项目 Flutter iOS依赖库 Framework 实践框架及页面栈管理 2 实践框架 - 手机端 Native项目 Flutter 依赖库 实践框架及页面栈管理 2 实践框架 - Pad端 Alert Flutter UI层 实践框架及页面栈管理 2 接入层 - MJFlutter Toast Dialog Refresh … Navigator Storage

模板脚手架 BuildRunner FlutterBox 可视化工具 构建 持续集成 安卓插件 多版本生成 lib架构管理 For Web Lint 测试 性能工具 状态上报 基 础 设 施 性能&稳定性平台 FPS 页面打开速度 crash Bug管理 包大小分析 高可用 获取日志 远程调试 安全 接口防刷 插件平台 矩阵产品 贴吧 贴吧极速版 创新产品 公司其他产 公司其他产 品 业务模块 一键签到 吧资料 粉丝列表 … 系统层 Android iOS FlutterSDK 基础 框架 模块通信 状态管理 公共结构 通用UI 混合栈 网络 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n Assets Runtime 运行容器 部署管理 壳（:flutter） 形态 内置 Java/res/lib 帖子内容 Java/res/lib 直播 Java/res/lib Flutter Java/res/lib 插件A 插件B Flutter plugin …… 网络 图片 Flutter 公共基础库 静态依赖 动态依赖 构 建 平 台 网络 特性 模块

修改NOW工程结构 • 将Dart代码与Native代码一起存放GIT • 修改编译脚本 • 支持断点调试 无法跨终端同步及维护Dart代码 工程化开发模式Ⅲ • Gradle/CocoaPods依赖管理 • 跨终端团队协作远程构建产出模式 • Dart代码独立GIT • 远程构建平台配置终端推送地址 • 构建完成自动推送更新 QCI 远程构建平台 Android Git iOS Git NetworkImage Refresh Report … RichText 开发框架 业务 逻辑 ReBLoC框架： Redux + BLoC 驱动 状态更新 Redux：界面状态管理 BLoC：界面逻辑解耦合 开发框架 ReBLoC框架： 控件使用InheritedWidget包装 1.减少树状结构的节点刷新。 2.避免setState泛滥 setState 通知

Dart语言简介 - 变量声明 Dart语言简介 - 函数声明 Dart语言简介 - 函数声明 Dart语言简介 - 类声明 上手试试？ Flutter基础 • 组件 • 路由 • 资源管理 • 包管理 Flutter组件 • 基础组件 • 布局组件 • 容器组件 • 功能类组件 基础组件 • StatelessWidget & StatefulWidget • Text • • 网格（GridView） 功能类组件 • 导航拦截（WillPopScope） • 对话框（AlertDialog） • 手势（GestureDetector） 路由 路由 包管理 资源管理 Flutter进阶 Flutter进阶 Flutter进阶 Flutter进阶 Vue学习资料 • 官网：https://flutter.dev/ • 中文网：https://flutter

Native组件 Native和Flutter混合开发 混合栈 闲⻥鱼 - 让你的闲置游起来 视频和动画 视频 动画 闲⻥鱼 - 让你的闲置游起来 关键问题解决 混合开发：⼯工程管理理和混合栈管理理 外接纹理理播放视频 图⽚片缓存优化 ⽆无反射JSON序列列化 私有PUB库、阿⾥里里⽣生态适配 闲⻥鱼 - 让你的闲置游起来 Flutter和Native性能简单⽐比较

适合各种设备的Web环境 Dart 语言的目标 Dart 语言的组成 ● 语言规范 ● Dart VM ● 丰富的类库 ● 工具： ○ Dartium：Chrome + Dart VM ○ 包管理 Pub ○ Dart Editor ● Dart → JavaScript 编译器：dart2js Dart 两种运行模式 1）检查模式（checked） 检查类型匹配，及早发现问题，但性能差