林帅斌 Flutter 在字节跳动的现状与工程实践

2020-04-13 300浏览

  • 1.Flutter在字节跳动的现状与⼯工程实践 林林帅斌 字节跳动移动平台部⾼高级研发⼯工程师
  • 2.总结
  • 3.⾃自我介绍 林林帅斌，就职于字节跳动移动平台部，⽬目前负责 Flutter应⽤用框架层基础建设，涵盖研究⽅方向包括⼯工程 接⼊入、状态管理理、容器器化⽅方案、研发流程建设等。 移动平台部 研发体系 通⽤用服务 & 基础架构 基础组件 APM 跨平台 端智能 技术预研探索 ……
  • 4.⽬目录 • • • Flutter在字节跳动的现状 • Flutter的优势与业务现状 • 建设进展与规划简介 ⼯工程实践 • Flutterw研发套件 • 容器器化⼯工程⽅方案 • ByteRedux状态管理理⽅方案 总结与展望
  • 5.⽬目录 • • • Flutter在字节跳动的现状 • Flutter的优势与业务现状 • 建设进展与规划简介 ⼯工程实践 • Flutterw研发套件 • 容器器化⼯工程⽅方案 • ByteRedux状态管理理⽅方案 总结与展望
  • 6.为什什么选择Flutter？ 性能体验 开发效率 ⾼高度⼀一致性 ⾼高可控制性
  • 7.业务落地
  • 8.正在使⽤用Flutter的业务 20+ 今⽇日头条 ⻄西⽠瓜视频 ⽪皮⽪皮虾 Helo 更更多…
  • 9.⽬目录 • • • Flutter在字节跳动的现状 • Flutter的优势与业务现状 • 建设进展与规划简介 ⼯工程实践 • Flutterw研发套件 • 容器器化⼯工程⽅方案 • ByteRedux状态管理理⽅方案 总结与展望
  • 10.建设⽬目标
  • 11.建设规划（3+1） 应⽤用框架 基础组件 Monitor Account Applog …… ⼯工程架构 容器器化 状态管理理 混合⼯工程 版本⼀一致 ⼯工程 效率 最佳 实践 基础服务 周边建设 研发 技术体系 Flutterw 组件平台 CI 质量量 引擎框架 性能优化 渲染 启动速度 内存 包体积 FST压测 Crash治理理 Multi-Window 多端⼀一体化 端内存复⽤用 构建⼯工具优化 知识库 FAQ 培训课程 Benchmark 技术联盟 线上 交流⼤大群 监控体系 灰度/降级 信息同步群
  • 12.⽬目录 • • • Flutter在字节跳动的现状 • Flutter的优势与业务现状 • 建设进展与规划简介 ⼯工程实践 • Flutterw研发套件 • 容器器化⼯工程⽅方案 • ByteRedux状态管理理⽅方案 总结与展望
  • 13.Flutterw—背景 Android Web iOS IDE 配置复杂、环境差异化⼤大 链路路⻓长 ⽅方案实施困难
  • 14.Flutterw—研发套件 配置表 沙盒隔离 ⼯工程接⼊入 产物发布 Environment Engineering 引擎⼀一致 问题跟进 平台能⼒力力 Support Playground Dryrun ⽅方案实施
  • 15.Flutterw—研发套件 配置表 1. 标准化⼯工程环境 沙盒隔离 ⼯工程接⼊入 2. 提供⾃自动化⼯工程能⼒力力 Environment 产物发布 Engineering 引擎⼀一致 问题跟进 平台能⼒力力 Support Playground Dryrun ⽅方案实施
  • 16.Flutterw—标准化⼯工程环境 ⼯工程 ⼯工程 + 本地环境 flutterw.properties SDK版本信息 项⽬目属性 依赖⼯工具 …… ⼯工程（内置配置） 代码/资源 Flutterw
  • 17.Flutterw—⾃自动化⼯工程能⼒力力 部署⽅方案 ⾃自动更更新 使⽤用⽅方案解决问题 Flutterw 携带信息 反馈问题
  • 18.Flutterw—⼩小结 • 标准化⼯工程环境，保证项⽬目成员环境⼀一致，问题可回溯。 • ⾃自动化⼯工程⽅方案能⼒力力，协助排查问题、解决问题，实施⽅方案。 • 提供低成本体验Flutter能⼒力力，降低Flutter的推⼴广难度。 • 配合研发流程打包发布Flutter产物。
  • 19.⽬目录 • • • Flutter在字节跳动的现状 • Flutter的优势与业务现状 • 建设进展与规划简介 ⼯工程实践 • Flutterw研发套件 • 容器器化⼯工程⽅方案 • ByteRedux状态管理理⽅方案 总结与展望
  • 20.容器器化—背景
  • 21.容器器化—背景 调⽤用 容器器化API 实现 宿主
  • 22.容器器化—多端、多业务交叉部署 • 容器器化API保证了了运⾏行行环境基础能⼒力力统⼀一 业务A Container APIs • Flutter保证了了运⾏行行环境渲染能⼒力力统⼀一 业务B • Write Once，Run Everywhere
  • 23.容器器化—业务隔离部署 • 容器器提前独⽴立部署 • 业务⾯面向容器器API开发 运⾏行行容器器 • 业务打包产物独⽴立部署 Container APIs 开发Dart代 • 开发环境和运⾏行行环境分离，H5开发体验 加载Dart产物 打包Dart产物 开发阶 交付、验收
  • 24.容器器化—体系 Dart Business Dart Business Dart Business …… APIs Module API Dart API Flutter Framework API Native API ExtensionImpl Register Flutter API Impl Native Plugin Impl Flutter Engine Protocol Manager Default Adapter Host Platform （Capacity Provider） Image Default Protocol Impl Android Account Account Protocol Image Account …… Custom Protocol Adapter iOS … Flutter for web Webview Image Protocol Protocol Handler Version …… Web … Image Account More … …
  • 25.容器器化—⼩小结 • 容器器化标准化了了各端的基础能⼒力力 • 分离开发关注点，降低开发难度 • 业务开发、部署环境可分离，可以⾯面向Web端提供更更快更更好的开发体验，最终部署在 Native获得更更好的⽤用户使⽤用体验
  • 26.⽬目录 • • • Flutter在字节跳动的现状 • Flutter的优势与业务现状 • 建设进展与规划简介 ⼯工程实践 • Flutterw研发套件 • 容器器化⼯工程⽅方案 • ByteRedux状态管理理⽅方案 总结与展望
  • 27.状态管理理—背景
  • 28.状态管理理—Redux的优势 图⽚片来源：https://almerosteyn.com/2016/08/redux-explained-again
  • 29.状态管理理—Redux的原理理 • • • 单⼀一数据源 状态不不可变 只能使⽤用纯函数重建状态 APIs Store Action Middleware Reducer Dispatch State Subscribe View
  • 30.状态管理理—实战Redux 1. ⼊入⻔门成本偏⾼高，但维护成本显著降低 2. 全局只有⼀一个Store是个⼤大问题 A. 牵⼀一发动全身，全局计算导致性能问题 B. ⽆无法多⼈人协作开发 3. 状态是静态定义的 A. 数据结构复杂化 B. 状态缺乏⽣生命周期 标题 300 没有使⽤用Redux Redux 225 150 75 0 1 3 未命名 1 开发/维护成本 未命名 3
  • 31.状态管理理—⽅方案对⽐比 优势 劣势 状态可控，变更更可预测 ⽅方案成熟 第三⽅方资源多 不不适应⼤大型应⽤用、多⼈人协作开发 MobX ⾃自动⽣生成代码 Dart代码⽣生成技术不不成熟 状态内嵌时管理理混乱 Provider Provide Scoped Modle 轻量量级 状态注⼊入框架 弱化状态管理理能⼒力力 Fish Redux 状态分散在组件，运⾏行行时组装状态 适合⼤大中型应⽤用开发 相对较“重”，概念多，学习成本⾼高 全局状态不不好处理理 Redux
  • 32.状态管理理—ByteRedux⽅方案 关键问题：Store“超重”，Store需要负责具体UI互动细节，⼜又要负责管理理全局状态两个⻆角⾊色 核⼼心思路路：引⼊入更更⾼高⼀一级的概念取代Store成为单⼀一数据源，管理理全局 StoreTree Root Store Store Store Store Store Store
  • 33.ByteRedux—⾼高性能、低学习成本 Redirect To Root Route To Target Root Sync New State To UI UI Store Dispatch Action Store Store Store Store
  • 34.ByteRedux—⽀支持模块化开发 Root 模块A Store Root ⽀支持 Mock外 部状态进 ⾏行行开发 模块A Store Store Store Store 内嵌于宿主运⾏行行 Store Store Store 模块化独⽴立运⾏行行
  • 35.ByteRedux—复⽤用已有社区资源 Github Redux 3rd Component Adapter ByteRedux Dart.dev Flutter.dev
  • 36.ByteRedux—架构 Apps Business ViewModels Stores RouteMiddleware Broadcast Dispatcher Router TreeRoot Store Adapter Middleware Adapter Test FlutterLemon Connector StoreFinder StoreTree VirtualRoot Provider ByteRedux ByteRunner Flutter Framework Framework
  • 37.ByteRedux—⼩小结 1. 2. 3. 4. 5. 6. 具备Redux的所有优势（强管控、可预测、测试友好） ⾼高性能 ⽀支持模块化开发、运⾏行行 学习成本低 复⽤用已有社区资源 ⽀支持全局、局部⼴广播等新特性
  • 38.⽬目录 • • • Flutter在字节跳动的现状 • Flutter的优势与业务现状 • 建设进展与规划简介 ⼯工程实践 • Flutterw研发套件 • 容器器化⼯工程⽅方案 • ByteRedux状态管理理⽅方案 总结与展望
  • 39.总结 • Flutter@字节跳动 • • • 已经成为了了新业务的⾸首选技术栈之⼀一。 建设⽅方向覆盖了了引擎、应⽤用框架、基础服务等⽅方⾯面。 ⼯工程实践 • • • Flutterw标准化Flutter的开发环境，提供了了⽅方案统⼀一实施的能⼒力力。 容器器化⽅方案让运⾏行行环境提供统⼀一基础能⼒力力，真正实现Write Once，Run Everywhere。 ByteRedux状态管理理⽅方案以很低的成本解决了了Redux的问题，保留留了了Redux的优势，使 其适应⼤大中⼩小型应⽤用。
  • 40.展望 1. Flutter在字节跳动内作为下⼀一代⼤大移动端开发技术栈 继续推进。 2. 在⼯工程实践上，围绕开发者体验致⼒力力于降低使⽤用成 本，赋予更更多能⼒力力。 3. 欢迎⼤大家⼀一起讨论Flutter、移动端、产品相关的任何 话题。 nio 林林帅斌
  • 41.⽬目录
  • 42.⽬目录
  • 43.THANKS THANKS！ THANKS！