专栏名称: 前端之巅
InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。
目录
相关文章推荐
前端早读课  ·  【早阅】始终将你的估算值乘以π ·  22 小时前  
前端大全  ·  10年了,开发人员仍然不明白 ... ·  昨天  
前端早读课  ·  【第3455期】快手主站前端工程化探索:Gu ... ·  昨天  
歸藏的AI工具箱  ·  终于有给设计师用的 Cursor 了 ·  2 天前  
歸藏的AI工具箱  ·  终于有给设计师用的 Cursor 了 ·  2 天前  
前端早读课  ·  【第3454期】如何用语音学习编程的 ·  2 天前  
51好读  ›  专栏  ›  前端之巅

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

前端之巅  · 公众号  · 前端  · 2024-11-13 15:00

主要观点总结

本文介绍了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、手表应用等),或者在有高性能要求的地方,都应该使用原生。







请到「今天看啥」查看全文