Coinbase如何根據第一性原則從原生App過渡到React Native?
Coinbase是第一家上市的比特幣交易所,他們宣佈截至2021年1月,Coinbase iOS和Android應用程式已從本機開發過渡到React Native。
遷移到React Native意味著要重新實現200多個螢幕,其中許多螢幕包含大量的業務邏輯。過渡還涉及對30多名本地工程師進行再培訓,同時繼續在構建新功能和淘汰我們的舊版應用程式方面取得進展。
當Coinbase於2012年成立時,它只有一個網站-我們於2013年啟動了移動程式。我們釋出的首批iOS和Android應用程式是本機的,分別用Objective-C和Java編寫。
到2017年,我們擁有由Android和iOS工程師組成的小型團隊來開發這些應用程式,但是儘管我們已盡了最大努力,但我們仍難以擴充套件。移動工程師的平均生產率然停滯不前。隨後我們在2018年的擴充套件工作繼續取得令人失望的結果,越來越明顯的是,我們需要提高移動平臺上的增長率和迭代速度。
需要改變策略,因此我們決定退後一步,從第一性原理的角度考慮如何構建產品:
在Coinbase,主要功能由跨功能的團隊構建和維護,每個支援的平臺(Web,iOS和Android)通常由2個後端工程師和2個前端工程師組成。這種結構要求大量的工程師維護我們產品的單一垂直狀態。這也意味著在同一平臺上工作的工程師彼此孤立隔絕,從而難以協調更大的系統性更改。
從這種角度思考,使我們提出了一個問題:如果我們可以將一個健康的功能團隊從8個減少到5個工程師,而多個客戶工程師可以在所有三個平臺上工作,那該怎麼樣?
我們假設這可以大大減少我們的總體人員需求,提高我們團隊的效率,並增強我們客戶平臺上工程師的聯絡度。同時,我們還認為提高效率不是唯一的目標。我們進行的任何技術更改也都必須為客戶提供更高的質量和效能。這種思路導致我們開始研究不同的跨平臺技術。
在這個階段,我們已經有了一個執行良好的Web工程平臺,該平臺基於React。在探索了許多不同的跨平臺技術平臺之後,我們認為React Native將是我們的最佳選擇。它利用了我們已經知道的技術堆疊,併為在移動和Web上進一步整合提供了一條清晰的道路。
一旦就技術平臺達成一致,我們就制定了計劃,逐步在我們的產品表面上對其進行探索。我們想從風險較低的地區入手,以降低遷移風險,然後隨著我們的能力和信心的發展逐漸擴大範圍和影響。經過幾個月的初步研究,我們制定了一個由三部分組成的策略:
- 從綠地新專案探索開始。 我們認為,使用React Native進行實驗的第一個地方是一個全新的環境,我們可以在其中評估React Native技術而無需原生整合的複雜性。從前端的角度來看,Pro版本是我們效能最密集,最複雜的產品,並且使用者一直在要求移動應用程式已有一段時間。它似乎是我們探索的理想人選。如果React Native能夠滿足Pro移動應用程式的需求(涉及實時價格和深度圖等技術上具有挑戰性的方面),我們將非常有信心它可以滿足我們其他產品的需求。該專案還將使我們能夠評估開發人員的速度,並確保可以對我們的Web工程師進行交叉培訓,使其成為有效的React Native工程師。
- 探索舊專案(棕色地)改寫的樣子。我們決定探索的下一個領域是棕地整合,我們將把React Native整合到現有的本機應用程式中。我們著手使用React Native重建入職流程,然後在Pro移動應用程式(React Native)以及主要的Coinbase iOS和Android應用程式(均為本機)之間共享它們。Coinbase目前支援100多個國家/地區,並且由於不同的司法管轄區對監管要求的要求不同,因此我們的註冊經驗必須是動態的-適應每個使用者的位置和身份配置檔案。這些流程是我們移動應用程式中最古老,最複雜的部分。即使進行增量更改,實施起來也可能會很昂貴。隨著獨立Pro產品的釋出,
- 在開發這些新的和未開發的解決方案的經驗教訓的基礎上,對我們的核心產品進行完整的重寫。如果我們在前兩個階段中都取得了成功,我們假設我們可以在React Native中執行對Coinbase主應用程式的完全重寫。最初建立策略時,我們不確定此重寫是增量式棕地重寫(在此逐步重寫螢幕)還是綠地重寫(在此處從頭開始)。我們將此實現細節留給我們從前兩個階段中學到的知識。
如果您閱讀過Airbnb出色的Sunsetting React Native文章,這些挑戰可能聽起來很熟悉。我們花了很多時間與Airbnb的工程師交談,並嘗試從他們的經驗中學習。我們感謝團隊分享他們的旅程細節,因為這些資訊對於確定Coinbase的最佳路徑非常寶貴。我們的主要收穫之一是,棕地方法似乎是他們所面臨的許多挑戰的核心。乍一看,漸進式遷移的想法很吸引人-利用React native的優勢獲得新功能,而無需完全重寫的前期成本-但從長期來看,它引入了重大的技術和文化遷移風險。
以這些觀察為背景,並完成了兩個成功的專案,我們有信心繼續推進主要Coinbase移動應用的平臺轉型。我們決定:
- 我們將首先重寫Android。我們認為Android將是這兩個平臺中難度更大的一個,並認為,如果我們能夠從質量,效能和速度的角度來實現這一目標,那麼我們將有一條清晰的道路,可以緊隨其後在iOS上推廣。首先構建Android還使我們能夠繼續在本地iOS上並行開發,從而確保我們的客戶在進行改寫時繼續看到體驗方面的改進。
- 我們將進行完全的綠地重寫,而不是採用棕地/零碎的方法。根據我們自身的經驗(使用Pro和入門模組)以及從Airbnb等公司吸取的經驗教訓,我們得出結論,棕場專案增加了複雜性,帶來了陷入“卡在”中間狀態的風險,併為長期的文化分歧創造了空間在不同平臺上的工程師之間。
考慮到到目前為止我們使用React Native看到的速度,我們估計我們可以在6個月內完全重寫我們的產品。
我們還認為,如果最終決定取消該專案,那麼在重寫的最後擁有統一平臺的好處就超過了成本。我們從2020年3月開始重新設計Android應用程式,並在將近6個月後交付了完全重寫的Android應用程式。
在Android平臺上取得了積極的成果之後,我們決定繼續改造Coinbase iOS應用。
到2020年中期,我們大約有7位Android工程師和18位iOS工程師在Coinbase移動應用程式上工作。到今天為止,Coinbase的React Native倉庫已經有113個貢獻者,其中包括大量的Web工程師,而這些人以前是無法在移動裝置上做出貢獻的。透過交叉培訓本地移動工程人才,我們也看到了積極的成果,並且由於技術變化而導致的人員流失很小。來自iOS和Android背景的工程師現在正在做出巨大的貢獻。
相關文章
- 原生專案如何從零開始整合 React NativeReact Native
- 從 React Router v5 過渡到 v6React
- React-Native從零搭建App(長文)ReactAPP
- React Native 橋接原生 iOS 以及 Android 獲取 APP 版本號React Native橋接iOSAndroidAPP
- 《React Native高效開發》之create-react-native-appReact NativeAPP
- 如何優雅絲滑地從Date過渡到LocalDateTimeLDA
- 開發 React Native APP —— 從改造官方Demo開始(1)React NativeAPP
- 開發 React Native APP —— 從改造官方Demo開始(2)React NativeAPP
- 【建議收藏】11+實戰技巧,讓你輕鬆從Vue過渡到ReactVueReact
- 從數字化過渡到智慧製造
- 通過 create-react-app 從零搭建 React 環境ReactAPP
- 從 Android 到 React Native 開發(三、自定義原生控制元件支援)AndroidReact Native控制元件
- 過渡到 nftables
- React Native整合到現有的原生專案React Native
- 根據happens-before法則藉助同步APP
- 開始測試React Native App(下篇)React NativeAPP
- 開始測試React Native App(上篇)React NativeAPP
- 使用duxapp開發 React Native App 事半功倍UXAPPReact Native
- 我的第一個React Native AppReact NativeAPP
- React Native學習指南:React Native嵌入到原生應用的一次嘗試React Native
- 分散式機器學習:如何快速從Python棧過渡到Scala棧分散式機器學習Python
- React Native填坑之旅 -- 從Native發事件給JSReact Native事件JS
- React Native成功過稽核心技巧React Native
- 拼多多API介面:拼多多APP根據ID取商品詳情原資料APIAPP
- 多年教訓:根據DDD設計原則改變JPA/Hibernate的使用方式 - lorenzo
- React Native 原生模組封裝:支付寶示例React Native封裝
- react native 和原生平臺 android的互動React NativeAndroid
- React Native填坑之旅--使用原生檢視AndroidReact NativeAndroid
- [React Native]react-native-scrollabReact Native
- JS 根據彙總結果過濾JS
- 根據JavaScript中原生的XMLHttpRequest實現jQuery的AjaxJavaScriptXMLHTTPjQuery
- 在 React Native 中原生實現動態匯入React Native
- 開源一個天氣APP Build with React NativeAPPUIReact Native
- React Native釋出APP之打包iOS應用React NativeAPPiOS
- SAP RETAIL 如何根據分配表查到根據它建立的採購訂單?AI
- React Native Icon方案:react-native-svgReact NativeSVG
- php 陣列根據元素從小到大排序PHP陣列排序
- Airbnb: React Native 從選擇到放棄AIReact Native