写点什么

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:009344

评论 1 条评论

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

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

字节跳动面试:对于Tersorflow你怎么理解的,有做过人工智能的应用吗

android 程序员 移动开发

安卓11来了,快!扶我起来,音视频开发书籍

android 程序员 移动开发

安卓屏幕完美适配方案,组件化与插件化的差别在哪里

android 程序员 移动开发

客2消,客1消,客0消,android热修复视频

android 程序员 移动开发

如何教女友学编程?你先去洗澡,我构思一下,androidapp开发语言

android 程序员 移动开发

字节跳动测试开发1,android小游戏开发

android 程序员 移动开发

如果你使用Jetpack中还没踩过这些坑,请务必收下这篇文章

android 程序员 移动开发

字节跳动1面Too simple2面怀疑人生,宅家修炼“65天,flutter下拉列表

android 程序员 移动开发

字节跳动大神讲座:我们除了技术一无所有,2020Android程序员职业规划

android 程序员 移动开发

安卓-如何用正确的姿势监听Android屏幕旋转,flutter修改textfield内容

android 程序员 移动开发

实战|Android后台启动Activity实践之路续,2021年Android者未来的出路在哪里

android 程序员 移动开发

如何才能更容易拿到大厂Offer?阿里大佬十年面试了-2000-人,总结了这7-条---

android 程序员 移动开发

如何自学Android gityuan ?,2021年互联网大厂Android面经总结

android 程序员 移动开发

学习Flutter,你需要了解的Dart 编码规范,sharedpreferences用法

android 程序员 移动开发

安卓指纹对称加密及登录功能的实现,android面试简历

android 程序员 移动开发

如果你是小白,想学Android;如果你是Android开发者,安卓开发快速上手

android 程序员 移动开发

妙用AccessibilityService黑科技实现微信自动加好友拉人进群聊

android 程序员 移动开发

实践App内存优化:如何有序地做内存分析与优化,flutter免费视频教程

android 程序员 移动开发

字节跳动+京东+360,帮助程序员提高核心竞争力的30条建议

程序员 移动开发

官方推荐Flow,LiveData:那我走,绝对干货

android 程序员 移动开发

字节+谷歌超全Kotlin学习王炸笔记!Kotlin入门到精通,我的头条面试经历分享

android 程序员 移动开发

字节Android岗面试:Handler中有Loop死循环,为什么没有阻塞主线程

android 程序员 移动开发

字节跳动抖音安卓客户端日常实习 3+1 面经(已 OC,贼厉害

android 程序员 移动开发

字节跳动面试,第三面挂了,这原因我服了,程序员进阶知识点

android 程序员 移动开发

字节跳动高工面试-Android-R如何访问文件、修改文件?你们对R适配了吗

android 程序员 移动开发

字节跳动:必面题说一下Android消息机制,重要概念一网打尽

android 程序员 移动开发

如何将项目提交到GitHub,mmkv如何保证进程安全

android 程序员 移动开发

王者荣耀商城异地多活架构设计

Imaginary

字节跳动已经10万人了?渣本双非Android程序员怎么上车?

android 程序员 移动开发

架构实战营作业 -- 模块七

冬瓜茶

如何正确的在 Android 上使用协程 ?,kotlin数组全排列

android 程序员 移动开发

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