Shopify为什么选择React Native作为移动研发的未来？

这是奶爸码农第56篇原创文章，点击上方蓝字关注

原文：https://engineering.shopify.com/blogs/engineering/react-native-future-mobile-shopify

翻译：奶爸码农

01

引言

在经历多年的移动研发后，Shopify决定今后对于新App研发全部采用React Native技术。后面我会解释，做出这个决定并不容易。

目前每个季度主要的购买行为都发生在移动设备（去年Q3 71%的购买行为在移动设备）。黑色星期五是一年中最繁忙的时间，今年的黑色星期五，Shopify的商家又看到3%的移动端购买增长，平均达到69%。

所以为什么切换到React Native？为什么现在？RN又如何和现有原生Native开发融合？这是一个复杂的回答需要先回答一些背景内容。

02

2019年前Shopify的移动研发

我们的工程师文化总是让我们押注早期技术以便执行的更快。

总之，我们倾向专注于较少的技术作为研发的基础。这个给到我们一些好处：

• 我们在少数领域成为专家

• 每个技术选型都有取舍，但我们会快速学习

• 新人可以快速融入

同时，总会有新的技术出现可以提高研发效率。我们实验了许多技术，同时也采用了一些。

当我们采用这些早期语言或者框架的时候，我们都在下注。我们持续调研，探索，并且评估各种风险。很多时候，不可预知的机会就隐藏在那些有风险的区域，我们思考如何评估这些风险：

• 如果这个技术的核心团队停止维护怎么办？

• 如果我们遇上一个无法修复的bug怎么办？

• 如果产品的规划和我们的兴趣方向冲突怎么办？
  

Ruby on Rails在2004年是一个吸引人的框架，当时Tobi（我们的CEO）也作为其中的核心贡献者。多年来，Ruby on Rails都被看作一个不太严肃、性能不佳的选择。但是，在早期使用Ruby on Rails使得Shopify比其他竞争者迭代更快。使用Ruby on Rails，团队可以研发的更加快速，并且吸引一群更有创意的工程师。Y Combinator最有价值的10家创业公司中，没有一家使用Java，而Java被视为企业级应用开发的主流语言。

两年前，Shopify决定使用Google Cloud。作为美国零售业线上第三大的网站，我们从自己的数据中心迁移至云端服务。我们切实的感受到这样的好处，可以让我们在业务发展上更加专注，同时让第三方专注于硬件、电源、安全、操作系统升级等等。

什么是React Native？

在2015，Facebook发布并且开源了React Native，并且已经在内部得到广泛应用。React Native是一个采用React开发移动应用的框架。这意味着你可以使用最好的JavaScript框架(React)来构建你的移动应用。

在公司的Hackdays活动上，整个公司都在React Native上尝试。当早期尝试团队看到很多好处后，但是他们决定在2015年还不能以React Native为主发布App。我们尝试了响应式编程模型和GraphQL。同时，我们也构建了一个iOS渲染引擎。

至此，Shopify的移动开发还都是基于原生移动开发。我们构建了移动工具和基础团队关注于iOS和Android平台开发。这些团队和产品都取得很大成功，但是我们依旧希望尝试新的东西：

• 在移动研发中引入JavaScript和Web开发体验

• 采用响应式编程模型

• 将iOS和Android开发平台合并成统一的技术栈

React Native是如何运行的

React Native是采用JavaScript来构建原生跨平台移动应用的框架。React Native和React很接近，可以让开发者使用JavaScript开发申明式UI。它内部会使用Virtual Dom来创建树形的UI组件，当输出的时候，ReactJS会生成Web浏览器的Dom，而React Native将Virtual Dom转译成原生的UI控件，同时逻辑代码是使用JavaScript编写。

对于我们而言，我们的目标平台是Android和iOS，但是社区可以将React Native技术支持其他平台，例如Windows，macOS和Apple tvOS。

什么时候我们不采用React Native？

有些时候我们不会采用React Native来构建Shopify移动应用。例如：

• 在老旧的硬件上使用（CPU<1.5GHz）

