本文介绍了Shopify将其移动应用迁移到React Native的经验和成果。文章涵盖了迁移过程中的代码增减、页面迁移、性能优化、应用稳定性提升等方面的内容。此外,Shopify还开源了一些项目并分享了他们的学习和观点。
应用性能得到显著提升,包括屏幕加载时间缩短59%,应用启动速度提升44%,网页视图速度加快63%。
迁移后的改进得到了用户的认可,Shopify的28天平均应用商店评分在iOS和Android平台上都有所提高。
Shopify致力于开源贡献,开发并开源了Flashlist、React Native Skia和Tophat等项目,为社区做出了贡献。
Shopify从迁移中学到了关于原生代码和原生开发的重要性、React Native的优缺点以及性能优化的重要性等经验和观点。
我们刚刚完成了将 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
我们从迁移中学到的东西:
-
原生代码和原生开发至关重要。任何东西都无法替代通过构建高质量移动应用所积累的经验和独到的品味。
-
将 100% 使用 React Native 作为目标是不明智的。在任何情况下,只要原生是最适合实现功能的地方(小部件、Siri、手表应用等),或者在有高性能要求的地方,都应该使用原生。