Get best of the week

React Native：Shopify移动开发的新里程碑

或者为什么Shopify切换到React Native。

经过多年的本机移动开发，我们决定全力以赴开发React Native上的移动应用程序。从下面可以清楚地看出，这个决定对我们来说并不容易。

在每个季度末，我们看到的情况都是一样的：我们的大多数客户都是通过移动设备进行购买的（去年第三季度，他们的份额为71％）。黑色星期五和网络星期一是我们卖家最热的时间，这些天客户的活动不在图表之列。今年，在折扣期间，Shopify合作伙伴的移动设备订单量增长了3％，此类购买的平均份额达到了交易总数的69％。

那么为什么我们决定切换到React Native？为什么现在呢？现在我们的本机移动开发将发生什么？您将无法快速，简短地回答这些问题。让我们从背景开始。

Shopify移动开发-2019


我们在Shopify开发了一种特殊的做法-依靠相对较年轻的技术，这些技术处于开发的早期阶段，或者刚刚变得流行。它可以帮助我们更快地成长。

通常，我们专注于几种技术，并且在开发中主要依靠它们。这带来了几个增长点：

  • 我们在少数技术上形成了独特的专业知识（并且经常对它们的发展做出重大甚至重大的贡献）；
  • 每个技术解决方案都有其瓶颈，微妙之处，我们会深入研究它们。
  • , , ;.
  • .

同时，不断出现的新技术为我们提供了逐步提高工程师效率或产品生产率的机会。我们正在进行大量的尝试，以开辟新的机会，并将量化的改进转化为定性的改进，但是，最终，我们并未将所有成就都引入到主要技术流程中。

当我们引入年轻的技术，语言或框架时，我们尝试计算成功或失败的可能性。除了避免风险，我们还会根据项目的个性化特征详细研究，研究和评估各种风险。通常，在风险区域中会发现隐藏的机会。我们主要考虑如何消除风险的负面影响：

  • , ?
  • , , ?
  • , () ?

Ruby on Rails处于开发的初始阶段，还没有形成完整的框架，2004年，Toby（我们的CEO）成为开放源代码项目的主要参与者。多年来，Ruby on Rails被认为是一种琐碎，低效的解决方案。但尽管如此，Shopify仍处于早期开发阶段，因此对它的选择和研究使Shopify拥有了竞争优势。使用Ruby on Rails，该团队能够快速创建产品并吸引资源。毕竟，这是一种现代技术，比当时存在的传统编程语言和框架具有更高的抽象水平。同样，保罗·格雷厄姆（Paul Graham）曾经告诉关于他决定如何使用Lisp创建Viaweb的信息。如今，Y Combinator十家最昂贵的公司中有六家使用Ruby on Rails（尽管同样，该框架仍然不是很流行）。另一方面，在Y Combinator十家最昂贵的公司中，没有一家使用Java，Java被认为是行之有效且相当可靠的公司解决方案。

同样，两年前Shopify决定改用Google Cloud。。再次，对于美国第二大电子商务服务（截至2019年）而言，这是一个相当冒险的冒险-为了使用相当新的产品Google Kubernetes Engine在自己的数据中心之外进行云迁移。我们看到，增值曲线促使我们专注于自己真正擅长的领域（这对业务有所帮助），从而使其他人（在这种情况下为Google Cloud）承担了维护生产设备的艰苦工作。条件，确保容量，安全性，更新操作系统等。

React Native-这是什么？


2015年，Facebook宣布并发布了开源React Native框架。以前，它已经在内部用于开发其移动应用程序。 React Native是使用React js库跨平台开发本地显示的移动应用程序的框架。因此，可以使用顶级js库创建本机移动应用程序的用户界面。

在Shopify中，这个想法（从某种意义上讲，现在也是如此）表示怀疑，但许多人认为它很有希望。接下来的Shopify Hackdays活动完全致力于React Native。尽管团队随后意识到了框架的好处，但我们还是决定在2015年无法实现React Native应用程序，我们对此感到自豪。这主要是由于性能问题和缺乏对Android OS的全面支持。但是我们清楚地意识到，我们喜欢反应式编程范例和GraphQL。另外，在与React Native会面之后，我们开发并布置了iOS 渲染器。 2015年，我们在堆栈上实现了这些技术，但并未将React Native用于大规模移动开发。我们的第一个实验在这里详细编写。

