《【于希哲】React Native 三端同构在雪球的实践.pdf》由会员分享,可在线阅读,更多相关《【于希哲】React Native 三端同构在雪球的实践.pdf(50页珍藏版)》请在三个皮匠报告上搜索。
1、R Re ea ac ct t N Na at ti iv ve e 三三端端同同构构在在雪雪球球的的实实践践于于希希哲哲雪球前端专家雪球前端专家10 年从业经验私募前端负责人多个等开源项目贡献者专注于多端同构、研发效能提升等于于希希哲哲contents效效果果 :R RN N 三三端端同同构构在在雪雪球球的的效效果果01落落地地:怎怎么么把把同同构构方方案案应应用用到到我我的的业业务务中中?04原原理理:R RN N 三三端端同同构构的的原原理理03优优势势:跟跟其其他他跨跨端端方方案案对对比比的的优优势势02展展望望:不不足足和和未未来来方方向向发发现现投投资资好好机机会会5700 万聪明
2、的投资者与雪球专业投研能力,帮用户发现投资好机会基基金金、私私募募、股股票票全全都都有有完整及独特的全品类市场标的,一站式满足用户的投资需求缓缓解解投投资资焦焦虑虑用户、主理人、专业机构、雪球团队,为你提供多元的陪伴体系安安全全、可可信信、低低费费率率证监会核准的持牌基金销售机构、银行全程资金监管多多端端同同构构的的趋趋势势私私域域开开发发现现状状需求1需求2需求3iOS 开发安卓开发私域 H5 开发全全球球趋趋势势COMPETITION IN THE MOBILE APPLICATION ECOSYSTEM美国商务部 移动应用生态中的竞争白皮书 2023 年 2 月“E En nc co o
3、u ur ra ag ge e t to oo ol ls s a an nd d s st ta an nd da ar rd ds s t to o i in nc cr re ea as se e i in nt te er ro op pe er ra ab bi il li it ty y a an nd d r re ed du uc ce e d de ev ve el lo op pe er r c co os st ts s.”R RN N 三三端端同同构构是是什什么么?有有哪哪些些能能力力?一一套套代代码码三三端端原原生生体体验验iOS/安卓/H5业务代码一致,原生体验 显
4、显著著改改善善开开发发体体验验将客户端开发门槛降低到 Web 开发实实现现三三端端通通用用组组件件库库告别三端组件的单独封装抹平三端差异iOS安卓HR RN N 三三端端同同构构在在雪雪球球的的实实践践应应用用雪雪球球基基金金业业务务页页面面 R RN N 三三端端同同构构 9 90 0%R RN N 三三端端同同构构在在雪雪球球应应用用的的例例子子私私募募基基金金商商品品页页页面复杂 20+复杂模块 6 个二级页工期紧张 同同构构效效果果:开发人效相比于传统开发 提提升升一一倍倍 以上APP 中 打打开开速速度度媲媲美美原原生生,支持线上热更新页面启动 P50 5 50 0ms P95 20
5、0ms带接口全加载完 4 40 00 0ms 以内三三端端一一致致性性展展示示微微信信内内H H5 5 跟app功能一样lighthouse跑分80,页面js R RN N 三三端端同同构构的的效效率率提提升升分分析析业务需求iOS 开发安卓开发H5 开发业务需求同构开发安卓开发 1 10 0 天开发+3 3 天联调ios 开发 1 10 0 天开发+3 3 天联调H5 开发 7 7 天开发 +2 2 天联调3 3 人 共 3 35 5 人天 岗位限制不能替换大前端开发8 8 天开发(同web开发)+2 2 天联调(调试方便)2 2 天适配(客户端 UI 微调)1 1 人 共 1 12 2 人
6、天三个岗位都能开发常常规规开开发发同同构构开开发发同同构构后后的的反反馈馈UI 样式写起来方便,调试也容易,跟 web 开发体验差不多使用同构,改动能马上看到效果。习惯后再用原生开发都觉得不方便了需求开发非常快,测试和后端有时跟不上我们的节奏之前需求排期的瓶颈都在大前端,如今好多了需求评审会不用拉一堆人了。业务流程,多端完全一致。还能不发版热更新组件封装很好推进,样式规范现在 RN 包几分钟就能打包完成,不用像之前客户端重新打包要等一个小时可以直接在微信中发给客户,在微信里完成基金交易全流程,页面内容跟 app 中一样丰富前前端端开开发发安安卓卓开开发发i iO OS S开开发发P PMMO
7、O产产品品经经理理设设计计师师测测试试运运营营contents优优势势:跟跟其其他他跨跨端端方方案案对对比比的的优优势势0 02 22.1 跨端方案对比2.2 同构方案优势2.3 与纯 RN 方案对比2.4 同构 UI 开发的优势2 2.1 1 跨跨端端方方案案对对比比效率、体验、成本、通用性上取得最大化的平衡2 2.2 2 R RN N 同同构构方方案案优优势势 -客客户户端端方方面面热热更更新新j js s 语语言言门门槛槛低低生生态态好好苹果 3.3.2 条款The o on nl ly y e ex xc ce ep pt ti io on n to the foregoing is
8、scripts and code downloaded and run by Apples built-in WWe eb bK Ki it t f fr ra amme ew wo or rk k o or r J Ja av va as sc cr ri ip pt tC Co or re e微微软软T Twwi it tt te er rS Sh ho op pi if fy yF Fa ac ce eb bo oo ok k5 58 8React Native for macOSReact Native WindowsReact Native WebReact Native SkiaR
9、eact VR(React Native)React NativeReact Native E2 2.2 2 R RN N 同同构构方方案案优优势势 -H H5 5 方方面面页面性能相比于纯 web 开发页面基本持平,在代码分割按需加载方面也没有劣势,不像 Flutter web 那样动辄几 MB 的 js 资源,完全可以在生产环境使用。支支持持拆拆包包、按按需需加加载载、各各种种浏浏览览器器插插件件私域侧重在手机中的 H5,对 js 包体积及 H5 性能更敏感 页页面面 j js s 资资源源l li ig gh ht th ho ou us se e 跑跑分分2 2.3 3 与与纯纯 R
10、RN N 开开发发对对比比 RN 开发痛点R RN N 开开发发调调试试不不方方便便 效效率率低低不不支支持持丰丰富富的的浏浏览览器器调调试试插插件件想看效果起码需要模拟器或者真机,成本高。RN 的样式开发、元素审查要一直盯着手机屏幕。RN 的配套工具远不如web端丰富。页面状状态态管管理理、网网络络请请求求查查看看、接接口口联联调调没有方便的官方工具,甚至没有最佳实践,大大部部分分是是通通过过打打 l lo og g。2 2.3 3 与与纯纯 R RN N 开开发发对对比比 -体体验验提提升升在实现 RN/H5 同构后,大幅改善了 RN 的开发体验用用浏浏览览器器开开发发 R RN N样样式
11、式初初步步chrome 选择 iphone se 宽度 375,可直接与设计稿 1:1 对照。页页面面状状态态数数据据查查看看可通过 React Devtool 查看页面内部 state、hooks、store 数据查看。接接口口调调试试直接在 chrome 网络调试 tab 进行接口联调开发,简单高效。2 2.4 4 前端 UI 样式开发的痛点要给每个元素想一个有意义的 classnamecss js 两个文件要来回切换css 样式需隔离css 样式冗余属性重复定义css 体积不断增大RN 跟 css 写法有差异,写不好容易崩溃RN 样式写法繁琐冗余每个元素都要重复设置日夜间主题颜色、布局方
12、式、文字大小、屏幕适配RN 双端样式有细微差异痛痛点点2 2.4 4 同同构构方方案案 U UI I 开开发发的的优优势势S St ty yl le ed d S Sy ys st te emm雪雪球球定定制制化化的的样样式式组组件件系系统统编程思路顺畅,无需绞尽脑汁给样式起名代码精简,减低 90%的样式代码量 实现 Design Token 自带主题切换、屏幕适配、三端差异编译出原子化 CSS,解决 CSS 历史问题contents原原理理:R RN N 三三端端同同构构的的方方案案及及原原理理0 03 33.1 同构方案3.2 React Native Web 原理3.3 Styled S
13、ystem 实现原理3.4 同构组件库实现原理3.5 同构的服务端渲染原理3 3.1 1 三三端端同同构构的的整整体体方方案案客客户户端端部部分分通过 React Native 生成双端代码,并为 App 提供动态化能力。同时借助 RN/H5 同构,改善 RN 开发方式,提高开发体验。H H5 5 部部分分通过 React Native Web 将 RN 代码编译为 H5,并实现服务端渲染,将雪球客户端里的 RN 功能和体验完整复刻同步到微信体系。S Sn no owwB Bo ox x 同同构构组组件件库库实现样式组件系统,封装组件,抹平三端差异3 3.2 2 同同构构原原理理 -R Re
14、ea ac ct t N Na at ti iv ve e WWe eb 3 3.2 2 R Re ea ac ct t N Na at ti iv ve e WWe eb b 实实现现原原理理样样式式系系统统手手势势系系统统组组件件映映射射原子化 CSS 7 年前已经在 React Native Web 中实现提供一层抽象,使得开发者可以使用 React Native 的组件模型和开发方式来构建 Web 应用通过统一的事件系统来处理用户输入和交互,开发者可以使用相同的手势系统将 React Native 的组件映射到对应的 Web 组件上3 3.2 2 R RN NWW 实实现现原原理理 -
15、样样式式系系统统 -原原子子化化 C CS SS S解决CSS样式冗余重复、样式无法隔离、无法按需加载等问题。客户端不支持 CSS,去除CSS后Web 能跟客户端样式代码完全一致,实现跨端组件封装。页面数量CSS 体积原子化函数,遍历样式对象的属性,根据属性和值生成唯一的类名,并将类名和对应的规则添加到compiledStyle 和 compiledRules 中。如果属性或值在缓存中已存在,则直接使用缓存的类名和规则。优优势势实实现现原原理理3 3.2 2 R RN NWW 实实现现原原理理 -样样式式系系统统 -原原子子化化 C CS SS SS St ty yl le eX XReact
16、 后续的样式处理方式重构后 413 kB-74 kB(包括深色模式)3 3.2 2 R RN NWW 实实现现原原理理 -组组件件映映射射V Vi ie eww C Co ommp po on ne en nt ts s R Re ea ac ct t N Na at ti iv ve eR Re ea ac ct t在 react native web 的处理中,react native 像是 react 的一个组件库所以能复用 react 前端生态T Te ex xt tI Imma ag ge es s C Co ommp po on ne en nt ts s基基础础组组件件组件映射处
17、理props属性转发3 3.3 3 S St ty yl le ed d S Sy ys st te emm 的的实实现现原原理理同同构构基基础础组组件件B Bo ox xComponentsT Tx xt t同构组件库React NativeReact Native WebiOSAndroidWebRN中间层三端B Bo ox x 盒盒子子组组件件实现样式属性简写,颜色系统,主题切换,屏幕大小自适应等T Tx xt t 文文字字组组件件 支持字号、字重、颜色、雪球常用 DIN 字体等,封装行内占位等3 3.3 3 S St ty yl le ed d S Sy ys st te emm 的的
18、实实现现原原理理 屏屏幕幕适适配配 i ip ph ho on ne e8 8i ip ph ho on ne e X Xr ri ip ph ho on ne e 8 8i ip ph ho on ne e 1 12 2i ip ph ho on ne e 1 13 3 P Pr ro o MMa ax x#3 3.4 4 同同构构组组件件库库及及实实现现原原理理代码 全全部部由由 T TS S 实实现现 告别多端单独封装除了在 RN 开发中使用外,同构组件库也可在纯前端 CRA、vite、next 等项目中使用,实现了真正意义上的跨端组件封装。样样式式组组件件系系统统 和和 5 50 0+
19、同同构构组组件件一套组件库,三端运行,抹平三端差异OS:iOS|android|windows|macos|web|node由 Metro 及 Next.js 打包工具实现代代码码区区分分文文件件区区分分3 3.4 4 同同构构组组件件库库及及实实现现原原理理import request from“JsBridge”.JsBridge index.native.js index.android.js index.ios.js index.web.js如何在组件库封装抹平三端的差异项项目目服服务务端端渲渲染染非非服服务务端端私募新商品页 li ig gh ht th ho ou us se e跑
20、跑分分l li ig gh ht th ho ou us se e跑跑分分对对比比3 3.5 5 同同构构的的服服务务端端渲渲染染3 3.5 5 同同构构的的服服务务端端渲渲染染原原理理容容器器封封装装服服务务端端样样式式提提取取服服务务端端屏屏幕幕适适配配变变量量封封装装RN 使用 A Ap pp pR Re eg gi is st tr ry y.g ge et tA Ap pp pl li ic ca at ti io on n g ge et tS St ty yl le eE El le emme en nt t 方法,获取页面所需style样式。输出到html里:在next.js中
21、设置 _document.web.tsx 中 getInitialProps React Native中D Di imme en ns si io on ns s.g ge et t(wwi in nd do oww).wwi id dt th h 获取宽度,动态计算大小。而在服务端渲染时失效。服务端渲染采取两种措施:1.rem+vw布局,替代RN中动态计算。2.默认375 比如SVGO OS S封封装装import O OS S from snowboxO OS S:ios|android|windows|macos|web|n no od de e WWi in nd do oww封封装装
22、window.location.hrefwindow.navigator.userAgent在node中会报错,RN中会白屏import WWi in nd do oww from snowbox;WWi in nd do oww.location.hrefWWi in nd do oww.navigator.userAgent服务端渲染改造contents落落地地:怎怎么么把把同同构构方方案案应应用用到到我我的的业业务务中中?0 04 44.1 项目结构4.2 开发流程4.3 定制同构组件库4.4 CI/CD 流程 4.5 开发、测试、上线流程4.6 监控报警4.7 同构迁移策略4 4.1
23、1 同同构构的的项项目目结结构构建建立立R RN N项项目目同同构构项项目目 pages demo components button.tsx modal.tsx index.tsx metro.config.js index.js babel.config.js rn_routers.json pages _app.web.tsx _document.web.tsx demo components button.tsx modal.tsx index.tsx index.web.tsx metro.config.js index.js babel.config.js rn_routers.j
24、son server.js next.config.jsi in nd de ex x.wwe eb b.t ts sx x项项目目结结构构 -开发流程-同构组件库-CICD-测试上线流程-监控报警-迁移策略4 4.1 1 同同构构的的路路由由设设计计每个 RN 页面有一个 URL 路由。同构 H5 跟 RN 的路由注册保持一致,实现同一 URL 在客户端内能打开 RN 页面,在微信中打开 H5,方便运营配置。这样做还有一个优势,H5 还会为客户端 RN 页做兜底,比如 RN 未覆盖到的低版本客户端或者 RN 包出问题时,点击 URL 会打开对应的同构 H5 页面做降级。同时建议支持通过配置控
25、制 RN、H5、原生的优先级逻辑。h ht tt tp ps s:/x xu ue eq qi iu u.c co omm/r rn n雪雪球球客客户户端端微微信信、wwe eb bR RN N页页面面同同构构的的 H H5 5 页页面面项项目目结结构构 -开发流程-同构组件库-CICD-测试上线流程-监控报警-迁移策略4 4.2 2 同同构构的的开开发发流流程程2 2.同同时时连连接接三三端端U UI I微微调调1 1.在在浏浏览览器器初初步步开开发发样式初步页面状态数据调试接口调试项目结构-开开发发流流程程 -同构组件库-CICD-测试上线流程-监控报警-迁移策略同时连接 web andr
26、oid iOS一次改动三端同步热更新进行三端 UI 微调4 4.3 3 定定制制同同构构组组件件库库建议开发定制化的同构组件库实现样式组件系统,封装三端差异,提高开发效率,规范UI组件封装可参考 雪球s sn no ow wb bo ox x.j js s.o or rg g后续也会开源项目结构-开发流程-同同构构组组件件库库 -CICD-测试上线流程-监控报警-迁移策略4 4.4 4 同同构构的的 C CI I雪球三端同构的 CI 由 Gitlab CI 实现,包含 commit 校验、代码 lint 校验、单元测试、RN 打包上传等等。项目结构-开发流程-同构组件库-C CI IC CD
27、D-测试上线流程-监控报警-迁移策略4 4.4 4 同同构构的的 C CI I -单单元元测测试试组组件件库库测测试试工工具具及及类类库库React NativeJest react-test-rendererReact Native ElementsJest React Native Testing LibraryTamaguiJestNativeBaseJest jest-expoJest+React Native Testing Library:测试库(基于 react-test-renderer 和 React Testing Library)优优点点 允许测试常规 React Nat
28、ive 程序的大部分逻辑 允许在 Jest 或其他测试运行器支持的任何操作系统上运行测试,比如 CI 使用的资源比完整的运行时模拟器少得多 可以使用 Jest 模拟计时器选选用用方方案案因为涉及到客户端,所以同构代码的测试与以往前端测试有所不同项目结构-开发流程-同构组件库-C CI IC CD D-测试上线流程-监控报警-迁移策略4 4.4 4 同同构构的的 C CD D端端侧侧 R RN N 发发布布&下下发发采用 Gitlab CI+自研 mPaaS 实现WWe eb b 服服务务编编译译&部部署署采用 Drone CI+自研 Rolling Docker 部署一套代码库,多端部署所有
29、feature 分支 PR 合并后自动 CI 触发打 RN 包由自研 mPaaS 实现 RN 发布客户端版本控制、多阶段控制、代码上传、分包下发等功能由 sit、sep、staging、prod 四个特定分支来承载 Web 服务的分环境部署。PR 合并后触发 Drone CI 的 Docker 镜像构建,随后通过 Rolling Docker 部署前端 node 服务项目结构-开发流程-同构组件库-C CI IC CD D-测试上线流程-监控报警-迁移策略4 4.5 5 业业务务开开发发测测试试上上线线流流程程上上线线非非常常灵灵活活,可可以以先先发发布布 R RN N,也也可可以以先先发发布
30、布 H H5 5项目结构-开发流程-同构组件库-CICD-测测试试上上线线流流程程 -监控报警-迁移策略4 4.6 6 同同构构的的监监控控报报警警E ES S 监监控控A AP PMMS Se en nt tr ry y报报警警包下载、安装、启动统计监控链路监控报错&性能监控监控报警 报错报警业务转化率报警项目结构-开发流程-同构组件库-CICD-测试上线流程-监监控控报报警警 -迁移策略4 4.7 7 同同构构后后的的页页面面迁迁移移策策略略如何进行页面迁移呢?为了避免风险、规范流程、提高效率,需要一个完整的迁移计划方案,从页面选型、迁移策略、迁移流程机制等多方位系统性地保障跨端技术迁移的
31、有效平稳落地。迁迁移移策策略略迁迁移移流流程程机机制制旧页面 从从易易到到难难 迁移,分四个角度技技术术实实现现 业业务务类类型型页页面面交交互互业业务务链链路路从H5开始到原生从相对独立的业务到复杂业务从展示类页面到交易类页面从弱交互到强交互页面页页面面选选型型新页面推荐用同构开发,强交互的才用原生开发项目结构-开发流程-同构组件库-CICD-测试上线流程-监控报警-迁迁移移策策略略contents展展望望:不不足足与与未未来来方方向向?0 05 55.1 同构方案的不足5.2 React Native 发展5.3 同构小程序5.4 同构的D2C代码智能生成5.5 基于大模型的同构助手5 5
32、.1 1 同同构构方方案案的的不不足足技技术术栈栈业业务务场场景景生生态态适合以 React技术栈为主的公司资源需求:有些底层功能需要客户端开发资源的支持适合需要三端一致的适合以 App 为主的,需要同步到微信私域的业务场景抛弃了 CSS不支持常规 UI 库同构组件库较少,snowbox 在开源准备中5 5.2 2 R Re ea ac ct t N Na at ti iv ve e 发发展展微微软软T Twwi it tt te er rReact Native for macOSS Sh ho op pi if fy yReact Native WindowsReact Native We
33、bReact Native SkiaR Re ea ac ct t V VR R (R Re ea ac ct t N Na at ti iv ve e)React NativeF Fa ac ce eb bo oo ok k5 58 8React Native E5 5.3 3 同同构构小小程程序序s sn no owwb bo ox x 组组件件库库 +小小程程序序 R Re ea ac ct t 中中间间层层引入小程序React中间层框架 Taro/remax/kbone/alita/自研 实现小程序版的样式组件系统 styled system snowbox同构组件适配小程序React
34、中间层 Taro-snowbox 基于snowbox同构组件的业务代码能四端同构同构生成小程序代码,实现四端同构5 5.4 4 同同构构的的 D D2 2C C 智智能能生生成成2 20 01 17 7 年年Pix2Code 论文 提出根据图像生成代码2 20 01 18 8 年年微软 AI Lab 开源了草图转代码 工具 Sketch2Code2 20 01 19 9 年年阿里发布 imgcook 在双 11 大促中自动生成了 79.34%的前端代码2 20 02 21 1 年年京东 Deco、codefun、58 Picasso、DhiWise等设计稿转代码相继推出2 20 02 23 3
35、 年年chatGPT 4.0 展示草图转代码目目前前 D D2 2C C 大大部部分分是是应应用用于于 H H5 5,如如果果能能和和同同构构结结合合,将将会会创创造造出出更更高高的的价价值值。同同构构组组件件对对 U UI I 进进行行了了高高度度的的抽抽象象,有有助助于于 D D2 2C C 代代码码智智能能生生成成的的实实现现,同同构构生生成成三三端端。5 5.5 5 基基于于大大模模型型的的同同构构助助手手让 ChatGPT 等大模型掌握同构写法和同构组件库总总结结0 01 10 02 20 03 30 04 40 05 5效果:RN三端同构在雪球的效果优势:跟其他跨端方案对比优势原理:RN三端同构的原理落地:怎么把同构方案应用到我的业务中展望:不足和未来方向T TH HA AN NK KS S