原文链接：shopify.engineering/react-nativ… 作者：Farhan Thawar

经过多年的本地移动开发，我们决定全力以赴使用React Native构建我们所有的新移动应用。正如我将解释的那样，这个决定不会轻易做出。

每个季度，大多数买家都在手机上购买（去年第三季度，我们71%的买家在手机上购买）。黑色星期五和网络星期一（合在一起，BFCM）是我们商家一年中最繁忙的时候，这两天的购买活动是一个风向标。在今年的BFCM，Shopify商家在手机上的购买量又增加了3%，平均占销售额的69%。

那么为什么要切换到React Native呢？为什么是现在？这与我们的本土移动开发有什么关系？这是一个复杂的答案，最好有一点背景。

移动在Shopify Pre-2019

我们在Shopify有一种工程文化，即进行特定的早期技术押注，帮助我们快速前进。

总的来说，我们更希望很少有技术作为工程的基础。这为我们提供了多个杠杆点：

• 我们在一小部分深度技术中建立了非常具体的专业知识（我们经常成为核心贡献者）

• 每种技术选择都有怪癖，但我们密切了解它们

• 最初团队之外的人贡献、传输和维护其他人编写的代码

• 新的人加入得更快。

与此同时，总有新技术出现，为我们提供了生产力或能力逐步变化的机会。我们做了很多实验，寻找机会来释放一个数量级的改进——但最终，我们很少在核心工程中采用这些改进。

当我们采用这些早期的语言或框架时，我们做了一个经过计算的赌注。我们没有回避风险，而是根据我们独特的条件仔细研究、探索和评估这些风险。正如通常在风险领域一样，未开发的机会是隐藏的。相反，我们考虑如何降低风险：

• 如果一项技术不再得到核心团队的支持呢？

• 如果我们遇到无法修复的错误怎么办？

• 如果产品走向违背我们利益的方向呢？

当Tobi（我们的首席执行官）在2004年作为核心贡献者首次参与时，Ruby on Rails是一个新生而晦涩的框架。多年来，Ruby on Rails一直被视为一种不严肃、不高性能的语言选择。但是早期的赌注给了Shopify超越竞争对手的动力，尽管它不是一个受欢迎的技术选择。通过使用Ruby on Rails，该团队能够更快地构建，并通过使用比传统编程语言和框架更现代、抽象级别更高的东西来吸引不同的人才。Paul Graham谈到了他决定使用Lisp来构建Viaweb的类似效果，今天10家最有价值的Y组合公司中有6家都使用Ruby on Rails（尽管它仍然在很大程度上不受欢迎）。相比之下，十大最有价值的Y组合公司中没有一家使用Java；主要被认为是经过战斗考验的企业语言。

同样，两年前，Shopify决定跳转到谷歌云。对于2019年美国第三大零售电子商务网站来说，这又是一个可怕的提议——从我们自己的数据中心进行云迁移，但也要选择一个早期的云竞争者。我们看到价值创造的技术弧线促使我们专注于自己擅长的事情——支持创业精神，让其他人（在这种情况下是谷歌云）专注于维护物理硬件、电力、安全、操作系统更新等无差别的繁重工作。

什么是React Native？

2015年，Facebook宣布并开源了React Native；它已经在内部用于他们的移动工程。React Native是一个使用React构建本机移动应用的框架。这意味着您可以使用一流的JavaScript库（React）来构建本机移动用户界面。

在Shopify，这个想法当时有怀疑者（现在仍然有），但许多人看到了它的希望。在公司接下来的黑客日活动中，整个公司都花时间在React Native上。虽然早期团队看到了许多好处，但他们认为我们不能在2015年推出一款我们会为使用React Native而自豪的应用。在很大程度上，这与性能和缺乏一流的安卓支持有关。我们学到的是，我们喜欢反应式编程模型和GraphQL。此外，在使用React Native后，我们为iOS构建并开源了一个功能渲染器。我们在2015年为我们的本地移动堆栈采用了这些技术，但没有为整个移动开发采用React Native。《环球邮报》在一篇关于我们第一版移动应用的综合报道中记录了我们的愿望。

到目前为止，Shopify所有移动开发的标准都是本地移动开发。我们建立了专注于iOS和安卓的移动工具和基础团队，帮助加快我们的开发工作。虽然这些团队和由此产生的应用程序都很成功，但人们怀疑，如果我们能够：

• 将JavaScript和web的力量带到移动端

• 在所有客户端应用程序中采用反应式编程模型

• 将我们的iOS和Android开发整合到一个堆栈中。

React Native如何工作

React Native提供了一种使用JavaScript构建本机跨平台移动应用的方法。React Native类似于React，因为它允许开发人员在JavaScript中创建声明性用户界面，为此它在内部创建UI元素的层次树，或者用React术语来说，创建虚拟DOM。React JS的输出以浏览器为目标，而React Native使用与JavaScript中的应用程序逻辑接口的平台本机绑定将虚拟DOM转换为移动本机视图。就我们而言，目标平台是安卓和iOS，但社区驱动的努力已经将React Native带到了其他平台，如视窗、苹果电脑操作系统和苹果电视操作系统。

React JS针对浏览器，而React Native可以针对移动API。

什么时候我们不会默认使用React Native？

有些情况下，React Native不是在Shopify上构建移动应用的默认选项。例如，如果我们有以下要求：

• 部署在旧硬件上（CPU<1.5GHz）

• 粗加工

• 超高性能

• 许多后台线程。

提醒：包括许多开源SDK在内的低级库将保持纯本机。当我们需要靠近金属时，我们总是可以创建自己的本地模块。

为什么现在移动到反应本地？

现在是采取这一立场的好时机，主要有三个原因：