时至今日，Shopify已将本地移动开发作为标准。我们创建了两个团队，分别是移动工具和基础，专注于iOS和Android，还帮助我们加快了开发过程。尽管它们显示出良好的结果，但在我们看来，如果我们能够：

  • 我们在移动开发中使用JavaScript和其他网络技术的力量；
  • 在客户端应用程序的开发中引入反应式编程范例；
  • 我们将在React Native上将iOS和Android的开发整合到一个技术堆栈中。

React Native如何工作？


React Native允许您使用JavaScript创建跨平台的本机显示的移动应用程序。React Native与React类似：从ReactJS的角度来说，我们还使用UI元素树或虚拟DOM（VDOM）声明性地在JS中创建用户界面。如果ReactJS在浏览器中显示界面元素，那么React Native会将VDOM对象转换为特定于平台的本地可视元素，以便使用活页夹在移动设备上显示：原生组件包装在React中。我们只对Android和iOS平台感兴趣，但有些爱好者对开发适用于Windows，macOS和Apple tvOS的React Native感兴趣。


ReactJS与浏览器交互，而React Native与移动API交互。

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


在某些情况下，Shopify团队不使用React Native来开发移动应用程序。特别是如果要求我们：

  • 在旧硬件（CPU <1.5 GHz）上启动应用程序；
  • 精密的加工；
  • 超高性能
  • 许多线程在后台运行。

请注意：低级库（包括各种开源SDK）仍然是完全本机的。如果我们想与硬件更紧密地联系，我们可以创建自己的本机模块。

我们为什么现在要切换到React Native？


我们有3个主要原因：

  1. 在2018年收购了Tictail市场（该服务是根据React Native的先于React Native开发的）之后，我们看到了React Native受到了什么样的发展，并在2019年投资了另外三个项目。
  2. Shopify在Web开发中积极使用React，现在是时候将我们的专有技术应用于移动应用程序的开发。
  3. 我们注意到性能曲线不断攀升（例如，它以前可以做到，现在与台式机Microsoft Office相比，现在Google Docs可以做什么）并从长远来看押注了React Native –正如我们曾经相信Ruby on Rails，Kubernetes和Rich Media。

2019年Shopify的移动开发


在Shopify中，买卖双方可以通过几种方式进行交互：通过Web和移动应用程序。去年全年，我们的三个团队一直在进行React Native的试验，结果，他们开发了三个移动应用程序：Arrive，Point of Sale和Compass。

经过实验，我们得出以下结论：

  • 将Arrive应用程序复制到React Native时，团队发现，即使只为一个平台编写，生产力也比本地开发提高了一倍。
  • 在低功耗下测试Android版本的Point of Sale应用程序，我们发现该应用程序以更低的CPU频率运行：1.5GHz（以React Native编写）与2GHz（本地开发）；
  • 初步估计，平台无关代码的比例约为80％；当我们发现实际价格要高得多时，我们感到很惊讶：Arrive为95％，指南针为99％。

但这值得保留：尽管我们决定在React Native上编写新的应用程序，但这并不意味着我们将重写所有旧的应用程序。

到达


在2018年底，我们决定将最受欢迎的客户端应用程序之一重写为React Native Arrive。这是一个高性能，高评分的iOS应用程序，具有数百万的下载量。我们选择Arrive是因为我们没有Android版本。因此，我们去见了Android设备的用户。现在，iOS和Android版本都是用React Native编写的，占跨平台代码总数的95％。

在重写的过程中，我们取得了以下结果：

  • 当运行iOS的跨平台版本时，崩溃发生的次数少于本机版本。
  • 我们推出了适用于Android OS的版本；
  • 移动和非移动开发人员都可以从事该项目。

