Shopify:用 React Native 打造移動應用開發的未來

2020-12-24 InfoQ技術實驗室

Shopify 開發原生移動應用多年之後,我們決定完全轉向 React Native 來構建所有新的移動應用。做出這個決定並非易事,下面我會做具體解釋。

無論是哪個季度,大多數消費者都是在行動裝置上下單的(去年第三季度,我們有 71%的顧客通過行動裝置下單)。黑色星期五(Black Friday)和電商星期一(Cyber Monday)(兩者以下合稱 BFCM)是 Shopify 平臺商家一年中最繁忙的日子,這期間消費活動最為活躍。在今年的 BFCM 中,Shopify 商家在行動裝置上的購買量又增加了 3%,平均佔銷售額的 69%。

那麼為什麼要切換到 React Native?為什麼現在切換?這一變化是如何融入我們的原生移動開發流程的?答案很複雜,我在回答這些問題之前需要先交代一些背景情況。

Shopify 在 2019 年之前的移動開發情況

Shopify 的工程文化之一,是押注某些早期技術來幫助我們快速發展。

總體而言,我們更喜歡選擇少數技術打造工程基礎。這為我們提供了很多好處:

我們在少數幾種深度技術中建立了非常突出的專業能力(我們經常成為核心貢獻者);每種技術選擇都有其怪癖,但我們都能深度了解這些怪癖;非早期團隊成員也能貢獻、傳遞和維護他人編寫的代碼;新人上手更快。與此同時,新技術層出不窮,為我們提供了逐漸提升生產力或能力的機會。我們做了很多嘗試,找機會獲得大幅度的改進——但到頭來,我們在核心工程中很少採用這些改進。

當我們採用這些處於早期階段的語言或框架時,我們就是在下經過計算的賭注。我們沒有逃避風險,而是根據自身的一系列條件來精心研究、探索和評估此類風險。新技術的風險往往是隱藏其中的,與此類似,許多未開發的機遇也需要我們去探索。我們考慮的是該如何減輕這些風險的威脅:

如果某項技術不再被其核心團隊支持怎麼辦?如果遇到無法修復的錯誤該怎麼辦?如果產品的發展方向與我們的利益衝突怎麼辦?當 Tobi(我們的執行長)於 2004 年成為 Ruby on Rails 的核心貢獻者時,Ruby on Rails 還是一個年輕且難用的框架。過去很多年,Ruby on Rails 都被視為一種不夠嚴肅且性能不佳的語言。儘管它不是一種主流的技術選擇,但早期階段投下的賭注使 Shopify 擁有了超越競爭對手的能量。選擇 Ruby on Rails 後,團隊就可以使用比傳統程式語言和框架更現代、更抽象的工具來更快地構建軟體,並吸引眾多不同領域的人才。Paul Graham 也談到了他決定使用 Lisp 構建 Viaweb 的決策,這一決策產生了類似的效果;另外,當今 10 家最有價值的 Y Combinator 孵化企業中有 6 家都在使用 Ruby on Rails (不過要再說一遍,它還是很不受歡迎)。相比之下,前十大最有價值的 Y Combinator 孵化企業中沒有一家在使用 Java,而 Java 被廣泛認為是久經沙場的企業級語言。

兩年前 Shopify 又做出了類似的選擇,決定轉向 Google Cloud。對於在 2019 年美國排行第三大的電子商務零售網站來說,這又是一項令人恐懼的提案——從我們自己的數據中心遷移到雲已經是艱難的決定,而選擇一家處於早期階段的雲提供商則同樣危險。當時我們看到了產業價值鏈中的技術發展趨勢,所以開始專注自己所擅長的工作——也就是發揚企業家精神來改進業務,而讓其他人(在這裡指的是 Google Cloud)負責維護物理硬體、電力、安全性和作業系統更新等同質化的繁重勞動。

React Native 是什麼?

2015 年,Facebook 發布並開源了 React Native,當時它已經在 FB 內部被用於移動工程了。React Native 是使用 React 構建原生行動應用程式的框架。這意味著你可以使用一流的 JavaScript 庫(React)來構建自己的原生移動用戶界面。

