【于希哲】React Native 三端同构在雪球的实践.pdf

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