REACT NATIVE大型项目通用化架构

2020-02-27 221浏览

  • 1.┓ REACT NATIVE大型项目通用化架构 莫卓颖 腾讯高级前端工程师
  • 2.跨平台 高性能 支持IOS、Android、浏览器 首屏、首次交互时间 高效率开发 动态更新 组件生态、开发体系 支持版本动态更新
  • 3. 方案比较 Flutter React Native Weex 组件生态 26 11856 458 动态更新 Android支持 均支持 均支持 同构 两端同构 两端同构 三端同构 开发框架 Dart React Vue 安装包体积 较大 较小 较小 性能 较好 一般 一般
  • 4.维护多套代码 学习成本 介于Native与H5之间的性能 开发体验 异常概率更高
  • 5.章节 Part 01 强同构体系
  • 6. 优势 • 效率以及维护成本 • 产品多平台推广 • 容灾互备 H5 isomorphic react native
  • 7.方案1：构建跨两个平台的抽象层 抽象一套统一的开发方式 抽象层 已有方案：Microsoft/reactxp X 业务需要完全重构，再增加额外学习成本 H5 RN 方案2：由React Native向H5转换 一套RN代码，部署两个场景 已有方案：taobaofed/react-web， necolas/react-native-web X 对新业务适用，不适用已有业务 H5 RN
  • 8.方案：由H5向React Native转换 一套H5代码，经过自动化构建和简单修改，实现到RN的强同构转换 H5 编译 1. 基于现有H5业务改造，符合团队业务情况 优势 2. 无需太多RN相关知识储备，H5即可开发 3. 旧页面迁移成本小 简单修改 RN
  • 9.
  • 10.babel-plugin-style babel-plugin-classname babel-plugin-html … 编译 + Runtime H5 RN
  • 11. 浏览器环境模拟
  • 12.window对象重置 document对象重置 XHR对象重置 。。。
  • 13.babel-plugin-js-global-variable-repace require(“window”).location ...
  • 14.
  • 15. 同构接入 • 同构组件 1) 基础同构 • 浏览器环境初始化 1) cookie，useragent等传递 • 同构组件 1) flatlist,scrollview等
  • 16.章节 Part 02 性能优化
  • 17.3200 2,119 2,044 平均耗时(ms) 2400 1600 800 1,215 535 1,211 405 0 Android Native iOS React Native H5 问题 处于Native与h5之间的性能
  • 18.获取数据 27% jsBudle加载+require init • 减少jsBundle体积 • lazyload js module • 离线包 39% • tcp替换http • 数据本地缓存 • 并行加载 23% 11% native 初始化 • 懒加载native module 渲染上屏幕 • 渲染区分优先级
  • 19.传统方式 单例方式
  • 20.
  • 21. 离线包 • 作资源离线化，解决断网或者网络条件不好情况界面无法展现或者慢 • 三种不同功能的离线包，分别为安装离线包、线上离线包、推送离线包
  • 22.CGI串行等待时 间 传统方式： CGI预加载方式： 将CGI请求时机提前到客户端并行
  • 23.问题1 问题2 JS Ready早于客户端数据请求? • 非等待，继续发送cgi请求 • Data = Promise.race(cgi, 客户端请求) 客户端如何知道请求什么CGI？ • 统一请求代理服务器 • 服务端配置各业务cgi • 从url或cookie中解析参数值
  • 24.1.2s 1.1s 安卓优化了46%! 0.65s iOS优化了55%! 0.5s
  • 25.章节 Part 03 监控体系
  • 26. 前端错误日志上报系统 • 实时上报错误脚本异常日志 • 错误堆栈展示 • 错误脚本量异常智能告警
  • 27. 错误日志上报系统 • IOS错误日志上报 • Android错误上报 • 错误脚本量常智能告警
  • 28. 容灾策略 • 不兼容版本自动切换H5 • crash自动切换H5 • url指定切换
  • 29.END 感谢您的聆听. -莫卓颖