Flutter在百度贴吧的落地实践 高飞 百度资深研发工程师 自我介绍 自我介绍 高飞 11年加入百度贴吧，资深研发工程师，百度贴吧客户端技术负责人 2016 2011 2012 2018 H5 客户端（工程） 直播（游戏） Flutter 目录 n 为何引入Flutter n 实践之旅 n 总结 目录 n 为何引入Flutter n 实践之旅 n 总结 n 年轻人兴趣社区 Push n 话题 n 神回复 n 个人动态 商业化 n 品牌大使 n 直播 n Banner n 原生广告 研发效率 用户体验 最快触达用户 Flutter的优势 跨平台开发 高效的开发体验 性能接近Native 1 2 3 Ø N倍平台产出 Ø 多端逻辑一致 效率 质量 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级

Armv7问题 字体问题 … 早期的问题： User Crash率： 统计基准⽤用户数：千万级 1% < 0.01% 闲⻥鱼 - 让你的闲置游起来 Flutter两端统⼀一开发，探索进⼀一步提⾼高效率的⽅方法…… 接⼝口协议定义 服务接⼝口实现 ⼀一个⼈人开发三端？ 闲⻥鱼 - 让你的闲置游起来 不不⼀一样的开发和思维⽅方式 部署运维让⼈人觉得很复杂 会增加很多⼯工作量量 客户端写后端服务的疑虑 让你的闲置游起来 ⽆无冲突调试 Isolate加载每个⼈人的代码 只调试指定Isolate 闲⻥鱼 - 让你的闲置游起来 部署时间：20分钟 -> 3秒 本地测试远程服务 ⽆无冲突调试 效率提⾼高 闲⻥鱼 - 让你的闲置游起来 异构系统的服务调⽤用 HTTP Restful Service Mesh C++ Extension ⼏几种途径 Java -> Dart ⼯工具：⽣生成接⼝口和数据模型的Dart代码 客户端和服务端⽇日志融合。 调试⼀一体化 前后端⼀一致的调试⽅方式。 闲⻥鱼 - 让你的闲置游起来 ⼀一体化开发的好处 开发灵活，扩展性好，降低沟通成本 协议三端⼀一致性，提⾼高性能和效率 ⼀一体化的开发环境，全链接⽇日志和调试 服务端更更专注领域服务的通⽤用性和性能 闲⻥鱼 - 让你的闲置游起来 总结 • Flutter统⼀一移动端开发 • 分析Dart实现服务端“胶⽔水层”可⾏行行性

关于Flutter •Google推出的跨平台开发框架 •创建高性能，高稳定性，高帧率的 Android/iOS应用 •使用Dart语言开发 Flutter特性 跨平台 高性能 热重载 提升研发效 率 Flutter的应用 框架对比 Native 性 能 跨平台 Flutter RN web Hybrid 小程序 weex 框架应用 Web •无支持表情/文本混排控件 •解决方案 1.修改Skia引擎渲染 2.业务层适配, 自动计算表情及文本宽度进行自适应换行 研发数据 •开发人力成本 人日 native flutter 图片库 1.34% engine ？ 0.09% richText 0.07% Crash 研发数据 •启动速度 •流畅度 ms fps native flutter native flutter •统一三端开发 WEB iOS Android DART 三端统一 • Dart_Native=>Dart_h5 • 支持从Dart语言到JS转换 • 可直接在浏览器中访问 • 转换效率低框架代码过多 WEB iOS Android DART Dart2JS 三端统一 WEB iOS Android DART Dart2JS • Dart Widget • Property

天猫未来店 GCanvas C++ Engine GPU OpenGL ES / Vulkan Kreken 原型技术原理 GCanvas JS API Kraken 原型版本优劣 研发效率低 适用场景有限 简单直接 嵌入式主板 GPU Skia OpenGL ES / Vulkan Layout XML Layer Tree RenderObject Tree Widget

开发语⾔言：JavaScript 开发语⾔言：JavaScript 为何可以跨平台？ H5、Hybrid：虽然UI⾃自⼰己渲染， 但是渲染性能太低，⽽而且JS运⾏行行 效率太低 RN：虽然是Native渲染，但多了了 布局解析的性能损耗，⽽而且JS运⾏行行 效率太低。 WEB流 ⽅方案2 转化为Native渲染 Mono AOT ARM CODE IL JIT Mono C# c#：同时⽀支持JIT和AOT 2013.11 Dart2.0 2018.8 Dart2.1 2018.12 JIT：动态编译，Hot Reload AOT：静态编译,Native code 强类型，可以类型推断 提升开发效率！ 经过简单统计，写同⼀一个功能， 使⽤用Dart，可以减少50%的代码量量 强⼤大的异步编程能⼒力力 全栈语⾔言 UI Widget 所有UI元素都是widget组件 Stateless

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

iOS/Android/Web/Windows/Linux/macOS/Embedded 使用flutter 开发app意味着什么？ • 无需为每个平台独立维护代码 • 一次编码，多平台运行,效率最大化 • 多平台一致性体验 • 强大的社区资源 Flutter-WebRTC 插件 Flutter-WebRTC 支持那些平台 实现一对一视频通话服务 (基于 Go 开发) 源码: https://github

基于类，单继承、多实现 ● 熟悉的语法和恰当的词法作用域 ● 可选的静态类型 ● 单线程和基于Isolate的并发 为什么喜欢 Dart 1. 开源 2. 有 Google 当靠山 3. 执行效率高 4. 有机会成为 Android 内置的虚拟机，用来写手机 App 5. 可以用来写服务器后台程序 6. 可以写 Web 前端程序，在浏览器内运行 @蔡学镛 ● 结构化并且灵活的Web语言