Coinbase की React Native अपनाने की कहानी

हाल ही में Coinbase के एक डेवलपर ने Twitter पर साझा किया कि नया Coinbase ऐप RN में लिखा गया है, जिससे हल्की-सी चर्चा हुई थी (https://twitter.com/htormey/status/1392161714250993667)। अब इस पर विस्तार से एक Medium लेख भी साझा किया गया है। संबंधित Twitter थ्रेड के अनुसार, कुछ native modules मौजूद हैं, लेकिन ऐप कोडबेस का लगभग 97% TypeScript है.

नीचे मूल लेख की संक्षिप्त अनुवादित सामग्री है:

• iOS और Android native ऐप पहले से मौजूद होने की स्थिति में RN पर migration किया गया। migration के दौरान 200 से अधिक screens वाले विशाल native ऐप को फिर से implement करना पड़ा, और 30 से अधिक मौजूदा native engineers के लिए बदलाव हेतु in-house RN classes भी दी गईं.

• काफी प्रयासों के बाद native दौर की तुलना में performance metrics, business metrics, app ratings, 7 day crash free user percentage, Cold Start में लगने वाला समय, tab switching time जैसे सभी प्रमुख metrics या तो बरकरार रहे या बेहतर हुए.

• पहला ऐप 2013 में लॉन्च हुआ था, और 2017 के आसपास Android/iOS के लिए अलग-अलग छोटे teams थे। लेकिन web developers की तुलना में hiring बहुत कठिन थी, और web platform technologies की प्रगति से मिलने वाली productivity का native platform technologies साथ नहीं दे पा रही थीं। कई असफल प्रयासों के बाद 2018 में यह स्पष्ट हो गया कि mobile platform की iteration speed और growth rate में सुधार जरूरी है.

• Coinbase ने यह फिर से सोचना तय किया कि वह products कैसे बनाता है। प्रमुख features के लिए functional organization में backend के 2 लोग और हर platform (Web, Android, iOS) पर 2 client engineers होते थे, यानी एक vertical के लिए बहुत ज्यादा लोगों की जरूरत पड़ती थी। उन्होंने सोचना शुरू किया कि क्या एक feature team में न्यूनतम developers की संख्या 8 से घटाकर लगभग 5 की जा सकती है, और क्या client developers कई platforms को साथ कवर कर सकते हैं.

• इससे team structure की न्यूनतम आवश्यकताएँ हल्की होने, development अधिक efficient बनने, और client developers के बीच संपर्क बढ़ने की उम्मीद थी। बेशक केवल efficiency पर्याप्त नहीं थी; उनके अनुसार यह निवेश तभी सही ठहरता जब इस प्रक्रिया में customers द्वारा महसूस की जाने वाली performance और quality भी बेहतर होती.

• उस समय पहले से ही React-आधारित एक काफी mature web platform team मौजूद थी। कई cross-platform विकल्पों की समीक्षा के बाद RN चुना गया, क्योंकि यह पहले से उपयोग में मौजूद परिचित technologies पर आधारित था और web व mobile के integration का रास्ता भी साफ दिख रहा था। चूँकि चल रहे native apps का भी migration करना था, इसलिए gradual और बिना झटके वाले migration के लिए कई महीनों तक पहले technical review और strategy planning की गई.

• उन्होंने सोचा कि शुरुआत ऐसे greenfield से करना बेहतर होगा जहाँ RN और native के integration की जरूरत न पड़े। Coinbase के भीतर उन्होंने Pro नाम के उस web product को पहले ऐप के रूप में बनाने का फैसला किया, जो उस समय mobile पर उपलब्ध नहीं था और जिसमें complex तथा performance-sensitive features जैसे real-time price charts और depth chart शामिल थे। उनका मानना था कि अगर Pro को RN में अच्छी तरह बनाया जा सकता है, तो बाकी features — जो कम complex हैं और जिनकी performance requirements भी कम सख्त हैं — उन्हें भी आसानी से migrate किया जा सकेगा.

• इसके बाद Pro और मौजूदा ऐप द्वारा साझा किए जाने वाले onboarding flow को RN में implement करके मौजूदा native ऐप में जोड़ा गया। कई service regions होने की वजह से onboarding हिस्सा ऐप के सबसे जटिल भागों में से एक था, इसलिए पहले उसमें बदलाव करना बहुत कठिन था। उम्मीद थी कि Pro में इसे नया बनाते समय मौजूदा ऐप का refactoring भी साथ हो जाएगा.

• अंत में, पिछले दो चरणों से मिली समझ और अनुभव के आधार पर मौजूदा native ऐप को RN में फिर से लिखा गया। शुरुआत में योजना बनाते समय यह तय नहीं था कि यह full rewrite होगा या native ऐप में धीरे-धीरे RN का अनुपात बढ़ाया जाएगा; यह फैसला पहले दो चरणों के परिणामों के आधार पर करना था.

• strategy तय करने के बाद अक्टूबर 2019 में Pro mobile ऐप लॉन्च किया गया, और परिणाम उम्मीद से बेहतर रहे। business outcomes भी अच्छे थे, performance समस्याओं वाले हिस्सों और उनके समाधानों के बारे में सीख मिली, RN द्वारा दी जाने वाली productivity से वे बहुत संतुष्ट थे, और यह भी साबित हुआ कि web engineers कम समय में RN पर productive हो सकते हैं.

• उत्साहित होकर onboarding flow का rewrite भी शुरू किया गया, और यहाँ भी business तथा app quality दोनों लक्ष्यों को हासिल किया गया.

onboarding flow के rewrite के नतीजे अच्छे थे, लेकिन यह समझ में आया कि मौजूदा ऐप में RN को जोड़ना कठिन है.

केवल web या केवल native पर काम करने की तुलना में productivity भी बेहतर नहीं थी, इसलिए दोनों ओर से ऐसे engineers सामने आए जिनका सवाल था, ‘अगर ऐसा ही है तो RN क्यों इस्तेमाल करें?’ (यह Airbnb के मामले से बहुत मिलता-जुलता था, और वास्तव में Airbnb engineers से बात करते हुए काफी कुछ सीखा गया.)

• नतीजतन, इन सीखों के आधार पर यह निष्कर्ष निकाला गया कि native और RN को साथ लेकर चलने वाला brownfield approach ही सभी समस्याओं की जड़ है, और मौजूदा पूरे ऐप को RN में फिर से लिखने का निर्णय लिया गया.

• दोनों platforms में Android ऐप का migration performance, productivity और अन्य पहलुओं में अधिक कठिन लग रहा था, इसलिए Android को पहले rewrite target के रूप में चुना गया। पिछले अनुभवों के आधार पर full rewrite में लगभग 6 महीने लगने का अनुमान था, लेकिन उनसे उम्मीद थी कि इसके लाभ लागत से अधिक होंगे.

• मार्च 2020 में Android ऐप का rewrite शुरू किया गया और वास्तव में इसमें लगभग 6 महीने लगे। इसके बाद iOS rewrite जनवरी 2021 में पूरा हुआ। दोनों platforms पर मुख्य metrics में अच्छे परिणाम मिले.

• 2020 के मध्य में Coinbase में 18 iOS engineers और 7 Android engineers थे। मई 2021 तक Coinbase के RN repository में 113 contributors थे, जिनमें कई web engineers भी शामिल थे जो पहले mobile में योगदान नहीं कर सकते थे.

• native engineers को RN engineers में बदलने के लिए training काफी कम friction के साथ पूरी हुई, और native background वाले engineers फिलहाल RN ऐप पर उच्च प्रदर्शन कर रहे हैं। अभी यह पूरी तरह आदर्श नहीं है, लेकिन शुरुआती उम्मीद के अनुरूप हर feature organization में एक ‘client team’ सभी client platforms को कवर करने की दिशा में बढ़ रही है.

• पहले तीन platforms (React, iOS, Android) थे, जो अब दो (React, RN) रह गए हैं, लेकिन अगला कदम इसे 1.5 तक लाने का है। web और RN के बीच साझा design system, GraphQL-आधारित common data layer, और infrastructure tooling जैसी चीज़ें साझा करने की योजना है। उनका लक्ष्य ऐसा setup बनाना है जिसमें एक engineer कम से कम context switching के साथ web और mobile दोनों platforms पर features deploy कर सके.

• आगे RN से जुड़े और भी articles साझा किए जाएंगे, जिनमें technical challenges और उस प्रक्रिया से मिली सीख शामिल होंगी.

[budlebee]

मुझे Laftel के RN अपनाने का अनुभव याद आ रहा है.

https://ridicorp.com/story/react-native-1year-review/

[xguru]

यह हमारे यहाँ की कंपनियों के लिए भी काफी मददगार लगने वाला लेख है। संक्षिप्त अनुवाद के लिए धन्यवाद!