智能体刷屏的背后,是 AI 应用拐点的来临?AICon 北京站议程重磅公布,50+ 硬核分享不容错过 了解详情
写点什么

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

  • 2024-11-15
    北京
  • 本文字数:1082 字

    阅读完需:约 4 分钟

大小:485.20K时长:02:45
Shopify将应用迁移到React Native,跨平台代码达到86%,旧代码减少180万行

我们刚刚完成了将 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 和社区合作,让它变得更好。

 

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

 

原文链接:https://threadreaderapp.com/thread/1853619638141071573.html

2024-11-15 08:009374

评论 1 条评论

发布
用户头像
近日(2018年06月20日),Airbnb(爱彼迎) 技术团队在 Medium 上宣布,放弃使用 React Native,将回归到使用基于原生技术的自有框架开发 App。

https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a
2024-11-15 11:43 · 北京
回复
没有更多了
发现更多内容

Netty源码解析 -- 对象池Recycler实现原理

binecy

Netty 对象存储 高性能

架构师训练营第九周课后练习

薛凯

五周 - 作业

水浴清风

一致性hash

Python进阶——如何正确使用魔法方法?(上)

Kaito

Python

架构师训练营 - 作业 - 第九周

Max2012

第九周作业

Meow

第五周学习总结

晴空万里

极客大学架构师训练营

文件上传踩坑记及文件清理原理探究

比伯

Java 大数据 编程 架构 计算机

第九周作业总结

Geek_ce484f

极客大学架构师训练营

极客时间架构 1 期:第 9 周 性能优化(三) - 命题作业

Null

一致性 hash 算法的实现

幸福小子

一致性Hash算法

架构师训练营 1 期 - 第九周作业(vaik)

行之

极客大学架构师训练营

架构师训练营 2 期 - 第5周命题作业

Geek_no_one

极客大学架构师训练营

训练营第五周作业

大脸猫

极客大学架构师训练营

第九周学习总结

orchid9

训练营第九周作业 2

仲夏

极客大学架构师训练营

一致性hash算法

落朽

架构师训练营

请简述 JVM 垃圾回收原理

orchid9

第九周学习总结

Meow

第九周作业

Geek_ce484f

极客大学架构师训练营

第五周 作业

Geek_9527

week5 作业二

Sean Chen

Snowpack - 更快的前端构建工具

曲迪

效率工具 大前端

数据库工程师整理最常见mysql面试题,每一道都是工作面试经典

小Q

MySQL 数据库 学习 架构 面试

第九周作业

solike

训练营第五周总结

大脸猫

极客大学架构师训练营

大数据和Hadoop平台介绍

MySQL从删库到跑路

大数据 hadoop

架构师训练营 1 期 - 第九周总结(vaik)

行之

极客大学架构师训练营

常见的负载均衡实现方案

幸福小子

负载均衡架构

极客时间架构 1 期:第 9 周 性能优化(三) - 学习总结

Null

Shopify将应用迁移到React Native,跨平台代码达到86%,旧代码减少180万行_架构/框架_Mustafa Ali_InfoQ精选文章
OSZAR »