首页   

Shopify将应用迁移到React Native,跨平台代码达到86%,旧代码减少180万行

前端之巅  · 前端  · 3 月前

主要观点总结

本文介绍了Shopify将其移动应用迁移到React Native的经验和成果。文章涵盖了迁移过程中的代码增减、页面迁移、性能优化、应用稳定性提升等方面的内容。此外,Shopify还开源了一些项目并分享了他们的学习和观点。

关键观点总结

关键观点1: 应用迁移至React Native

Shopify将移动应用迁移到React Native,实现了代码共享、性能提升和稳定性增强。

关键观点2: 代码变动

迁移过程中增加了68.3万行新代码,删除了250万行旧代码,实现了超过180万行的净减少。

关键观点3: 性能优化

应用性能得到显著提升,包括屏幕加载时间缩短59%,应用启动速度提升44%,网页视图速度加快63%。

关键观点4: 应用稳定性提升

减少了每个应用版本约50万次的崩溃,提高了应用的稳定性,实现了超过99.9%的无崩溃用户会话。

关键观点5: 应用商店评分提升

迁移后的改进得到了用户的认可,Shopify的28天平均应用商店评分在iOS和Android平台上都有所提高。

关键观点6: 开源贡献

Shopify致力于开源贡献,开发并开源了Flashlist、React Native Skia和Tophat等项目,为社区做出了贡献。

关键观点7: 经验总结与学习

Shopify从迁移中学到了关于原生代码和原生开发的重要性、React Native的优缺点以及性能优化的重要性等经验和观点。


正文

作者丨 Mustafa Ali
译者丨明知山
策划丨 Tina

我们刚刚完成了将 Shopify 移动应用迁移到 React Native 的工作。这是我们最大的一个应用,开发至今已经超过十年的时间。以下是迁移过程。

我们增加了 68.3 万行新代码,同时删除了 250 万行旧代码,净减少 180 万行。我们将 586 个页面迁移到 React Native,并移除了 232 个过时的页面。

现在我们在 iOS 和 Android 平台之间共享的代码达到了 86%,而之前只有 5%。现在,在不同平台之间保持功能一致性不再是问题。

性能优化是我们关注的一个重要方面。我们将屏幕加载时间缩短了 59%,应用启动速度提升了 44%,网页视图速度也加快了 63%。

https://twitter.com/i/status/1695098627683721341

我们减少了每个应用版本约 50 万次的崩溃,显著提升了应用的稳定性,实现了超过 99.9% 的无崩溃用户会话。

我们的用户也注意到了这些改进。我们的 28 天平均应用商店评分在 iOS 上从 4.4 提高到了 4.8,在 Android 上从 4.1 提高到了 4.4。

苹果和谷歌也注意到了这些改进。在迁移过程中,我们的应用被特别推荐了 5 次。

https://x.com/mustafa01ali/status/1801721357111279991/video/1

我们致力于开源贡献,希望回馈社区。我们开发并开源了 Flashlist,它现已成为使用 React Native 构建高性能清单功能的标准方式。

https://twitter.com/i/status/1542542577953644544

我们与 @wcandillon 合作,促成了 React Native Skia 的诞生。这一创新将 Skia 图形库引入 React Native,使得实现高质量的 2D 图形绘制和动画成为可能。

我们为 @swmansion 在 Reanimated 项目上的工作提供赞助,这个项目让 React Native 能够提供高质量的动画效果。

https://twitter.com/i/status/1630590156255240193

我们开发并开源了 Tophat,用于实现构建的应用一键安装。

https://twitter.com/i/status/1825920486666084360

我们从迁移中学到的东西:

  1. 原生代码和原生开发至关重要。任何东西都无法替代通过构建高质量移动应用所积累的经验和独到的品味。

  2. 将 100% 使用 React Native 作为目标是不明智的。在任何情况下,只要原生是最适合实现功能的地方(小部件、Siri、手表应用等),或者在有高性能要求的地方,都应该使用原生。

  3. 获得良好的性能需要不断的努力,并且应该从一开始就将其作为一个优先事项。全面测量性能指标,并毫不留情地对每一层进行优化。引入自动化监控来捕捉性能回退。

总的来说,React Native 为 Shopify 带来了生产力的飞跃,同时使我们能够在适当的情况下继续使用原生技术的优势。我们对 React Native 的未来发展充满期待,并将继续与 Meta 和社区合作,让它变得更好。

原文链接:

https://threadreaderapp.com/thread/1853619638141071573.html

声明:本文由 InfoQ 翻译,未经许可禁止转载。

会议推荐

就在 12 月 13 日 -14 日,AICon 将汇聚 70+ 位 AI 及技术领域的专家,深入探讨大模型与推理、AI Agent、多模态、具身智能等前沿话题。此外,还有丰富的圆桌论坛、以及展区活动,满足你对大模型实践的好奇与想象。现在正值 9 折倒计时,名额有限,快扫码咨询了解详情,别错过这次绝佳的学习与交流机会!


© 2024 精读
删除内容请联系邮箱 2879853325@qq.com