1. 我们从2018年收购Ticail（一家100%专注于React Native的移动第一公司）中了解到React Native已经走了多远，并在2019年进行了3次深度产品投资

2. Shopify在网络上广泛使用React，该技术现在可以转移到手机上

3. 我们看到性能曲线向上弯曲（想想现在谷歌文档和桌面微软办公室有什么可能），我们可以像在Ruby、Rails、Kubernetes和Rich Media一样长期投资React Native。

2019年Shopify的手机

我们在Shopify有许多移动界面，供买家和商家通过网络和我们的移动应用程序进行互动。在过去的一年里，我们花了一些时间在三个应用程序上与三个独立的团队一起尝试React Native： Arrive，Point of Sale和Compass。

从我们的实验中我们了解到：

• 在React Native中重写Arrive应用程序时，该团队认为它们的效率是使用本地开发的两倍——即使只是在一个移动平台上

• 在Android硬件的低功耗配置上测试我们的销售点应用程序，让我们设置比以前想象的更低的CPU阈值（1.5GHz vs.2GHz）

• 我们估计iOS和安卓之间约有80%的代码共享，并对实践中极高的水平感到惊讶——95%（到达）和99%（指南针）

另外，尽管我们决定使用React Native构建所有新应用，但这并不意味着我们会自动开始在React Native中重写旧应用。

到达；到达

2018年底，我们决定重写我们最受欢迎的消费者应用之一，到达反应本机。Arrive并不懒散，它是一款高评价、高性能的应用，在iOS上有数百万次下载。这是一个很好的选择，因为我们没有安卓版本。我们的努力将帮助我们接触到所有吵着要到达的安卓用户。它现在在iOS和安卓系统上都是React Native，共享95%的相同代码。我们将在未来的博客文章中深入探讨到达。

到目前为止，这一重写导致：

• 比我们的原生iOS应用程序更少的崩溃

• 推出Android版本

• 由移动+非移动开发者组成的团队。

该团队还想出了这种很酷的方法来立即测试正在进行的拉取请求。你只需扫描手机上自动GitHub评论中的二维码，JavaScript包就会在你的应用程序中更新，你现在正在运行拉取请求中的最新代码。我们的首席技术官JML最近在推特上分享了这个过程。

销售点

2019年初，我们在我们的旗舰销售点（POS）应用程序上做了一个为期6周的实验，看看它是否是React Native重写的好候选人。我们学到了很多，包括我们的零售商家期望我们的POS响应速度几乎是原来的2倍，这是因为在使用我们的应用程序的同时还能与客户交谈。

为了更好地为我们的零售商家服务，并在实体零售环境中了解React Native，我们决定为iOS本地构建新的POS，并为Android使用React Native。

我们有两个团队，原因如下：

1. 我们已经有了一个拥有iOS专业知识的团队，包括许多开发原始POS应用程序的人

2. 我们希望能够将我们的React原生工程速度以及应用程序性能与原生iOS的黄金标准进行比较

3. 为了满足我们商家的高性能要求，我们觉得我们需要在发布前对React Native进行所有Facebook重新架构更新（事实证明，它们对我们的性能用例并不重要）。在两个平台上有两个团队，降低了我们发射的风险。

我们在2019年联合大会上宣布完全重写POS。寻找原生ios和React原生Android应用程序在2020年推出！

罗盘

Shopify的Start团队的任务是帮助刚开始创业的人。在全公司决定将所有移动应用程序都写在React Native中之前，该团队深入研究了Native、Flutter和React Native作为可能的技术选择。他们选择了React Native，现在在应用商店里有ios和安卓应用程序（测试版）。

Compass的第一个版本（包括ios和Android）在3个月内推出，ios和Android之间共享了约99%的代码。

移动在Shopify 2020+

我们为2020年准备了很多。

我们会重写我们的原生应用吗？没有。这是每个应用团队独立做出的决定

我们会继续雇佣本土工程师吗？是的，很多！

我们希望为核心React Native做出贡献，构建特定于平台的组件，并继续理解每个平台的微妙之处。这需要深厚的本土专业知识。这听起来像你吗？

合作和开源

我们认为构建软件是一项团队运动。我们致力于开放网络、开源和开放标准。

我们正在赞助Software Mansion和Krzysztof Magiera（React Native for Android的联合创始人）围绕React Native的开源工作。

我们正在与威廉·坎迪隆（《反应本机》的主持人）合作进行架构审查和性能工作。

我们将与脸书的反应本地团队密切合作，通过精益核心进行自动化、第三方库和一些模块的管理。

我们正在与不和谐合作，加速React Native的Fast List（一个只呈现视口中的列表项的库）的开源，并为Android进行优化。

React Native的开发人员工具和基础

当你下注并深入一项技术时，你想从这一选择中获得最大的杠杆作用。为了让我们快速构建并获得最大的杠杆作用，我们有两种类型的团队来帮助Shopify的其他团队快速构建。第一个是一个工具团队，帮助进行工程设置、集成和部署。第二个是专注于SDK、代码重用和开源的基金会团队。我们已经开始在2020年组建这两个团队，专注于React Native。

我们广受欢迎的Shopify平应用程序已经启用了数十万客户对话，目前只有ios。2020年，我们将在旧金山办公室使用React Native构建安卓版本，我们正在招聘。

2019年，推特发布了他们的桌面和移动网络应用，使用了一种叫做反应本地网络的东西。虽然这看起来令人困惑，但它也允许您为Web应用使用相同的React Native堆栈。因此，Facebook立即聘请了该项目的首席工程师尼古拉斯·加拉格尔（Nicolas Gallagher）。在Shopify，我们将在2020年进行一些React Native Web实验。