有赞移动跨平台框架实践

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 混编⽅方案