Shopify 的 React Native 五年历程

124 阅读11分钟

原文链接: shopify.engineering/five-years-…

五年前,我们宣布 React Native(RN)将成为 Shopify 移动开发的未来。今天,我们很高兴与大家分享我们所取得的进展、学到的经验以及对未来的展望。

回顾一下,我们决定转向 RN 主要基于以下三个原因:

  1. 一次编写,多处运行 —— 不再需要为 iOS 和 Android 分别开发相同的功能。
  2. 人才通用性 —— 让开发者能够流畅地在 iOS、Android 和 Web 平台上工作。
  3. 交付更多价值 —— 将更多时间用于为用户提供价值,而不是追求功能的一致性。

我们很高兴地分享,这次转型非常成功:

  • 无需为两个平台分别构建相同的功能,这使我们的生产力实现了质的飞跃。
  • 工程师能够在 Web 和移动端之间无缝切换,使团队在人员不变的情况下完成更多工作,并解锁了新的增长机会。
  • 维护 iOS 和 Android 之间的功能一致性不再是问题,从而释放了更多能力来交付更多价值。
  • 我们的应用运行速度极快(屏幕加载时间 <500 毫秒)且非常稳定(>99.9% 的无崩溃会话)。
  • 我们会在合适的场景采用原生开发,从而实现两者的最优组合。

在过去的五年中,我们已经将所有应用迁移到了 React Native。但我们没有采用一刀切的方式,而是让每个团队自行决定何时以及如何迁移他们的应用。这使得他们能够在继续发布新功能的同时,仍然能与我们拥抱 RN 的战略保持一致。

image.png

我们学到了什么?

React Native 应用可以很快

在 Shopify,我们对性能非常重视。正如我们的 CEO Tobi Lutke 所说:“并非所有快速的软件都是优秀的,但所有优秀的软件都很快。” 在转向 RN 之前,我们最大的疑问是能否满足我们的性能目标,这也是我们迟迟没有转向 RN 的主要原因。

在做出决定之前,我们进行了大量的原型设计,结果令人非常满意。我们还看到 Meta 在消除性能瓶颈方面所做的努力,并确定了像列表这样的领域,我们可以提供支持。我们预测 RN 会变得更高效,于是全力以赴。

五年过去了,采用 RN 构建的应用,性能确实很好。我们在 Shopify 应用中实现了低于 500 毫秒(P75)的屏幕加载时间,你可以在这里这里这里了解我们是如何做到的。我们在所有应用中实现了类似的性能。就像原生开发一样,你必须应用良好的模式和技术来消除性能瓶颈。

在多年使用原生和 React Native 构建大规模移动应用后,我们发现原生并不天生意味着快,而 React Native 也不天生意味着慢。RN 在过去几年中取得了很大进步,你现在可以用它构建世界级的应用。

我们预计,随着框架的成熟和团队积累更多专业知识,构建快速应用会变得更加容易。我们将继续与社区分享我们的经验。

热重载非常棒

RN 的即时反映更改的能力彻底改变了游戏规则。这是我们在原生开发中最大的痛点之一。考虑到代码库的规模,即使是最小的更改也需要几分钟才能在模拟器或物理设备上编译和运行。这浪费了时间并打断了开发流程。React Native 的热重载完全消除了这个问题。

image.png

TypeScript 解锁了人才通用性

TypeScript 已经无处不在,我们在开发者从 React Web 转向 React Native 方面取得了巨大成功。与原生 iOS 和 Android 开发相比,Web 开发者发现使用 RN 开始移动开发要容易得多。同样,熟悉 RN 的移动开发者也能轻松上手 Web 开发。

这种灵活性不仅为工程师打开了更多成长机会,还增加了人员配置的灵活性,使团队能够在相同数量的开发者下完成更多工作。它还开启了在 Web 和移动端之间共享代码的新机会,从而创造更多杠杆效应。

拥有能够跨多个平台工作的开发者非常有价值。它使我们能够更快地交付产品,并让开发者能够将好的想法从一种技术以新颖的方式应用到另一种技术中。它还创造了一种将技术视为工具箱中工具的文化,拓宽了团队的视野,并鼓励使用最适合的工具,而不是你最熟悉的工具。

原生开发者至关重要

专注于 iOS 和 Android 的移动工程师对于构建优秀的移动应用至关重要。无法替代的是从构建许多移动产品中获得的经验和品味,以及对惯例和可用性的深刻理解。能够深入到平台层、编写绑定、掌握构建与发布、分发等都需要原生专业知识。

他们在优化应用性能方面也发挥着至关重要的作用,确保所有用户都能获得一致的用户体验。此外,原生专业知识对于管理 React Native 版本更新以及采用新功能、API 和伴随新 iOS 和 Android 版本发布的工具变化至关重要。没有这些专家,你无法构建出优秀的产品。

我们通过一个自助课程培训了我们的原生移动开发者,涵盖了他们需要了解的所有内容以交付生产就绪的代码。此外,我们为已经精通 React Native 的开发者设置了办公时间,通过问答环节、结对编程和代码审查提供支持。

