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

2020-12-14 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

相關焦點

  • React Native 0.63 發布,告警系統、顏色與交互能力改進
    import { Pressable, Text } from 'react-native';<Pressable onPress={() => { console.log('pressed'); }} style={({ pressed }) => ({ backgroundColor: pressed ?
  • 官宣:ReactNative導航庫重大更新
    構建原生導航器新版中使用了[react-native-screens](kmagiera/react-native-screens)庫,構建了Android和ios系統原生的導航器組件,使用視覺效果和原生一樣其他的改進
  • Taro 3 支持 React Native
    廣義上理解,針對小程序各端的處理也基本類似,只不過中間多了一步:先編譯成目標平臺的代碼,然後再用小程序 IDE 編譯發布。當然它與前兩者還是有些差異:目標平臺的中間代碼包含 Taro 運行時,調試起來並不是非常直觀;而前兩者直接生成最終打包資源,所以天然地支持 source-map 。
  • Flutter,Native,React-Native,誰才是性能王中王?
    全文共1283字,預計學習時長5分鐘什麼是構建行動應用程式最流行的解決方案?單一平臺,跨平臺使用ReactNative ,或是Flutter?雖然單一開發被定位為AAA技術解決方案,但它也有一些缺點,這些缺點為跨平臺應用程式的進入創造了市場空間。單一開發需要開發團隊付出更多的努力來完成項目,但它可以幕後完全控制複雜的技術工作。而選擇使用跨平臺,由於它有通用代碼庫,則可以顯著加快開發過程,使項目支持更加容易,並減少開發費用。
  • Flutter、React Native與Native: 深度性能的較量!
    圖源:unsplashinVerita及其移動開發團隊不斷深入研究市場上可用的移動跨平臺解決方案的性能,旨在解答這樣一個問題:對於你的產品,甚至是你的職業生涯來說,Flutter、有人認為,我們並沒有每天都用React Native進行多次重複計算,但如果CPU佔用率較高的任務由Flutter或Native應用程式來完成,效果會更好。所以本文決定研究用戶界面的性能,因為它對行動應用程式的日常用戶影響更大。衡量用戶界面性能很複雜,需要工程師在每個平臺上以同樣的方式實現相同的功能。
  • 這5個React應用程式庫不要錯過……
    編輯 搜圖或許你一直在從頭開始構建React應用程式,這當然無可厚非。但當你遇見了今天要介紹的這些庫,一定會感嘆相見恨晚!React最令人喜愛的地方是,沒有固定的方法來構建應用程式。開發人員可以自由選擇要使用的庫和要遵循的模式,你可以隨意去實現自己天馬行空的想法。
  • 快速在你的vue/react應用中實現ssr(服務端渲染)
    2.使用node+React renderToStaticMarkup實現react項目的服務端渲染使用這種方案和vue的方案類似, 只不過這裡我們用了react自帶的api來實現ssr,簡單的實現代碼如下:var express = require('express');
  • Shopify app 你想要了解的一切
    其他補充關於shopify app store眾所周知,目前shopify發展非常迅猛,市值已經超過1000億美金,背後的原因除了shopify本身出色的建站技術和趕上了跨境電商品牌發展趨勢等之外,活躍的應用市場插件也起了很大的支撐作用,國外甚至有如下說法:
  • 什麼是shopify+facebook的黃金搭檔模式
    shopify是全球最大的自建站平臺,在上面就相當於,你自己建立了一個屬於自己的商城,或者店鋪。· 裡面可以對接paypal,信用卡帳戶,等多種收款方式。其中paypal就相當於全球最大的支付寶。· shopify後臺有各種付費和免費的,應用,提供選擇。· 主題也分為付費和免費的,完全可以打造一個,功能很強大的,獨立的,電商網站。簡單來說,shopify就是一個建站系統,全方位供你,建立屬於自己的獨立站。
  • 如何用純css打造類materialUI的按鈕點擊動畫並封裝成react組件
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫前言作為一個前端框架的重度使用者,在技術選型上也會非常注意其生態和完整性.筆者先後開發過基於vue,react,angular等框架的項目,碧如vue生態的elementUI
  • React-Router v6新特性解讀及遷移指南
    前言18 年初,React Router的主要開發人員創建一個名為Reach Router的輕量級替代方案。就是變得更好用了。import Profile from '.但是現在我們可以在React App中使用多個路由,這將幫助我們基於不同的路由管理多個應用程式邏輯。
  • 開發移動APP應用對企業有何意義
    而隨著移動網際網路的發展,進行長沙APP開發就成為了眾多企業的選擇對象,大家都希望通過APP應用,來取得更好的發展。那麼接下來,長沙APP製作創研股份就給大家談談,企業開發APP應用具體有哪些意義。行業趨勢所在從行業發展趨勢來看,企業開發APP應用,必將是企業發展的趨勢,因為從目前的情況來看,絕大部分用戶都從線下轉移到了移動端,而用戶在哪裡,市場就在哪裡。對於企業而言,只有開發APP應用,去迎合市場用戶,才會取得較好的發展。
  • OPPO開啟技術開放日 打造AI&AR應用的高效開發平臺
    OPPO開啟技術開放日 打造AI&AR應用的高效開發平臺 2019年04月13日 17:35作者:王瑞編輯:王瑞文章出處:泡泡網原創
  • 網易LOFTER發力移動端 強勢拓展手機攝影
    新版應用增加濾鏡功能,極大的滿足了攝影愛好者的使用需求;技術上則採用全新的native開發模式。
  • 為什麼斑馬ERP能常年保持Shopify應用商店ERP自然排名第一?
    一、統一產品庫根據多年成功的跨境產品管理系統經驗,首創多平臺產品庫SPU+SKU管理架構,降低多變種產品的管理難度,提高產品管理的效率,可自動把成本價轉換成售價批量推送到shopify進行刊登,兼容鋪貨賣家和精品運營賣家的需求。
  • shopify和有贊、微盟續費模式對比
    美國shopify,按月付費,線上銷售的模式,為啥在國內的商鋪SaaS服務商不這樣搞?美國從PC網際網路到移動網際網路是正常發展的,也就是很多企業員工是具備電腦操作經驗的,在網頁看見即理解,了解了SaaS的價值,也會操作,隨即就購買了。
  • 微軟改善Windows和macOS上的React Native體驗
    Facebook 的 React Native 框架,允許開發人員僅使用 JavaScript 來構建行動應用程式,以及藉助聲明性組件來編寫豐富的移動用戶界面。Facebook 和微軟表示:雙方表示很高興將 React Native 帶入更多平臺,其為桌面平臺構建的功能,還針對移動和 Web 方面的體驗進行了改進。
  • 移動應用行業發展趨勢解讀:應用場景縱深發展、應用輕量化等賦予...
    此外,早已萌芽的輕量化應用形態、全場景智慧化應用服務,在現階段也得到長足發展,這些都給移動應用行業帶來了新的發展契機。但機遇與挑戰往往相伴相生,開發者需要努力拓展應用服務能力和邊界,才能真正把握住時代賦予的發展機遇,在未來激烈的市場競爭中脫穎而出。
  • 速賣通賣家須知,oberlo+shopify的使用教程
    關於shopify: 它是一個建站工具,不是像亞馬遜一樣的平臺,shopify幫助你建立自己的一個獨立站點,什麼叫做獨立站? 比如:淘寶/京東/亞馬遜/wish/速賣通等,他們呢都是獨立站,只是他們的獨立站可以招商入住,你的獨立站目前只是幫自己賣貨的!