Flutter 在百度贴吧的落地实践.pptx

1、Flutter在百度贴吧的落地实践n 为何引入Fluttern 实践之旅n 总结目录n 为何引入Fluttern 实践之旅n 总结目录贴吧n 年轻人兴趣社区n 2003年至今n 拥有10亿注册用户n 2000多万贴吧业务方向社区生态 内容运营 商业化n 用户增长 n Pushn 品牌大使n 直播n Bannern 吧主n 垂类n 风控n 话题n 神回复n 个人动态 n 原生广告研发效率用户体验最Flutter的优势跨平台开发123高效的开发体验性能接近Native N倍平台产出 多端逻辑一致效率质量n 为何引入Fluttern 实践之旅 技术全景目录 工程体系接入 业务框架升级 Android

2、插件化n 总结先看一下全景公司其他产品矩阵产品贴吧贴吧极速版 创新产品测试Bug管理业务模块一键签到吧资料粉丝列表性能工具状态上报模块通信 状态管理UI混合栈 网络 日志构建持续集成多版本生成 For Web基础框架插件全局数据同步公共结构通用图片 视频安卓插件 lib架构管理Lint系统层AndroidiOSFlutterSDK FlutterWeb开发一键集成基础设施性能&稳定性平台高可用获取日志安全接口防刷SDK版本 模板脚手架FPS页面打开速度BuildRunner FlutterBox 可视化工具crash远程调试包大小分析插件平台n 为何引入Fluttern 实践之旅 技术全景目录

3、 工程体系接入 业务框架升级 Android插件化n 总结第一步工程体系当我跨出第一步n Flutter接入方式n FlutterBoxFlutter接入方式源码双端工程Flutter环境aar独立Flutter仓库编译产物（默认）FrameworkFlutterBoxpubspec开发需求flutter_manifest.yamln 直接引用n 源码开发n 平台差异源码接入一键命令模块化开发merge百度pub servern 基础packagen 业务packagen PluginFlutter源码工程pubspec.yamln 外界资源业务框架升级之旅接下来n 技术需求（背景）n 现有业

4、务框架n 现有业务框架的问题与挑战n redux到tieba_redux技术需求（背景）定制版本、快速开发新app细粒度模块化中台能力一键配置生成现有业务框架（传统做法 ）模块间注册 发消息 监听Mod消息中心拦截/整合网络(长短链接) 自定义现有业务框架的问题与挑战现代数据和UI一致性较差数据本身的变化可控性较差模块内和模块间代码风格不一致Redux的优势与问题n 生态成熟，适用复杂场景n 带有编码规范的框架n 满足拦截类开发需求 网络访问添加通用参数 打印action序列和State，加速问题定位 改变跳转，热修复Redux模块化n 概念上的和与分n 分之后的代码组织与运行n 细粒度模块化

5、的编码需求组织代码组织思想n 组件:函数式，classn 数据:props，staten 纯函数n State变化可预期n 面向action序列编程n 松耦合调用方式ttieba_redux模块ReduxStoreGlobalReduxStoreBaseStoren 皮肤/夜间/暗黑n 开关/配置n 账户信息n 网络状态n Middlewaren 同步/异步n 并行度持有引用StateStateReducersTasksReducersTasksMapaction(标记),Func注册给外部访问的action定义到Mapaction,Func注册ActionsListenersRulesAct

6、ionsListenersRulesn 全局广播监听者n 全局拦截处理Mapaction,Func注册Task、Listener、Rule1个Action对应1个/多个模块内/全局 静态/动态注册模块内动态 Redux标准用法如发起网络Task1个全局静态动态静态打开页面；获取定位未读消息数变化Listener 多个全局全局App启动；网络变化拦截页面跳转；添加通用参数；打日志Rule多个静态SHOW CODE根Main函数调用注册函数注册和分发执行模块StoreNextDispTask1NextDispTaskNNextDispReducer注册分发Register(类型和优先级)Globa

7、lStoreNextDispRule1-NNextDispTask1-NBase StoreLDispatch(action)匹GlobalTask有Global是否GlobalTask或GlobalListener有注册GlobalRuleStore无 模块Task业务框架小结场景扩展启动初始化Tab容器化业务/服务/子系统生命周期tieba_redux构建系统一键生成多版本 多团队并行开发少选模块编译快跨H5可行性收益Hook跳转热修复加快问题定位Flutter Android插件之旅接下来Flutter Android插件n 插件设计与目标n 问题与挑战插件设计与目标特性公共基础库静态依

8、赖Java/res/lib模块 透明配置 开发Flutterplugin网络帖子内容 直播Flutter动态依赖形态内置 网络F公共Java/res/libJava/res/libJava/res/lib插件B插件ARuntime业务游戏吧构建平台内置 网络运行容器主包Assets壳（部署管理插件问题与挑战 - plugin资源打包Native生态成熟公共基础库 Res方案1：代理模式独立容器ijkplayerovprogresshudPub透明灵活方案2：Flutter Plugin定制AAPT资源分段查找容器运行注入ovprogresshud Res 自定义控件 Res插件问题与挑战 An

9、droidView资源使用Build#PlatformViewsChannel:createComposFlutterView:createSurfaceTextureTextureLayer:Paint(textureId)#Texture:Paint获取textureId，SurfaceTexture#FlutterJNI.registerTexture#PlatformViewAndroid:RegisterAttach，UpdateTexImage，drawImage通过GpuRunner到mappingtextureId, AndroidExternalTextureGLVirtua

10、lDisplayController反射调用setResource#SingleViewPresentation(context:FlutterActivity)#Presentation构造函数super(createPresentationContext)插件问题与挑战 加载libapp.so初始化initConfig#sAotSharedLibraryName = metadata.getString(aot-shared-FlutterMain#startInitializationlibrary-name, libapp.so);反射修改路径FlutterActivity#onCre

11、ateFlutterActivityDelegate#onCreateFlutterMain#ensureInitializationCompleteFlutterJNI.nativeInit#SettingsFromCommandLineFlutterActivityDelegate#createNativeView创建shell#创建engine之前，创建DartVM#创建DartVMData#DartSnapshot:VMSnapshotFromSettings和DartSnapshot:IsolateSnapshotFromSettings#NativeLibrary:Create(n

12、ative_library_path.c_str();#handle_ = :dlopen(path, RTLD_NOW);FlutterNativeView#attachn 为何引入Fluttern 实践之旅n 总结目录主要分享了技术全景- 分层和工具链工程体系接入- 通过丰富脚本工具满足复杂工程需求总结业务框架升级- 传统到现代- tieba_reduxFlutter Android插件- 资源和libapp加载落地情况n 主版本：一键签到，吧详情，粉丝列表等n 内部版（纯flutter版） ：Android，iOS，iPadn 正在进行：个人中心、垂类吧展望一下有Flutter要上；没有Flutter，创造Flutter也要上