后浪Flutter Google 开源的 UI 工具包 陈孟泽 后浪Flutter • 简介：移动跨平台方案及Flutter介绍 • 语言: Dart语言简介 • 基础：Flutter常用知识点 • 进阶：Flutter核心原理 • 资料：学习参考资料 移动跨平台方案 • H5+原生（Cordova、微信小程序） • JavaScript开发+原生渲染 （React Native、Weex、快应用） JavaScript+原生渲染 原生控件渲染 好 中 支持 RN、Weex 自绘UI+原生 调用系统API渲染 好 高 默认不支持 Flutter Flutter简介 • Google 开源的 UI 工具包 • 非常精美丰富的组件库 • 支持移动、Web、桌面和嵌入式平台 • UI统一、高性能 Flutter简介 Dart语言简介 - 变量声明 Dart语言简介 - 函数声明 Dart语言简介

Native和Flutter混合开发 混合栈 闲⻥鱼 - 让你的闲置游起来 视频和动画 视频 动画 闲⻥鱼 - 让你的闲置游起来 关键问题解决 混合开发：⼯工程管理理和混合栈管理理 外接纹理理播放视频 图⽚片缓存优化 ⽆无反射JSON序列列化 私有PUB库、阿⾥里里⽣生态适配 闲⻥鱼 - 让你的闲置游起来 Flutter和Native性能简单⽐比较 Flutter Native 45 FPS 领域服务 服务索引 代码转换 服务集合 快速部署 本地执⾏行行 ⽇日志回传 错误定位 隔离调试 All In IDE 新建服务 降级 限流 监控 告警 开关 简化运维 配置 优化开发体验 闲⻥鱼 - 让你的闲置游起来 秒级部署 ⽆无需提交代码 运⾏行行时隔离 远程热部署 Dart Isolate HTTP - 1 HTTP - 2 HTTP - N Reloader C++ Extension ⼏几种途径 Java -> Dart ⼯工具：⽣生成接⼝口和数据模型的Dart代码 简化服务调⽤用⽅方式 XML JAVA 反射 Dart代码 服务注册及通信 索引 闲⻥鱼 - 让你的闲置游起来 ⽆无Dart基础 服务端开发同学 有Flutter基础 客户端开发同学 通过⽂文档和⼯工具，写Hello World基本不不需要指导 单线程异步开发模型

天然的MVC（HTML+CSS+JavaScript） 当前的Web开发 ● Web 开发越来越复杂：项目大，团队成员多 ● 前端功能越来越多：CS→BS→CS ● 大型应用维护和协作难 ● 性能弱，启动速度慢 ● 工具支持弱 ● 仔细选择技术方案和开发规范 Web 开发中还有许多问题有待解决... 未来的方向？ Chrome OS 和 Chromebook Chrome OS 基于浏览器和云端环境的 OS 简单、有生产力 ● 适合从小型到大型的项目 ● 高性能、快速启动 ● 适合各种设备的Web环境 Dart 语言的目标 Dart 语言的组成 ● 语言规范 ● Dart VM ● 丰富的类库 ● 工具： ○ Dartium：Chrome + Dart VM ○ 包管理 Pub ○ Dart Editor ● Dart → JavaScript 编译器：dart2js Dart 两种运行模式 shaking minification Dart2js Tree-shaking ● 语言的设计影响性能 ● 使用snapshot启动速度快10倍 ● 运行时不能改变对象结构有利于VM优化 ● Dart VM 性能已超越 JavaScript V8 ● …… 高性能 性能测试 http://www.dartlang.org/performance/ Dart 语法特性 ●

涂金林 东南大学 腾讯企鹅辅导 & 腾讯课堂 & IMWeb团队 iOS & Flutter负责人 目录 / contents • Flutter简介 • 实践框架及页面栈管理 • 性能优化 • Flutter For Web Flutter简介 1 Flutter简介 跨平台 1 201 3 201 5 201 6 Web页面 • H5 + CSS3 + JS Page Route 保存页面栈信息 FlutterEngine/FlutterNativeView Route Navigator 性能优化 3 性能优化 3 泄漏 内存 增量 内存 - 降低20% 引擎 图片加载 性能优化 3 分析调 试 渲染 页面渲染 - 降低20-30% 定制规 则 优先使用StatelessWidget 最小封装原则 减少build函数中过多操作

工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 先看一下全景 开发 工具链 一键集成 SDK版本 模板脚手架 BuildRunner FlutterBox 可视化工具 构建 持续集成 安卓插件 多版本生成 lib架构管理 For Web Lint 测试 性能工具 状态上报 基 础 设 施 性能&稳定性平台 FPS 页面打开速度 crash Bug管理 RTLD_NOW); 反射修改路径 目录 n 为何引入Flutter n 实践之旅 n 总结 主要分享了 总结 技术全景 - 分层和工具链 Flutter Android插件 - 资源和libapp加载 工程体系接入 - 通过丰富脚本工具 满足复杂工程需求 业务框架升级 - 传统到现代 - tieba_redux n 主版本：一键签到，吧详情，粉丝列表等 n 内部版（纯flutter版）

Web 之外的另一个真跨端渲染技术 ? ? ? 通过 platform channels 调用平台能力 支持 Hot Reload 不支持 Flex Layout 布局 比肩原生的性能 调试工具完善 脱离前端 JS 生态 不支持动态下发 Bundle 不支持类 JSX，可读性差 前端视角里的 Flutter 使用 Flutter 的刚性诉求 具有动态性 可连接前端生态 Dart

转换RTC流成直播流推送到CDN ION客户端支持 • Ion-sdk-js 网页端SDK • Ion-sdk-flutter 全平台flutter SDK • Ion-sdk-go 用于开发推流工具，压力测试，avp 节点开发 • Ion-app-web • Ion-app-flutter ion-app-web • 基于 React.js + ant-design • 多人视频 •