涂金林 个人简介 - 涂金林 东南大学 腾讯企鹅辅导 & 腾讯课堂 & IMWeb团队 iOS & Flutter负责人 目录 / contents • Flutter简介 • 实践框架及页面栈管理 • 性能优化 • Flutter For Web Flutter简介 1 Flutter简介 跨平台 1 201 3 201 5 201 6 Web页面 • Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面 Flutter简介 1 原生性能 生态与模式 C/C++ 引擎操作OpenGL、GPU直接渲染 平台一致性 Flutter简介 1 生态与模式 原生性能 实践框架及页面栈管理 2 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 实践框架 - 手机端 实践框架及页面栈管理 2 实践框架 - 手机端 Flutter Android依赖库 Jar/So Android项目 iOS项目 Flutter iOS依赖库 Framework 实践框架及页面栈管理 2 实践框架 - 手机端 Native项目 Flutter 依赖库

关于Flutter •Google推出的跨平台开发框架 •创建高性能，高稳定性，高帧率的 Android/iOS应用 •使用Dart语言开发 Flutter特性 跨平台 高性能 热重载 提升研发效 率 Flutter的应用 框架对比 Native 性 能 跨平台 Flutter RN web Hybrid 小程序 weex 框架应用 Web 2018.4 2018.11 2019.2 Flutter 独立 APP 保密 & 2019.5 Flutter实现的页面 动态页 三级页面 关注页 首页 房间 核心页面 系统框架 MessageChannel Native Dart Channel Report Log … DartChannel DartReport RichText … Refresh NetImage RichText 开发框架 业务 逻辑 ReBLoC框架： Redux + BLoC 驱动 状态更新 Redux：界面状态管理 BLoC：界面逻辑解耦合 开发框架 ReBLoC框架： 控件使用InheritedWidget包装 1.减少树状结构的节点刷新。 2.避免setState泛滥 setState 通知 刷新界面 State need update 开发框架 ReBLoC框架：

高效的开发体验 性能接近Native 1 2 3 Ø N倍平台产出 Ø 多端逻辑一致 效率 质量 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 先看一下全景 开发 工具链 一键集成 SDK版本 模板脚手架 BuildRunner FlutterBox 可视化工具 构建 持续集成 安卓插件 吧资料 粉丝列表 … 系统层 Android iOS FlutterSDK 基础 框架 模块通信 状态管理 公共结构 通用UI 混合栈 网络 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 第一步 当 我 跨 出 第 一 Plugin n 外界资源 新pubspec.yaml 一键命令 模块化开发 业务框架升级之旅 接下来…… n 技术需求（背景） n 现有业务框架 n 现有业务框架的问题与挑战 n redux到tieba_redux 技术需求（背景） 定制版本、 快速开发新app 细粒度模块化 中台能力 一键配置生成 现有业务框架（传统做法） Model Presenter View 消息中心 注册

第一部分 即将讲述的内容 • WebRTC 实时通讯 • Flutter 跨平台UI 开发框架 • 基于Flutter UI 框架的WebRTC 插件 flutter-webrtc • Go 语言的WebRTC 协议栈 pion/webrtc • 基于pion/webrtc 的应用级服务框架 pion/ion • 5G 时代, 实时通讯应用爆发 • 疫情影响，全世界都在使用远程教育，远程办公 实际开发中会遇到的困难 • 下载和编译Google WebRTC框架（防火墙，编译环境） • 原生SDK开发(每平台人力投入) • UI 的一致性，更新迭代（类似SDK需按平台维护） • 性能问题(全部使用html5) 客户端是否有 更好的选择？ 为何选择 Flutter • 同样是 Google 发起的跨全平台高性能UI框架 • 基于 Skia 2D 渲染引擎 • 使用类似JS/TS的Dart

• JavaScript开发+原生渲染 （React Native、Weex、快应用） • 自绘UI+原生(Flutter) 移动跨平台方案 技术类型 UI渲染方式 性能 开发效率 动态化 框架代表 H5+原生 WebView渲染 一般 高 支持 Cordova、Ionic JavaScript+原生渲染 原生控件渲染 好 中 支持 RN、Weex 自绘UI+原生 调用系统API渲染 SizedBox、） • 移除子组件限制（UnconstrainedBox） • 装饰容器（DecoratedBox） • 变换（Transform） • 容器（Container） • 框架（Scaffold、TabBar、BottomNavigationBar） • 剪裁（Clip） 容器组件 • 列表（ListView） • 网格（GridView） 功能类组件 • 导航拦截（WillPopScope）

方法级联调用 ● 操作符重载 ● Markdown注释 ● 支持 Mixin ● 基于Mirror的反射 ● 不支持 eval ● …… 类型的好处 ● 类型即文档，表明程序意图，提供概念框架 ● 避免特定的变量命名模式或注释方式 ● 适合范型 ● 良好工具的支持 ● 更早发现问题（类型检查）： ○ 检查模式运行 ○ 静态代码分析 ● Dart 类型是可选的，而非强制的。 Components QA 1. 还没实现的技术，以后再说吧。 现在就可以用！Polymer or Polyfill 2. 应用前景： a) 直接用。 b) 可能更多的时候是作为基础技术，被其它 Web 框架或库所使用。但需要你理解这些基础感 念。 Chromium Dashboard http://www.chromestatus.com/features Web Components 资源 http://ebidel