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

海开朗

2020/04/09 发布于 科学 分类

文字内容
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::create FlutterView::createSurfaceTexture 获取textureId,SurfaceTexture #FlutterJNI.registerTexture #PlatformViewAndroid::Register 通过GpuRunner到mapping[textureId, AndroidExternalTextureGL] VirtualDisplayController #SingleViewPresentation(context:FlutterActivity) #Presentation构造函数super(createPresentationContext) CompositorContext::Raster#Paint TextureLayer::Paint(textureId) #Texture::Paint Attach,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::VMSnapshotFromSettingsDartSnapshot::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也要上