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

图片

作者丨 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 翻译,未经许可禁止转载。