高飞 Flutter 在百度贴吧的落地实践

2020-04-13 259浏览

  • 1.Flutter在百度贴吧的落地实践 高飞 百度资深研发工程师
  • 2.自我介绍
  • 3.自我介绍 高飞 11年加入百度贴吧，资深研发工程师，百度贴吧客户端技术负责人 2011 2012 H5 2016 客户端（工程） 直播（游戏） 2018 Flutter
  • 4.目录 n 为何引入Flutter n 实践之旅 n 总结
  • 5.目录 n 为何引入Flutter n 实践之旅 n 总结
  • 6.贴吧 n n n n 年轻人兴趣社区 2003年至今 拥有10亿注册用户 2000多万贴吧
  • 7.业务方向 社区生态 内容运营 n 用户增长 n 吧主 n 垂类 n 风控 n Push n 话题 n 神回复 n 个人动态 商业化 n 品牌大使 n 直播 n Banner n 原生广告 研发效率 用户体验 最快触达用户
  • 8.Flutter的优势 1 2 3 跨平台开发 高效的开发体验 性能接近Native Ø N倍平台产出 Ø 多端逻辑一致 效率 质量
  • 9.目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结
  • 10.先看一下全景 矩阵产品 贴吧 贴吧极速版 创新产品 公司其他产 品 工具链 测试 业务模块 一键签到 模块通信 基础 框架 状态管理 混合栈 图片 通用UI 公共结构 Android iOS FlutterSDK Bug管理 网络 日志 视频 全局数 据同步 插件 系统层 基 础 设 施 … 粉丝列表 吧资料 性能工具 状态上报 持续集成 安卓插件 lib架构管理 多版本生成 For Web Lint 一键集成 SDK版本 模板脚手架 BuildRunner FlutterBox 可视化工具 构建 FlutterWeb 开发 性能&稳定性平台 高可用 FPS 页面打开速度 获取日志 crash 包大小分析 远程调试 安全 接口防刷 插件平台
  • 11.目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结
  • 12.第一步 工程体系接入 当 我 跨 出 第 一 步 n Flutter接入方式 n FlutterBox
  • 13.Flutter接入方式 源码 双端工程 Flutter环境 一键命令切换 百度EasyBox 编译产物 aar （默认） Framework 独立Flutter 仓库
  • 14.FlutterBox pubspec开发需求 flutter_manifest.yaml n 直接引用 n 源码开发 n 平台差异 模块化开发 源码接入 merge 一键命令 百度pub server n n n n 基础package 业务package Plugin 外界资源 Flutter源码 工程pubspec.yaml 新pubspec.yaml
  • 15.业务框架升级之旅 接下来…… n n n n 技术需求（背景） 现有业务框架 现有业务框架的问题与挑战 redux到tieba_redux
  • 16.技术需求（背景） 定制版本、 快速开发新app 细粒度模块化 中台能力 一键配置生成
  • 17.现有业务框架（传统做法） 模块间 注册 发消息 模块内 监听 Model 消息中心 View 拦截/整合 Presenter 网络(长短链接) 自定义
  • 18.现有业务框架的问题与挑战 现代 数据和UI一致性较差 响应式 数据本身的变化可控性较差 redux 模块内和模块间代码风格不一致 tieba_redux
  • 19.Redux的优势与问题 n 生态成熟，适用复杂场景 n 带有编码规范的框架 n 满足拦截类开发需求 Redux Ø 网络访问添加通用参数 Ø 打印action序列和State，加速问题定位 Ø 改变跳转，热修复 组织代码 组织思想 n 组件:函数式，class n 数据:props，state n 纯函数 n State变化可预期 n 面向action序列编程 n 松耦合调用方式 模块化 n 概念上的『和』与『分』 n 分之后的代码组织与运行 n 细粒度模块化的编码需求 tieba_redux
  • 20.tieba_redux 模块Redux BaseStore Store State GlobalRedux Store 持有引用 Reducers State Reducers Tasks Map[action(标记),Func]注册 Tasks Actions 给外部访问的action定义到 Actions Listeners Map[action,Func]注册 Listeners Rules Map[action,Func]注册 Rules n n n n n n n 皮肤/夜间/暗黑 开关/配置 账户信息 网络状态 Middleware 同步/异步 并行度 n 全局广播监听者 n 全局拦截处理
  • 21.Task、Listener、Rule 1个Action对 应1个/多个 Task Listener Rule 1个 多个 多个 模块内/全局 静态/动态注册 使用场景 模块内 动态 Redux标准用法如发起网络 全局 静态 打开页面；获取定位 动态 未读消息数变化 静态 App启动；网络变化 静态 拦截页面跳转； 添加通用参数；打日志 全局 全局
  • 22.SHOW CODE 根据pubspec文件修改 触发pubget动态生成 Main函数调用注册函数
  • 23.注册和分发执行 模块 Store NextDisp Task1 NextDisp TaskN NextDisp Reducer 注册分发 Base Store Register (类型和优先级) Global Store NextDisp Rule1-N NextDisp Task1-N NextDisp Listener1-N NextDisp Reducer GlobalTask 匹配每个 Listener 触发模块 Reducer Dispatch(action) Global Store GlobalRule 是否GlobalTask或 GlobalListener有注册 有 无 模块Task 每个Listener注册 时持有模块Store
  • 24.业务框架小结 场 景 扩 展 启动初始化 业务/服务/子系统 Tab容器化 生命周期 tieba_redux 构建系统 一键生成多版本 多团队并行开发 少选模块编译快 加快问题定位 Hook跳转热修复 跨H5可行性 收 益
  • 25.Flutter Android插件之旅 接下来…… Flutter Android插件 n 插件设计与目标 n 问题与挑战
  • 26.插件设计与目标 特性 模块 配置 公共基础库 内置 部署管理 网络 帖子内容 直播 Flutter Java/res/lib Java/res/lib Java/res/lib 插件A 插件B 构 建 平 台 内置 主包 …… 图片 Flutter 公共基础库 游戏吧 粉丝 网络 Assets Flutter plugin 动态依赖 网络 Runtime 运行容器 Java/res/lib 透明 开发 形态 静态依赖 壳（:flutter） …… 业务
  • 27.插件问题与挑战 - plugin资源打包 Native生态成熟 公共基础库 Res 方案1： 代理模式 独立容器 ijkplayer ovprogresshud Pub 透 明 灵 活 Flutter Plugin ovprogresshud Res 自定义控件 Res 方案2： 定制AAPT 资源分段 查找容器 运行注入
  • 28.插件问题与挑战 – AndroidView资源使用 Build#PlatformViewsChannel::createFlutterView::createSurfaceTexture获取textureId，SurfaceTexture #FlutterJNI.registerTexture #PlatformViewAndroid::Register通过GpuRunner到mapping[textureId, AndroidExternalTextureGL] VirtualDisplayController #SingleViewPresentation(context:FlutterActivity)#Presentation构造函数super(createPresentationContext)CompositorContext::Raster#PaintTextureLayer::Paint(textureId)#Texture::PaintAttach，UpdateTexImage， drawImage 反射调用setResource
  • 29.插件问题与挑战 – 加载libapp.so 初始化 FlutterMain #startInitialization initConfig #sAotSharedLibraryName = metadata.getString("aot-sharedlibrary-name", "libapp.so"); 反射修改路径 FlutterActivity#onCreate FlutterActivityDelegate#onCreate FlutterMain #ensureInitializationCo mplete FlutterActivityDelegate #createNativeView FlutterNativeView #attach FlutterJNI.nativeInit #SettingsFromCommandLine 创建shell#创建engine之前，创建DartVM#创建DartVMData #DartSnapshot::VMSnapshotFromSettings和DartSnapshot::IsolateSnapshotFromSettings#NativeLibrary::Create(native_library_path.c_str());#handle_ = ::dlopen(path, RTLD_NOW);
  • 30.目录 n 为何引入Flutter n 实践之旅 n 总结
  • 31.主要分享了 技术全景 工程体系接入 - 分层和工具链 - 通过丰富脚本工具 满足复杂工程需求 业务框架升级 - 传统到现代 - tieba_redux 总结 Flutter Android插件 - 资源和libapp加载
  • 32.落地情况 n 主版本：一键签到，吧详情，粉丝列表等 n 内部版（纯flutter版） ： Android，iOS，iPad n 正在进行：个人中心、 垂类吧
  • 33.展望一下 有Flutter要上； 没有Flutter，创造Flutter也要上
  • 34.
  • 35.
  • 36.