个人动态 商业化 n 品牌大使 n 直播 n Banner n 原生广告 研发效率 用户体验 最快触达用户 Flutter的优势 跨平台开发 高效的开发体验 性能接近Native 1 2 3 Ø N倍平台产出 Ø 多端逻辑一致 效率 质量 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 第一步 当 我 跨 出 第 一 步 工程体系接入 n Flutter接入方式 n FlutterBox Flutter接入方式 源码 双端工程 Flutter环境 aar 业务框架升级之旅 接下来…… n 技术需求（背景） n 现有业务框架 n 现有业务框架的问题与挑战 n redux到tieba_redux 技术需求（背景） 定制版本、 快速开发新app 细粒度模块化 中台能力 一键配置生成 现有业务框架（传统做法） Model Presenter View 消息中心 注册 监听 发消息 网络(长短链接) 自定义 拦截/整合 模块间 模块内 现有业务框架的问题与挑战

H5+原生（Cordova、微信小程序） • JavaScript开发+原生渲染 （React Native、Weex、快应用） • 自绘UI+原生(Flutter) 移动跨平台方案 技术类型 UI渲染方式 性能 开发效率 动态化 框架代表 H5+原生 WebView渲染 一般 高 支持 Cordova、Ionic JavaScript+原生渲染 原生控件渲染 好 中 支持 RN、Weex 自绘UI+原生 调用系统API渲染 Dart语言简介 - 函数声明 Dart语言简介 - 类声明 上手试试？ Flutter基础 • 组件 • 路由 • 资源管理 • 包管理 Flutter组件 • 基础组件 • 布局组件 • 容器组件 • 功能类组件 基础组件 • StatelessWidget & StatefulWidget • Text • Button • Image • Switch & Checkbox 流式布局（Wrap、Flow） • 层叠布局（Stack） • 对齐与相对定位（Align） 容器组件 • 填充（Padding） • 尺寸限制（ConstrainedBox、SizedBox、） • 移除子组件限制（UnconstrainedBox） • 装饰容器（DecoratedBox） • 变换（Transform） • 容器（Container） • 框架（Scaffold、TabBar、BottomNavigationBar）

闲⻥鱼 - 让你的闲置游起来 Flutter & Dart 全栈开发 三端⼀一体化编程的新⽅方式 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 陈新新 阿⾥里里巴巴 - 闲⻥鱼 • 腾讯、YY、阿⾥里里巴巴 • 20年年程序员 • 多端⼀一体化、⾳音视频通信、P2P⽹网络、区块链 • 多语⾔言 C/C++/Go/Java/Dart…… 闲⻥鱼 - 让你的闲置游起来 让你的闲置游起来 视频和动画 视频 动画 闲⻥鱼 - 让你的闲置游起来 关键问题解决 混合开发：⼯工程管理理和混合栈管理理 外接纹理理播放视频 图⽚片缓存优化 ⽆无反射JSON序列列化 私有PUB库、阿⾥里里⽣生态适配 闲⻥鱼 - 让你的闲置游起来 Flutter和Native性能简单⽐比较 Flutter Native 45 FPS 30 FPS 113.2% 数据模型 Client & Server 前后端⼀一致 视图 Fixed Widget 三端⼀一体化新开发模式 视图 Dynamic Widget 业务逻辑 Client | Server 分拆实现 闲⻥鱼 - 让你的闲置游起来 三端⼀一体化的协议定义 客户端实现 ⽣生成协议 Dart Server 填充协议 写好客户端逻辑后，直接从代码⽣生成协议

方便，但实现被隐藏了。 基础平台商提供现成的服务，开发者只需要懂软 件、懂系统，但不需要懂硬件了。 安全 HTTPS 无处不在 Sandbox 模型 技术发展方向 ● 演进中的各种新技术标准 ● 编程语言的多元化 Web 是平台，能在上面做什么归根结底是技术标 准和浏览器支持说了算。 技术可以被 hack 的方式玩出新花样，但能力本 身并没有改变。 技术发展方向 1. 能力的扩展来自新技术：如 WebRTC Netscape 1998 年成为 ECMA 标准 2006 年 jQuery 发布 2009 年 Node.js：JavaScript 延伸到 Server 端 近两年：AMD、CommonJS 模块化标准 当前：正在制定 ECMAScript 6 标准 JavaScript 并不完美 JavaScript 并不完美 ● 程序结构不明显 ● 并非为性能设计的语言 ● 缺少一些基础功能的支持 3. 执行效率高 4. 有机会成为 Android 内置的虚拟机，用来写手机 App 5. 可以用来写服务器后台程序 6. 可以写 Web 前端程序，在浏览器内运行 @蔡学镛 ● 结构化并且灵活的Web语言 ● 简单、有生产力 ● 适合从小型到大型的项目 ● 高性能、快速启动 ● 适合各种设备的Web环境 Dart 语言的目标 Dart 语言的组成 ● 语言规范 ● Dart

Kraken with Cloud 为什么上云？ Google Stadia PlayStation Now 云游戏 Microsoft xCloud 云化体验 免下载即开即玩 无需购买高性能设备 云计算共享 所有能云化的应用最终都将云化 “ Events WebRTC/QUIC Decoding （H.265） WebSocket Render Engine Encoding (H level frame timing and synchronization optimizations Frame Syncing Kraken 云渲染 Agent Cloud 云 + 端一体化是渲染技术的新趋势 “

Navigator MJFlutter … 异常处理 上线 Http Dart Bridge CSSender Flutter For Web Common CGI Storage … 自动化脚本 部署系统 发布 … Serve 上线 降级 Flutter For Web 4 降级 Flutter Engine Crash Flutter与Native交互异常 Flutter 降级 热更新 反馈 … 异常处理 上线 Http Dart Bridge CSSender Flutter For Web Common CGI Storage … 自动化脚本 部署系统 发布 … Serve 上线 Flutter For Web 4 动态更新 App init Dynamic Patching 页面标记 Flutter Flutter