此外，团队还尝试了一种出色的方法来快速执行“进行中的工作”拉取请求。只需使用手机扫描Github注释中的QR码，即可更新应用程序的JS软件包。因此，每次您可以立即更新应用程序并使用其当前版本。我们的服务站最近在Twitter上描述了此过程。

销售点


在2019年初，我们在旗舰产品Point of Sale（POS）应用程序上进行了为期6周的实验，以查看它是否适合在React Native上重写。我们对这个问题进行了很多研究，因为我们的零售商期望我们能够将应用程序的响应时间减半：使用我们的应用程序进行客户服务的过程应该固定在卖方的坚韧记忆中，不应因此而分心。

为了满足零售商的需求并同时了解针对POS设备的React Native的开发，我们决定为iOS创建一个新的本地移动应用程序，并在React Native上为Android OS编写一个版本。

我们为这些任务分配了两个单独的团队，原因如下：

  1. 我们已经拥有一支在iOS方面拥有丰富专业知识的团队，其中包括本地POS应用程序的开发人员。
  2. 除了直接的应用程序性能之外，我们还希望能够在React Native上测试我们的开发速度，并将所有这些与我们的黄金标准（即与iOS原生开发）进行比较。
  3. 为了满足卖家的高性能要求，我们决定将所有Facebook更新重新架构化更新为React Native（但是，事实证明这对性能并不重要）。通过确定分别负责两个项目的团队，我们降低了与破坏发布计划相关的风险。

我们在Unite 2019上宣布了重写的POS 。React Native上的iOS和Android两个版本都将于2020年上市。

罗盘


Spotify拥有一个启动团队，可以帮助客户开展自己的业务。在公司做出在React Native上开发移动应用程序的基本决定之前，该团队详细研究了Flutter和React Native。选择权在于React Native，现在它们具有iOS的 Beta版本-和Compass Android应用程序。而且，它们共有约99％的代码。

第一个版本将在三个月内发布。

Shopify 2020 ++中的移动开发


我们为2020年准备了很多有趣的东西。
我们会重写我们的本地移动应用程序吗？没有。尽管这个决定是由每个团队独立做出的。
我们会雇用本地开发人员吗？是的，很多！
我们希望成为React Native社区的主要成员，创建特定于平台的组件，并继续了解每个平台的复杂性。这需要强大的专业知识。听起来不错吧？

合作与开源


我们认为软件开发是团队合作。我们参与开放网络，开放源代码和其他开放标准的开发。

我们为Software Mansion和Krzysztof Magera与React Native相关的项目（React Native for Android的联合创始人）的融资提供了资金。
我们正在与William Candillon（YouTube频道上的React Native的领导者Can It Be Done）进行架构和性能改进。

我们计划与Facebook的React Native团队紧密合作进行自动化，创建第三方库，并监督Lean Core项目中的某些模块。

我们与Discord一起积极致力于为React Native库快速准备FastList的开源版本（允许您仅呈现可见区域中的那些列表项）并针对Android OS对其进行优化。

我们的React Native工具和基础命令


当您依赖技术并深入研究时，您希望从中获得最大的效果。为了快速设定目标并实现此目标，我们创建了两种类型的团队来帮助其他Shopify员工提高工作效率。第一种是工具团队，它可以帮助配置，集成和部署。第二类是基础团队，它处理SDK，代码重用和开源。 2020年，两个团队都开始向React Native发展。

我们受欢迎的Shopify Ping应用程序目前仅在iOS版本中可用，该应用程序允许您与成千上万的客户聊天。2020年，我们将在旧金山的分支机构中使用React Native开发适用于Android OS的版本，该部门正在招聘员工。

在2019年，Twitter使用称为React Native Web的技术发布了桌面和移动Web应用程序。这个名称可能有点令人困惑，但是它的主要区别在于该技术允许您使用相同的React Native堆栈来开发Web应用程序。结果，Facebook立即追捕了该项目的首席开发人员Nicholas Gallagher。2020年，我们在Shopify还将使用React Native Web进行一些实验。

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles