2003年至今 n 拥有10亿注册用户 n 2000多万贴吧 贴吧 业务方向 社区生态 n 用户增长 n 吧主 n 垂类 n 风控 内容运营 n Push n 话题 n 神回复 n 个人动态 商业化 n 品牌大使 n 直播 n Banner n 原生广告 研发效率 用户体验 最快触达用户 Flutter的优势 跨平台开发 高效的开发体验 性能接近Native 1 2 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 先看一下全景 开发 工具链 一键集成 SDK版本 模板脚手架 BuildRunner FlutterBox 可视化工具 构建 持续集成 安卓插件 多版本生成 lib架构管理 For Web Lint 测试 性能工具 状态上报 基 础 设 施 性能&稳定性平台 高可用 获取日志 远程调试 安全 接口防刷 插件平台 矩阵产品 贴吧 贴吧极速版 创新产品 公司其他产 品 业务模块 一键签到 吧资料 粉丝列表 … 系统层 Android iOS FlutterSDK 基础 框架 模块通信 状态管理 公共结构 通用UI 混合栈 网络 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 n 为何引入Flutter

Xamarin：虽然性能好了了⼀一些，但是跨 平台的UI⽀支持不不好，⽆无法实现复杂的 UI布局。 编译流/虚拟机流 ⽅方案3 ⾃自⼰己负责渲染 Unity：虽然渲染性能很强⼤大，但渲染 机制为实时刷新，耗电量量太⼤大，在 APP⾥里里都是局部刷新；⽽而且安装包也 很⼤大 游戏引擎 最终⽅方案 渲染：⾃自⼰己负责渲染 dart：同时⽀支持JIT和AOT，性能⾼高 跨平台 性能 WEB Guangzhou 语⾔言 Dart语⾔言发布 2011.10 Dart1.0 2013.11 Dart2.0 2018.8 Dart2.1 2018.12 JIT：动态编译，Hot Reload AOT：静态编译,Native code 强类型，可以类型推断 提升开发效率！ 经过简单统计，写同⼀一个功能， 使⽤用Dart，可以减少50%的代码量量 强⼤大的异步编程能⼒力力

开源社区 05 Q&A 06 背景 第一部分 即将讲述的内容 • WebRTC 实时通讯 • Flutter 跨平台UI 开发框架 • 基于Flutter UI 框架的WebRTC 插件 flutter-webrtc • Go 语言的WebRTC 协议栈 pion/webrtc • 基于pion/webrtc 的应用级服务框架 pion/ion • 5G 时代, 实时通讯应用爆发 使用flutter 开发app意味着什么？ • 无需为每个平台独立维护代码 • 一次编码，多平台运行,效率最大化 • 多平台一致性体验 • 强大的社区资源 Flutter-WebRTC 插件 Flutter-WebRTC 支持那些平台 实现一对一视频通话服务 (基于 Go 开发) 源码: https://github.com/flutter-webrtc/flutter-webrtc-server

版本迭代 Flutter NOW Version1.0 动态搜索页 Flutter NOW Version2.0 首页关注tab Flutter NOW Version3.0 房间页 2018.4 2018.11 2019.2 Flutter 独立 APP 保密 & 2019.5 Flutter实现的页面 动态页 三级页面 关注页 首页 房间 核心页面 系统框架 uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 动态更新 •Android原生支持 •iOS Release版本不支持 •iOS系统无法在运行时将内存页 标记为可执行 Android构建产出 iOS构建产出 Dart Project Android终端 iOS终端 应用更新 动态更新 •下发JIT编译产出 •牺牲性能 •仅适用于体验要求不高页面 JIT构建产出

决跨浏 览器兼容性问题，Remy Sharp首次提到了ployfilling的概念。 把浏览器想象成有裂缝的墙面，而用腻子可以把这些裂缝填 平，最后得到的是光滑的浏览器“墙面”。 定义：一段代码或插件，可以让开发人员使用应有的技术，就 像浏览器原生提供该功能一样。换句话说，它能帮你抹平API 之墙。 详见：http://www.ituring.com.cn/article/766 by 李松峰

支持 Hot Reload 不支持 Flex Layout 布局 比肩原生的性能 调试工具完善 脱离前端 JS 生态 不支持动态下发 Bundle 不支持类 JSX，可读性差 前端视角里的 Flutter 使用 Flutter 的刚性诉求 具有动态性 可连接前端生态 Dart 生产模式 开发 Develop 部署 Deploy JIT Dart VM Dart AOT Runtime

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

H5+原生（Cordova、微信小程序） • JavaScript开发+原生渲染 （React Native、Weex、快应用） • 自绘UI+原生(Flutter) 移动跨平台方案 技术类型 UI渲染方式 性能 开发效率 动态化 框架代表 H5+原生 WebView渲染 一般 高 支持 Cordova、Ionic JavaScript+原生渲染 原生控件渲染 好 中 支持 RN、Weex 自绘UI+原生 调用系统API渲染