我们还为移动团队补充了一些 Web 开发者,以利用他们的 JavaScript、TypeScript 和 React 专业知识。这确保我们在原生和 React Native 方面都有强大的专业知识,随着时间的推移,整个团队的水平得到了提升。

根据我们的经验,拥有良好的原生和 Web 开发者组合是使用 React Native 构建优秀移动应用的关键。

原生代码至关重要

100% 使用 React Native 应该是一个反目标。它非常适合一次性构建功能,但并不适合所有场景。

原生仍然是构建利用设备硬件的尖端功能(如 2D / 3D 扫描和在设备上运行 AI 模型)的最佳方式。它也更适合构建具有内存限制的功能,如主屏幕和锁屏小部件、Apple Watch 应用和复杂功能、App Intents 和 Siri 快捷方式。

原生也是长时间后台任务的更好选择。例如,我们的 Point of Sale 应用在后台下载和同步大量数据,以便在离线时也能处理交易。通过利用原生代码,我们能够完全将这些工作卸载到后台,确保对应用性能没有影响。这得益于 RN 提供的强大互操作性。

与其思考是原生还是 React Native,不如思考原生和 React Native 的结合。

我们发现,通过使用 RN 一次性构建大多数功能,然后在适合的地方利用原生代码,可以节省大量时间。这也是为什么团队中拥有原生专业知识至关重要。

调试体验较差

React Native 的调试体验不稳定,在 VSCode 中正确配置它需要一些工作。相比之下,iOS 和 Android 具有强大的调试功能,开箱即用。Meta 最近对 React Native 的调试器堆栈进行了全面重写,看起来很有希望。我们正在与他们合作,使其达到世界级水平。

React Native 更新并不无缝

将应用更新到每个新版本的 React Native 需要大量工作,通常需要重构代码库。我们通过让一小部分轮换的开发者处理这个问题来缓解这一情况,而其他团队则专注于功能开发。

我们预计随着框架的成熟和新架构的广泛采用,这会变得更容易。

更多依赖第三方库

与原生相比,React Native 框架并不那么全面,因此你最终不得不使用更多的第三方库。近年来,生态系统已经成熟,很容易找到维护良好的库来满足你的需求。

然而,这增加了持续更新它们的开销,并增加了供应链攻击的风险。我们通过使用 Dependabot 实现自动依赖更新和自动代码扫描来捕获恶意代码来缓解这一问题。

我们希望看到框架变得更加有主见,并提供更多开箱即用的功能。

共享基础带来了巨大的杠杆效应

当我们刚开始采用 React Native 时,我们没有像原生开发那样多年使用 RN 构建移动应用的经验。我们也不能利用多年来构建的共享原生基础,因此每个团队都以自己的方式构建东西。

当时也不值得投资创建这些共享基础,因为我们仍在学习如何使用 RN 构建应用。我们再次成为初学者,必须首先投入时间和精力来发展专业知识。

这种方法非常适合快速启动并迁移我们的应用,但也导致团队多次解决相同的问题,重复造轮子。这是一个有意识的权衡——我们优化了速度而不是一致性。

到 2023 年底,我们所有的应用都已经足够成熟,可以开始使它们保持一致。我们随后开始将身份验证、实时监控、性能测量等常见组件提取到共享库中,供所有应用使用。

这使得团队能够避免解决公司其他部分已经解决的问题。它还传播了知识和专业知识,每个应用都会自动受益于对这些共享组件的改进。

我们将在 2025 年继续这项工作,以进一步增加我们在应用之间共享的代码量,因为它为我们提供了巨大的杠杆作用,并释放了工程带宽,可以用于为用户交付更多价值。

React Native 的未来

React Native 的未来是光明的,我们认为 Meta 一直是这个项目的优秀管理者。我们看到每个版本都有定期的改进,路线图深受开发者反馈的影响。我们预计构建快速应用会继续变得更容易。我们也对新架构感到兴奋,并致力于在我们的应用中采用它。

社区也在蓬勃发展,微软、亚马逊、特斯拉、SpaceX 和 Coinbase 等多家公司都在使用 React Native,开发者们也在发布高质量的第三方库和框架。

在 Shopify,我们相信构建软件是一项团队运动,并致力于开放网络、开源和开放标准。我们通过以下方式实现这一目标:

  • 向 React Native 贡献代码
  • 担任 RN 发布的联合发布负责人
  • 赞助具有高度影响力的开源项目,如 React Native Skia 和 Reanimated
  • 发布开源项目,如 Flashlist、Restyle 和 Tophat

此外,在 2025 年,我们将重新启动 React Native 工作组。这将汇集支持 RN 的高级领导者,以识别生态系统中的关键挑战,优先投资,增加协作,并减少重复工作。之前的成员包括 Meta、Twitter、Coinbase 和微软等公司。如果你有兴趣加入这一努力,请联系我们!

React Native 在过去五年中取得了长足进步,许多导致人们不采用它的限制已经不复存在。如果你有一段时间没有尝试使用 RN,现在是重新审视它的好时机。我们将继续与 Meta 和社区的其他成员合作,使其变得更好。