闲⻥鱼 - 让你的闲置游起来 Flutter & Dart 全栈开发 三端⼀一体化编程的新⽅方式 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 陈新新 阿⾥里里巴巴 - 闲⻥鱼 • 腾讯、YY、阿⾥里里巴巴 • 20年年程序员 • 多端⼀一体化、⾳音视频通信、P2P⽹网络、区块链 • 多语⾔言 C/C++/Go/Java/Dart…… 闲⻥鱼 - 让你的闲置游起来 让你的闲置游起来 Flutter在闲⻥鱼应⽤用过程 基础调研 Google⽀支持 混合开发 详情⻚页 发布⻚页 更更多业务 内部版本 Alpha Beta Preview1 Preview2 闲⻥鱼 - 让你的闲置游起来 接近Native效果的UI和交互体验 多图列列表 评论盖楼 图⽂文 闲⻥鱼 - 让你的闲置游起来 Native组件 Native和Flutter混合开发 混合栈 BIZ - 1001 BIZ - 1002 BIZ - 1003 BIZ - 1004 Clients Developers Isolate隔离 单线程异步开发模型 HTTP访问 打包上传 多Isolate增强并发处理理能⼒力力 闲⻥鱼 - 让你的闲置游起来 本地测试 本地调⽤用远程服务 单次请求所有⽇日志回传 Dart Zone HTTP 闲⻥鱼 - 让你的闲置游起来 ⽆无冲突调试

• 基于 Skia 2D 渲染引擎 • 使用类似JS/TS的Dart 语言开发 • 支持代码编辑后热重载, Flutter 支持那些平台 iOS/Android/Web/Windows/Linux/macOS/Embedded 使用flutter 开发app意味着什么？ • 无需为每个平台独立维护代码 • 一次编码，多平台运行,效率最大化 • 多平台一致性体验 • 强大的社区资源 分布式架构 • 基于grpc over NATS mq • 使用redis 存储媒体流全局位置 • 支持业务自定义开发 • 高性能，单个ion-sfu节点 1k 并发仅需 0.5核 ION 架构 多node 架构 主要模块 • ISLB 服务发现，负载均衡，媒体信息全局存储 • Biz 业务接入模块 • SFU 节点 (用于转发webrtc 流，与biz模块配合创建视频会议系 统) •

Web应用的优点 ● 无需安装 ● 增量式开发 ● 自动升级 ● 跨平台 ● 天然的MVC（HTML+CSS+JavaScript） 当前的Web开发 ● Web 开发越来越复杂：项目大，团队成员多 ● 前端功能越来越多：CS→BS→CS ● 大型应用维护和协作难 ● 性能弱，启动速度慢 ● 工具支持弱 ● 仔细选择技术方案和开发规范 Web 开发中还有许多问题有待解决... 未来的方向？ 3. Web App 应该更像 App 而不是一个浏览器 Tab 4. 用户并不关心背后用的是什么技术。 a. App做壳，Web做核 b. Web 会与 OS 更紧密集成，直接提供 Web引擎支持 Chrome App Launcher Chrome Apps Chrome App vs 桌面 App 技术上: ● 独立的窗口 ● 离线使用 ● 通知栏 ● App Launcher 技术篇（Web Components） 大纲 Web语言的发展 1995~2013 JavaScript 1995，18年前 Brendan Eich JavaScript 的发展 多范式：函数式、OO、命令式 1995 年诞生于 Netscape 1998 年成为 ECMA 标准 2006 年 jQuery 发布 2009 年 Node.js：JavaScript 延伸到

Flutter的应用 框架对比 Native 性 能 跨平台 Flutter RN web Hybrid 小程序 weex 框架应用 Web RN(运营需求多的) Native Flutter（性能要求高的） 分享目录 uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 setState 通知 刷新界面 State need update InheritedWidget RichText 本地表情Icon •无支持表情/文本混排控件 •解决方案 1.修改Skia引擎渲染 2.业务层适配, 自动计算表情及文本宽度进行自适应换行 研发数据 •开发人力成本 人日 native flutter 图片库 1.34% engine ？ 0.09% richText

level frame timing and synchronization optimizations Frame Syncing Kraken 云渲染 Agent Cloud 云 + 端一体化是渲染技术的新趋势 “

⽅方案1： H5 WebView Hybrid WebView+Native React Native JavaScript+Native ⾃自⼰己负责渲染 WebView 跨平台的布局引擎： 转化为Native渲染 开发语⾔言：JavaScript 开发语⾔言：JavaScript 为何可以跨平台？ H5、Hybrid：虽然UI⾃自⼰己渲染， 但是渲染性能太低，⽽而且JS运⾏行行 UI布局。 编译流/虚拟机流 ⽅方案3 ⾃自⼰己负责渲染 Unity：虽然渲染性能很强⼤大，但渲染 机制为实时刷新，耗电量量太⼤大，在 APP⾥里里都是局部刷新；⽽而且安装包也 很⼤大 游戏引擎 最终⽅方案 渲染：⾃自⼰己负责渲染 dart：同时⽀支持JIT和AOT，性能⾼高 跨平台 性能 WebView Hybrid Native ReactNative Xamarin

原生性能 初识Flutter Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面 Flutter简介 1 原生性能 生态与模式 C/C++ 引擎操作OpenGL、GPU直接渲染 平台一致性 Flutter简介 1 生态与模式 原生性能 实践框架及页面栈管理 2 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 保存页面栈信息 FlutterEngine/FlutterNativeView Route Navigator 性能优化 3 性能优化 3 泄漏 内存 增量 内存 - 降低20% 引擎 图片加载 性能优化 3 分析调 试 渲染 页面渲染 - 降低20-30% 定制规 则 优先使用StatelessWidget 最小封装原则 减少build函数中过多操作 尝试将部分Widget设置为const

目录 n 为何引入Flutter n 实践之旅 n 总结 目录 n 为何引入Flutter n 实践之旅 n 总结 n 年轻人兴趣社区 n 2003年至今 n 拥有10亿注册用户 n 2000多万贴吧 贴吧 业务方向 社区生态 n 用户增长 n 吧主 n 垂类 n 风控 内容运营 n Push n 话题 n 神回复 n 个人动态 商业化 n 品牌大使 n 直播 n Banner Ø Android插件化 n 总结 先看一下全景 开发 工具链 一键集成 SDK版本 模板脚手架 BuildRunner FlutterBox 可视化工具 构建 持续集成 安卓插件 多版本生成 lib架构管理 For Web Lint 测试 性能工具 状态上报 基 础 设 施 性能&稳定性平台 FPS 页面打开速度 crash Bug管理 包大小分析 高可用 Reducer 每个Listener注册 时持有模块Store NextDisp Reducer Global Store 注册分发 业务框架小结 场 景 扩 展 收 益 一键生成多版本 多团队并行开发 加快问题定位 Hook跳转热修复 少选模块编译快 跨H5可行性 启动初始化 业务/服务/子系统 Tab容器化 生命周期 构建系统 tieba_redux Flutter