在 Shopify,這個想法在當時(並且現在仍然)面臨許多質疑,但是許多人看到了它的前景。在公司的下一個 Hackday 中,全公司都抽時間來研究 React Native。儘管早期團隊看到了這個框架的很多好處,但他們判斷我們在 2015 年無法使用 React Native 製作出足以讓我們自豪的應用來。這主要是因為性能表現不佳和缺少一流的 Android 支持。而我們當時了解到的事實是,我們的確喜歡響應式編程模型和 GraphQL。另外,開始使用 React Native 之後我們為 iOS 構建並開源了一個函數式渲染器。在 2015 年,我們將這些技術加入了自己的原生移動開發技術棧,但沒有將 React Native 用在完整的移動開發工作中。《環球郵報》在介紹我們初代移動應用的深度報導中提到了我們的願景。

到目前為止,Shopify 上所有移動開發的標準都是原生移動開發。我們建立了分別專注於 iOS 和 Android 的移動工具鏈和基礎團隊,以加快我們的開發工作。儘管這些團隊和產出的應用程式都取得了成功,但也有人認為如果我們能夠做到下列事項,那麼團隊效率可能會提高:

將 JavaScript 和 Web 的力量帶入移動開發領域;在所有客戶端應用程式中採用響應式編程模型;將我們的 iOS 和 Android 開發工作整合到一個技術棧中。React Native 的工作機制

React Native 提供了一種使用 JavaScript 構建原生跨平臺行動應用程式的方法。React Native 與 React 類似,它允許開發人員在 JavaScript 中創建聲明式用戶界面,為此它在內部創建一個 UI 元素的層次結構樹,用 React 術語來說就是創建一個虛擬 DOM。儘管 ReactJS 的輸出以瀏覽器為目標,但 React Native 使用平臺原生綁定將虛擬 DOM 轉換為移動原生視圖,這些平臺原生綁定使用 JavaScript 對接應用程式邏輯。就我們的需求而言,目標平臺只有 Android 和 iOS,但是 RN 社區已努力將 React Native 引入了其他平臺,例如 Windows、macOS 和 Apple tvOS 等。

ReactJS 的目標是瀏覽器,而 React Native 的目標可以是移動 API。

在什麼情況下我們不會選擇 React Native?

在某些情況下,React Native 並不是 Shopify 構建移動應用的默認選項。比如說如果我們有以下需求:

在較舊的硬體(CPU <1.5GHz)上部署複雜的處理過程超高性能許多後臺線程提醒一句:包括許多開源 SDK 在內的底層庫還會是純原生的。需要接近硬體層時,我們都可以創建自己的原生模塊。

為什麼現在轉向 React Native?

這三大因素決定了現在是做出這一決策的好時機:

我們在 2018 年收購了 Tictail(一家移動優先的公司,完全專注於 React Native),從中了解到了 React Native 的發展情況,並在 2019 年進行了 3 項深度產品投資;Shopify 在 Web 端廣泛使用 React,現在這一部分的知識就可以在移動端利用上了;我們看到性能曲線是向上彎曲的(想想現在 Google Docs 和桌面端 Microsoft Office 中的能力對比),並且我們可以像在 Ruby、Rails、Kubernetes 和 Rich Media 中那樣對 React Native 進行長期投資。2019 年 Shopify 的移動開發情況

Shopify 擁有許多移動平臺,供買賣雙方通過 Web 和我們的移動應用進行交互。去年,我們花了一些時間由三支獨立的團隊在三款應用上針對 React Native 進行了實驗:這三款應用分別是 Arrive、Point of Sale 和 Compass。

從這些實驗中我們了解到:

在 React Native 中重寫 Arrive 應用時,團隊認為自己的生產力是使用原生開發時的兩倍——即使只在一個移動平臺上對比也是如此;在 Android 硬體的低功耗配置上測試 Point of Sale 應用時,我們設置的 CPU 閾值比之前想像的還要低(1.5GHz 對 2GHz);我們之前估計 iOS 和 Android 之間約有 80%的代碼可以共享,結果實踐中的超高水平震撼了我們——95%(Arrive)和 99%(Compass);順便說一句,即使我們決定使用 React Native 來構建所有新應用,這並不意味著我們會自動開始在 React Native 中重寫那些舊應用。

