有赞移动跨平台框架实践

2020-02-23 205浏览

  • 1. 移动跨平台框架实践 ⼤大盛 / 李李⼦子
  • 2. 跨平台框架
  • 3. 有赞的实践
  • 4. 开发效率 4⼈人⽇日 2.5⼈人⽇日 3⼈人⽇日 包⼤大⼩小 动态化 - iOS ZanLuaControl Android Tinker iOS 增加 5 M ⻚页⾯面级替换 Android 增加 3.4 M ⽆无需重启App iOS 增加 28 M Android 增加 6 M 暂不不⽀支持
  • 5. ZanWeex 基础建设 脚⼿手架 开发体验 构建平台 发布平台 SDK
  • 6. ZanWeex 基础建设 脚⼿手架 开发体验 构建平台 发布平台 SDK
  • 7. 脚⼿手架 • ynpm i -g zweex-toolkit • zweex create
  • 8.
  • 9. 脚⼿手架 • ynpm i -g zweex-toolkit • zweex create • zweex page • npm run start hi, helloworld
  • 10. ZanWeex 基础建设 脚⼿手架 开发体验 构建平台 发布平台 SDK
  • 11. 开发体验 • UI组件库
  • 12. 开发体验 • UI组件库 ‣ viewWidth • weex.config.yzenv ‣ viewHeight ‣ statusBarHeight ‣ bottomHeight
  • 13. 开发体验 • UI组件库 ‣ zwm-navigator • weex.config.yzenv ‣ zwm-carmen • 统⼀一 module 协议 ‣ zwm-config ‣ zwm-account ‣ zwm-logger
  • 14. 开发体验 • UI组件库 ‣ ZParamStorage module • weex.config.yzenv ‣ BroadcastChannel • 统⼀一 module 协议 • ⻚页⾯面间传参
  • 15. 开发体验 • UI组件库 • weex.config.yzenv vue 拷⻉贝URL • 统⼀一 module 协议 • ⻚页⾯面间传参 • 图⽚片相对路路径 /Resources CDN 图⽚片资源⽂文件
  • 16. 开发体验 • UI组件库 • weex.config.yzenv • 统⼀一 module 协议 • ⻚页⾯面间传参 • 图⽚片相对路路径
  • 17.
  • 18. 开发体验 • UI组件库 • weex.config.yzenv • 统⼀一 module 协议 • ⻚页⾯面间传参 • 图⽚片相对路路径
  • 19. 开发体验 • UI组件库 • weex.config.yzenv • 统⼀一 module 协议 • ⻚页⾯面间传参 • 图⽚片相对路路径
  • 20. 开发体验 • UI组件库 • weex.config.yzenv • 统⼀一 module 协议 • ⻚页⾯面间传参 • 图⽚片相对路路径 • 其他
  • 21. 开发体验 • UI组件库 • weex.config.yzenv • 统⼀一 module 协议 • ⻚页⾯面间传参 • 图⽚片相对路路径 • 其他
  • 22. ZanWeex 基础建设 脚⼿手架 开发体验 构建平台 发布平台 SDK
  • 23. 构建平台
  • 24.
  • 25. 项⽬目基本信息 模块唯⼀一标识 代码仓库地址 构建列列表
  • 26. 构建产物 项⽬目 项⽬目基本信息 pagexxx.js 构建分⽀支 模块唯⼀一标识 … 代码仓库地址 pagexxx.js CDN
  • 27. 构建平台 构建产物 项⽬目 项⽬目基本信息 pagexxx.js 构建分⽀支 模块唯⼀一标识 … 代码仓库地址 pagexxx.js CDN
  • 28. ZanWeex 基础建设 脚⼿手架 开发体验 构建平台 发布平台 SDK
  • 29. 发布平台
  • 30.
  • 31. 发布平台
  • 32. 发布平台
  • 33.
  • 34.
  • 35. 发布平台
  • 36. 发布平台 项⽬目 配置表 项⽬目基本信息 { ⻚页⾯面Route: { id: xxx jsURL: xxx, md5: xxx }, … , ⻚页⾯面Route: { id: xxx jsURL: xxx, md5: xxx } ⻚页⾯面列列表（可编辑） ⻚页⾯面Route JS URL 下发规则 xxx-page https://xxx.js 全量量 xxx-page https://xxx.js 灰度 xxx-page https://xxx.js 条件 权限与审批 … xxx-page https://xxx.js 全量量 有赞移动基础保障平台 }
  • 37.
  • 38. 发布平台 Push ZanWeex SDK Fetch
  • 39. 发布平台 Push ZanWeex SDK 缓存 渲染 Fetch 数据
  • 40. ZanWeex 基础建设 脚⼿手架 开发体验 构建平台 发布平台 SDK
  • 41. SDK 配置拉取策略略 • 收到发布平台的更更新消息 • ⽹网络状态切换 • 失败重试 3 次 • 业务⽅方主动控制 • 业务⽅方内置配置表及js⽂文件
  • 42. SDK 缓存策略略 本地缓存 内存 本地缓存 更更新缓存 配置表 render JS⽂文件 内置⽂文件 内置配置表 即时下载 渲染
  • 43. SDK 多业务模块 业务模块 1 业务模块 2 … 业务模块 X 模块2缓存区 … 模块X缓存区 ZanWeex SDK 模块1缓存区
  • 44. SDK 数据收集 • ⻚页⾯面JS⽂文件是否下载成功 • ⻚页⾯面是否渲染成功 • ⻚页⾯面渲染的开始及结束时间统计 • ⻚页⾯面的JS错误级别⽇日志
  • 45. 数据展示
  • 46.
  • 47. 数据展示
  • 48. 数据展示
  • 49. 数据展示
  • 50. ZanWeex 基础建设 脚⼿手架 开发体验 构建平台 发布平台 SDK
  • 51. ZanWeex 现状 Weex⻚页⾯面总共 344 个 Weex⻚页⾯面总渲染次数 ⻚页⾯面平均渲染时间 69575802 次 178 ms
  • 52. Flutter 实践 李李⼦子
  • 53. 探索 实践 成果 规划
  • 54. 探索 实践 成果 规划
  • 55. Flutter发展过程 2019.03 Flutter 1.2 提升稳定性、性 能，全新的基于 Web的调试⼯工具 2018.06 预览版发布 2018 .12 Flutter 1.0 正式版发布 2019.07 Flutter 1.7 Android X , 64 位应⽤用⽀支持等 2019.05 Flutter 1.5 正式成为全平台框 架，⽀支持⼿手机、 Web、桌⾯面电脑和 嵌⼊入式设备 2019.09 Flutter 1.9 稳定版发布 Flutter for Web 合并⾄至主仓库
  • 56. Flutter 调研 Native CPU 7.7% 较平稳 • 性能流畅度 • 学习成本 • ⽣生态环境 • 开发体验 内存 12M Flutter CPU 18.8% 波动⼤大 内存 21M
  • 57. Flutter 调研 • 性能流畅度 • 学习成本 • ⽣生态环境 • 开发体验 Flutter Inspector ⼯工具fps 变化
  • 58. Flutter 调研 • 性能流畅度 更更贴近Native Flutter 框架易易理理解 Dart 与Kotlin 、Swift语⾔言特性 较多相似易易理理解 • 学习成本 类似的UI架构 全局主题配置 可空类型处理理 函数式编程 • ⽣生态环境 UI适配⽅方案 多语⾔言处理理 关键字 泛型 路路由管理理 ········ 扩展函数 ········ • 开发体验
  • 59. Flutter 调研 • 性能流畅度 • 学习成本 ⾕谷歌的⼤大⼒力力推⼴广与⽀支持 6000 + 的三⽅方库⽀支持 活跃的Flutter社区 79.6 K Star 16678次提交 • ⽣生态环境 较多⼤大⼚厂在探索试点 233次发版 • 开发体验 闲⻥鱼、微信、QQ、 京东、58，360等 485位贡献者
  • 60. Flutter 调研 环境搭建 AS / IntelliJ / VSCode 完善的中英⽂文⽂文档 框架语⾔言学习 更更贴近Native Flutter 框架 Dart Kotlin Swift 语⾔言特性相似 组件库丰富 嵌套编码布局 完善的开发⼯工作流 ⽀支持 Hot Reload • 性能流畅度 • 学习成本 • ⽣生态环境 开发调试 • 开发体验 构建集成 官⽅方集成侵⼊入性较强
  • 61. Flutter 调研 • 性能流畅度 FPS接近60帧，内存较原⽣生偏⾼高 • 学习成本 学习成本低，1天即可进⼊入开发 • ⽣生态环境 强⼤大的社区⽀支持 • 开发体验 更更贴近移动的开发体验
  • 62. Flutter 内部试点 帧率 8.1 ms / frame 帧率 8.7 ms / frame 刷新率 4.2 ms / frame 刷新率 7.6 ms / frame
  • 63. 探索 实践 成果 规划
  • 64. 有赞Flutter 架构 AS插件 AS插件 效率提升 资源管理理 数据监控 异常上报 埋点监控 构建发布 ZanFlutter 混编⽅方案 MBD构建集成 基础建设 YouZan Flutter Pub 基础插件 ⼯工程模板 UI组件库 路路由管理理
  • 65. Flutter 插件是什什么？ ⼀一种专⽤用的Dart包，其中包含⽤用Dart代码编写的API，以及针对Android 和iOS平台的特定实现，也就是说插件包括原⽣生代码与Dart代码 Weex Module = Flutter Plugin = JSBridge
  • 66. 已开发插件 ⽹网络库插件 埋点插件 分享库插件 路路由插件 Toast插件 Bugly插件
  • 67. Pub 是什什么？ Maven = Pub = CocoaPods
  • 68. Youzan Pub Youzan Pub是⼀一个由dart编写的server，⽀支持上传和下载，同时也⽀支持上传到Flutter 公共 社区，实际开发中，内部开发的插件是不不对外暴暴露露的。 ⽹网络库插件 Flutter 业务模块 分享库插件 Flutter 业务模块 埋点插件 …… 官⽅方校验 上传 Youzan Pub Flutter 业务模块 ……
  • 69. UI组件库 下拉刷新组件 Dialog 导航栏 YZAssestImage CachedNetworkImage ……….
  • 70. 路路由管理理 Native Page Page Page Page 相互依赖耦合严重 开发体验差 Flutter Page Page Page Page
  • 71. 路路由管理理 Native Page Route Flutter Page Page Page ZanUrlRouter / Bifrost Page Page Page Page
  • 72. Flutter ⻚页⾯面栈 Activity / VC Activity / VC Activity / VC Activity / VC Flutter Page Native Page Flutter Page Native Page
  • 73. Flutter ⻚页⾯面栈 Activity / VC Native Page Activity / VC Flutter Page Activity / VC Native Page Activity / VC Flutter Page
  • 74. Flutter 多引擎问题 Activity / VC Activity / VC Flutter View Activity / VC Activity / VC Flutter Engine Native Page Flutter View Flutter Engine Native Page IO UI GPU IO UI GPU
  • 75. Flutter Boost Activity / VC Activity / VC FlutterView FlutterView 复⽤用 复⽤用 Engine UI FlutterView 复⽤用 共享引擎 IO Activity / VC GPU
  • 76. Native Page Route Page Page Page ZanUrlRouter / Bifrost Flutter Boost Flutter Page Page Page Page
  • 77. 什什么是好的混编⽅方案 ？ 低成本接⼊入App ⾼高内聚低耦合的代码结构 ⾼高效的开发调试
  • 78. Flutter 构建产物 Native桥接库 Android 若⼲干aar 实现native与 Flutter 的对接逻辑 iOS .a & .framework Host App
  • 79. Maven / CocoPods Flutter 构建产物 Native桥接库 Android 若⼲干aar 实现native与 Flutter 的对接逻辑 iOS .a & .framework Host App
  • 80. Maven / CocoPods Maven / CocoPods Flutter 构建产物 Native桥接库 Android 若⼲干aar 实现native与 Flutter 的对接逻辑 iOS .a & .framework Host App
  • 81. Maven / CocoPods Maven / CocoPods Flutter 构建产物 Native桥接库 Android 若⼲干aar 实现native与 Flutter 的对接逻辑 iOS .a & .framework ⼯工程引⽤用 Host App
  • 82. 资源管理理 原有⽅方式资源⽂文件使⽤用繁琐 1. Yaml ⽂文件注册资源⽂文件 2. 代码使⽤用需要写全地址且没有代码补全 3. 资源⽂文件重命名或路路径变更更较麻烦
  • 83.
  • 84. 资源管理理
  • 85. Flutter 踩坑 • ⼯工程代码重置问题 • 打包缺少⽂文件问题 • setState刷新异常 • Flutter SDK 1.7.8 版本升级问题 • ·············
  • 86. Flutter 刷新异常 在state dispose后，element会和state断开相互 引⽤，如果在这个时候开发者去拿element的 位置信息或者调⽤setstate 刷新布局时就会报 异常。
  • 87. SDK升级1.7.8版本异常 原因: Flutter 1.7.8 加⼊UI 线程检测
  • 88. SDK升级1.7.8版本异常 解决办法: 所有Flutter项⽬以及插件与Native协议交互代码 都要检查确认是在UI线程执⾏
  • 89. Flutter 开发全流程 开发 基础插件控件 ⼯工程模板 资源管理理 构建发布 MBD 构建发布 托管 Youzan Pub 集成 数据监控 路路由管理理 异常上报 混编⽅方案 埋点监控
  • 90. 探索 实践 成果 规划
  • 91. Flutter ⻚页⾯面总计 Flutter ⻚页⾯面总计浏览量量 7 个 67500 次
  • 92. Flutter 线上⻚页⾯面
  • 93. Flutter 后续规划 • 稳定性保障（性能监控等） • 基础库的补充完善 • 动态化（动态配置等） • 更更多的线上实践应⽤用
  • 94. Flutter 路路由管理理 Weex 脚⼿手架 Flutter 效率提升 ZanWeex SDK Q & A Flutter 踩坑 Weex 构建平台 Weex 发布平台 Flutter 混编⽅方案