• 高强度的运算

• 极高的性能要求

• 大量的后台进程

需要注意的是，许多底层的代码库依旧是采用原生开发，我们可以通过Native Modules暴露给JavaScript代码使用。

为什么现在采用React Native？

主要有三个主要原因：

1. 我们从收购的公司Tictail（100%采用React Native的移动公司）学习到React Native的能力，并且在2019年在3个产品中深入使用。

2. Shopify在Web开发中广泛采用React，并且知道如何在移动平台使用

3. 我们看到性能曲线的提升，并且我们将长期投入React Native研发

03

2019年的Shopify的移动研发

我们有许多移动应用帮助消费者和商户进行交易，并且同时提供Web和移动App。过去一年，我们在三个独立团队中尝试了React Native：Arrive，Point of Sale和Compass。

我们从中学到：

• 采用React Native重写Arrive App的时候，团队感觉到生产力相比原生开发提升了一倍

• 在测试Point of Sale App的时候，我们发现低端机器的阈值比我们原先预料的要低（1.5GHz vs 2GHz）

• 我们预估会有~80%的代码可以跨平台使用，但是我们惊奇的发现跨平台共用的代码比例非常高 - 95%（Arrive）和99%（Compass).

当然，虽然我们决定在新应用开发采用React Native技术，但并不会将现有App重写一遍。

Arrive

在2018年底，我们决定采用React Native重写一个最受欢迎的消费者应用（Arrive）。Arrive是一个高评价，高性能App，并且有数百万下载量。这是一个很好的选择，因为它目前只有iOS版本。所以通过React Native重写可以让Android用户也能使用上。当前React Native的版本App在iOS和Android上共享了95%代码。

目前的结果是：

• 比起原生App更少的崩溃

• 一个Android版本发布

• 一个由原生移动开发和非移动开发的混合团队

Point of Sale

2019年初，我们花了6周时间来验证我们的旗舰产品Point of Sale是否可以用React Native重写。我们发现对于商户的需求响应速度提升了一倍。

为了能够更好的服务零售商，我们决定在iOS平台采用原生技术，在Android平台使用React Native技术。

我们组建了两个团队原因是：

• 我们已经有了iOS技术团队的储备

• 我们期望能够对比原生开发和React Native开发的效率

• 为了追求高性能，我们需要等待Facebook完成React Native的重构。因此，组建两个团队是为了降低风险。

我们在2019年重写了POS App，期待在2020年，我们可以发布全新的原生的iOS版本和React Native的Android版本。

Compass

我们广泛的调研了Native，Flutter和React Native进行技术选型。最终，我们选择了React Native，并且发布了iOS和Android版本。

第一个版本的Compass（iOS和Android版本）在3个月开放完成，并且~99%的代码是共享的。

04

Shopify 2020年后的移动开发

在2020年我们有许多要做的事情。

我们会重写现有的原生App吗？不，每个App团队可以单独做出决定。

我们会继续雇佣原生工程师吗？是的，非常多。

我们会继续为React Native贡献，构建平台独特的组件，并且理解每个平台的不同。这些都需要深入理解的原生经验。

当你下注一个新技术栈，你希望能够获得最大收益。为了可以帮助研发团队更快的构建应用，我们会组建两类团队来帮助其他团队。第一个是工具团队帮助研发团队搭建、集成和发布。第二个是基础研发团队，他们关注于SDKs，核心复用代码和开源社区。在2020年，我们已经开始组建这两类团队并且专注于React Native。

-End-

推荐阅读

重磅 | 2020年前端开发者学习路径发布

StateofJS：2019年JavaScript生态圈报告出炉

解密国内BAT等大厂前端技术体系-完结篇

Airbnb：大规模代码迁移至Apollo+GraphQL的实践

『奶爸码农』从事互联网研发工作10+年，经历IBM、SAP、陆金所、携程等国内外IT公司，目前在美团负责餐饮相关大前端技术团队，定期分享关于大前端技术、投资理财、个人成长的思考与总结。