Arrive

在 2018 年底,我們決定用 React Native 重新編寫我們最受歡迎的消費類應用之一, Arrive 。Arrive 是一款評價頗高、表現出色的應用,在 iOS 上擁有數百萬的下載量。它是很好的候選者,因為它之前沒有 Android 版本。這一努力將幫助我們滿足所有渴望獲得 Arrive 的 Android 用戶的期待。現在,iOS 和 Android 上的 Arrive 都是基於 React Native 開發的,並且共享 95%的代碼。我們將在以後的博客文章中深入探討 Arrive。

到目前為止,這次重寫帶來了以下結果:

與原生 iOS 應用相比,新版本在 iOS 上的崩潰次數更少;推出了 Android 版本;由移動 + 非移動開發人員組成的團隊。團隊還想出了一種很酷的方法來立即測試進行中的拉取請求。你只需從手機上掃描一條自動 Github 注釋中的 QR 碼,JavaScript 包就會更新到你的應用中,現在你運行的就是從這個拉取請求中獲得的最新代碼。我們的首席技術官 JML 最近在 Twitter 上分享了這一過程。

Point of Sale

在 2019 年初,我們在自己的旗艦級 Point of Sale(POS)應用上展開了為期 6 周的實驗,想要知道它是否適合用 React Native 重寫。我們學到了很多東西,其中包括我們的零售商家期望的 POS 響應能力幾乎是之前的兩倍,因為使用這款應用時會養成肌肉記憶,需要邊操作應用邊同顧客交流。

為了給我們的零售商提供最好的服務,並在實體零售環境中了解 React Native 的能力,我們決定在 iOS 上原生構建新版 POS,並在 Android 上使用 React Native。

我們選擇由兩支團隊並行推進,主要出於以下原因:

我們已經有了一支具備 iOS 專業知識的團隊,其中有許多成員參與構建了原始 POS 應用;我們希望能與原生 iOS 這一黃金標準對比,對 React Native 的工程速度以及應用性能進行基準測試;為了滿足商家的高性能需求,我們覺得應該在項目啟動前等待 Facebook 對 React Native 做完所有架構更新(事實證明,這些更新對我們的性能場景而言並不重要)。在兩個平臺上擁有兩支團隊,降低了我們啟動項目時面臨的風險。我們在 Unite 2019 上宣布了開始對 POS 做全面重構。預計原生 iOS 和 React Native Android 應用都將在 2020 年發布!

Compass

Shopify Start 團隊的任務是幫助創業新人。在公司做出全面決策,準備在 React Native 中編寫所有移動應用之前,這支團隊深入研究了原生、Flutter 和 React Native 這些可能的技術選項。他們最後選擇了 React Native,並在應用商店中上線了 iOS 和 Android 應用(測試版)。

Compass 的第一批版本(iOS 和 Android)只用了不到 3 個月就發布了,iOS 和 Android 版本之間共享約 99%的代碼。

Shopify 在 2020 年之後的移動開發規劃

我們在 2020 年有很多計劃。

我們會重寫那些原生應用嗎?不,這是需要由每個應用團隊獨立做出的決定。

我們會繼續僱用原生開發工程師嗎?是的,需要很多!

我們希望為 React Native 內核做出貢獻,構建平臺特定的組件,並繼續了解每個平臺的精妙之處。這需要深厚的原生專業知識。

合作與開源

我們認為構建軟體是一項團隊運動。我們認同開放 Web、開放源碼和開放標準。

我們正在贊助 Software Mansion 和 Krzysztof Magiera(Android 版 React Native 的共同創始人),支持他們圍繞 React Native 進行開源工作。

我們正在與 William Candillon(Can It Be Done in React Native 的主持人)合作進行架構審查和性能改進。

我們將與 Facebook 的 React Native 團隊緊密合作,研究自動化、第三方庫以及通過 Lean Core 管理某些模塊主題。

我們正在與 Discord 合作,以加快 FastList for React Native (一個僅渲染視口中列表項的庫)的開源進程,並針對 Android 進行優化。

React Native 的開發工具鏈和基礎

當你下注一項技術並深入研究它時,你希望從這一選擇中獲得最大的效用。為了使我們快速構建並獲得最大效用,我們設置了兩種類型的團隊來幫助 Shopify 的其他團隊快速構建。第一個類型是工具鏈團隊,可以幫助他人進行工程設置、集成和部署。第二個類型是基礎團隊,專注於 SDK、代碼重用和開源。進入 2020 年,我們已經開始讓這兩支隊伍都轉變方向,專注於 React Native。

Shopify Ping 應用僅在 iOS 平臺上就處理了數十萬次客戶對話。2020 年,我們將在舊金山辦公室使用 React Native 構建它的 Android 版本,目前正在為此招聘人員)。

在 2019 年,Twitter 使用稱為 React Native Web 的東西發布了他們的桌面和移動 Web 應用。雖然這項技術有點令人困惑,不過它允許你為 Web 應用使用相同的 React Native 技術棧。Facebook 為該項目聘請了首席工程師 Nicolas Gallager。在 Shopify,我們將在 2020 年進行一些 React Native Web 的實驗。

作者介紹:

Farhan Thawar 是 Shopify 的渠道和移動業務副總裁。

原文連結

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

相關焦點

  • 用JavaScript開發移動原生應用,Facebook正式開源React Native!
    在經過前一天Messenger應用平臺、Parse物聯網開發者工具等驚喜的轟炸,Facebook於今天凌晨在F8開發者大會上正式開源了React Native。不過目前,只有iOS版,Android版還需要再等一段時間,這是最新的用JavaScript語言開發原生App的嘗試,其示例代碼相當簡潔,內置控制項也不少。
  • 十大最受歡迎的 React Native 應用開發編輯器
    作者丨 Murtaza Basrai譯者 丨 安翔市面上用於開發工作的編輯器非常多,筆者會經常因為不同的程式語言該如何選擇好用的編輯器而感到糾結。而在隨後從事 React Native 開發工作過程中,對相應的編輯器做了一些探索和研究,本文總結了一些非常適合移動應用開發的編輯器和 IDE。1.
  • 推薦11 款 React Native 開源移動 UI 組件
    本文推薦 11 個非常棒的 React Native 開源組件,希望能給移動應用開發者提供幫助。
  • 如何用 React Native 開發一款電商 App?
    今天我們來聊一聊是如何在RN平臺開發一款用於查找圖書資料庫的電子商務移動app。如果你之前沒有使用過RN,那麼現在就跟我一起開啟你的移動端Javascript開發之旅吧。2018年Javascript迎來了前所未有的發展,各種庫、框架、開發工具都已經發展的相當的成熟了,整個社區也都在致力於使網上衝浪變得更加方便快捷。
  • 最火移動端跨平臺方案盤點:React Native、weex、Flutter
    目前移動端跨平臺開發中,備受關注的方案大致歸納為以下幾種情況:1)react native、weex均使用JavaScript作為程式語言,目前JavaScript在跨平臺開發中,可謂佔據半壁江山,大有「一統天下」的趨勢;2)kotlin-native開始支持 iOS 和 Web
  • Facebook 發布 React Native for Android
    Facebook 今天發布了 React Native for Android,把 Web 和原生平臺的 JavaScript 開發技術擴展到了
  • ReactNative學習資源大匯集
    /fangwei716/30-days-of-react-nativeReact-Native視頻教程(部分免費) https://egghead.io/technologies/reactReact Native 開發培訓視頻教程(中文|免費)https://www.gitbook.com/book/unbug/react-native-training/details
  • React Native開發基礎入門之搭建開發環境
    安裝完 yarn 後同理也要設置鏡像源:安裝完 yarn 之後就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install 某第三方庫名。
  • React Native實戰:配置和起步
    srain$ node -vv4.0.0mac-2:react-native srain$ npm -v2.14.2安裝 watchman 和 flow這兩個包分別是監控文件變化和類型檢查的。安裝如下:brew install watchmanbrew install flow安裝 React-Nativenpm install -g react-native-cliApp開發環境的設置
  • 僅用移動開發服務:一分錢不花,開發native應用
    不花一分錢,就可以做native應用開發,這在以前是根本不敢想像的事兒。然而在今天,移動開發工具和服務已經五花八門,聰明的開發者只要隨心所欲的抓取幾個順手的,就能完成native開發。今天給大家介紹的思路其實很簡單:1. 使用Nitrous.IO雲端編程環境,開啟Node.JS的box模塊。2.
  • React-Native學習指南
    同時還有Awesome React-Native系列https://github.com/jondot/awesome-react-native教程React Native深入淺出系列教程React.js
  • React Native 0.62 發布 默認支持Flipper 新的暗黑模式
    Flipper 是用於調試移動應用的開發人員工具,它在 Android 和 iOS 社區中都很流行,Flipper 提供以下功能:Metro Actions:重新加載應用並從工具欄直接觸發開發菜單。Network Inspector:查看設備應用程式發出的所有網絡請求。Metro and Device Logs:查看、搜索和過濾來自 Metro 和設備的所有日誌。Native Layout Inspector:查看和編輯 React Native 渲染器輸出的原生布局。Database and Preference Inspectors:查看和編輯設備資料庫和首選項。
  • Android React Native應用逆向分析初探
    隨著移動網際網路時代的到來,用戶在行動裝置上花費的時間越來越多,不僅是因為行動裝置方便攜帶,而且還因為層出不窮的大量應用提供為用戶使用,以往在電腦上才能做的事情,現在僅靠一部手機就可以解決了。當前的行動裝置廠商很多,但是被廣泛使用的主流系統卻只有兩個,Android和iOS,因此現在大多數應用都會有兩個版本,Android版本和iOS版本。
  • 如何使用 React Native 構建實時 to do 應用程式
    我將在這個案例裡面使用最流行的移動框架之一 React Native 搭建一個待辦事項應用程式。我將使用 ReactiveSearch Native,這是一個提供 React Native UI 組件並幫助你快捷搭建數據驅動應用程式的開源庫。我會在這個案例中搭建以下待辦事項應用程式:
  • React Native 開發日常、常見問題總結及解決
    一、建議 看法:個人覺得 APP 開發性能 Flutter > React Native > Weex難度:Flutter > React Native > Weex 有點尷尬建議:Flutter 未來的趨勢,趕緊學,趕緊幹;大公司基本都用上了;方法:可以關注 阿里 相關的 技術公眾號,你能知道目前 熱門技術及乾貨;個人感覺前沿技術基本在 阿里系;跟著大公司的步伐學習不會錯、不會脫軌
  • React Native 0.63 發布,告警系統、顏色與交互能力改進
    import { Pressable, Text } from 'react-native';<Pressable onPress={() => { console.log('pressed'); }} style={({ pressed }) => ({ backgroundColor: pressed ?
  • 不止於小程序 APICloud推出react native純翻譯模式的UI引擎
    在《AI時代的移動技術革新》大會中,APICloud團隊發布了小程序的技術規範兼容產品,一種類似於React Native技術的純翻譯模式的app UI引擎,能夠讓app開發者利用簡單的網頁模式技術開發真正原生體驗的app。同時APICloud宣布基於自身已打造的「API生態平臺」面向平臺上的雲服務商以及開發者合作夥伴,推出一億元+的生態分帳計劃。
  • React + Redux + React-router 全家桶
    SSR,移動端ReactNative和桌面端Electron。web端開發需要搭配React-dom使用import React from 'react';import ReactDOM from 'react-dom';const App = () => (  <div>      <
  • React Native 0.60.2 發布,帶來全新 JS 引擎 Hermes
    對於許多應用程式,只需啟用 Hermes 即可縮短啟動時間、減少內存使用量並縮小應用程式大小,此外因為它採用 JavaScript 標準實現,所以很容易在 React Native 應用中集成。編輯 android/app/build.gradle 文件並進行以下更改: project.ext.react = [ entryFile: "index.js",- enableHermes: false // clean and rebuild if changing+ enableHermes: true // clean
  • React Native 從入門到原理
    從本質上來說,移動端和服務端約定了一套協議,但是協議內容嚴重依賴於應用內要展示的內容,不利於拓展。也就是說,如果業務要求頻繁的增加或修改頁面,這套協議很難應付。最重要的是,JSON 只是一種數據交換的格式,說白了,我們就是在解析文本數據。這就意味著它只適合提供一些配置信息,而不方便提供邏輯信息。