Shopify के 5 वर्षों के React Native उपयोग का अनुभव

• Shopify ने 5 साल पहले React Native(RN) को mobile development का भविष्य घोषित करने के बाद, अपने सभी ऐप्स को सफलतापूर्वक RN में परिवर्तित कर दिया
• React Native अपनाने के मुख्य कारण
  • एक बार लिखो, दो प्लेटफ़ॉर्म पर चलाओ: iOS और Android पर एक ही फीचर को दो बार विकसित करने की अक्षम्यता को खत्म करने के लिए
  • टैलेंट मोबिलिटी में सुधार: डेवलपर्स iOS, Android और Web के बीच स्वतंत्र रूप से काम कर सकें
  • ज़्यादा value देना: फीचर parity बनाए रखने में लगने वाला समय कम करके यूज़र्स तक ज़्यादा value पहुँचाना
• परिवर्तन के सफल परिणाम
  • एक ही फीचर को दो बार विकसित न करना पड़ने से productivity में बड़ा सुधार हुआ
  • इंजीनियर Web और mobile दोनों संभालने लगे, जिससे वही workforce अधिक काम कर सकी और नए growth अवसर बने
  • iOS और Android के बीच फीचर parity बनाए रखना अब समस्या नहीं रहा, इसलिए ज़्यादा value देना संभव हुआ
  • ऐप की screen load time 500ms से कम रही, और 99.9% से अधिक sessions स्थिर रहे
  • काम के लिए सबसे उपयुक्त tool के रूप में native code का उपयोग जारी रखते हुए, दोनों दुनियाओं के फायदे लिए जा रहे हैं

प्रमुख सीख

React Native ऐप्स तेज़ हैं

• Shopify performance को बहुत गंभीरता से लेता है, और CEO Tobi Lutke इस बात पर ज़ोर देते हैं: "हर तेज़ software महान नहीं होता, लेकिन हर महान software तेज़ होता है"
• React Native(RN) में बदलाव से पहले सबसे बड़ा सवाल यह था कि क्या RN performance goals को पूरा कर पाएगा
  • इसलिए migration का फैसला लेने से पहले व्यापक prototyping के जरिए इसकी व्यवहार्यता की पुष्टि की गई
  • Meta द्वारा performance bottlenecks हटाने के लिए चल रहे काम की समीक्षा की गई, और lists जैसे क्षेत्रों में योगदान के अवसर पहचाने गए
  • यह मानते हुए कि RN जल्दी ही और तेज़ होगा, इसे पूरी तरह अपनाने का फैसला किया गया
• 5 साल बाद, RN ऐप्स तेज़ चल रहे हैं, और Shopify ऐप में 500ms से कम(P75) screen load time हासिल किया गया
  • इसी तरह के performance goals अन्य सभी ऐप्स में भी सफलतापूर्वक हासिल किए गए
  • performance bottlenecks हटाने के लिए अच्छे patterns और techniques अपनाना आवश्यक है
• यह ज़रूरी नहीं कि native हमेशा तेज़ हो, और यह भी नहीं कि RN हमेशा धीमा हो
  • पिछले कुछ वर्षों में RN ने काफ़ी प्रगति की है और अब यह world-class ऐप्स बनाने का platform बन चुका है
• जैसे-जैसे RN framework mature होगा, तेज़ ऐप्स बनाना और आसान होने की उम्मीद है
  • टीम की expertise बढ़ने के साथ बेहतर ऐप्स बनाने की गुंजाइश भी बढ़ेगी

hot reloading के फायदे

• React Native(RN) का hot reloading development environment में क्रांतिकारी बदलाव लाने वाला feature रहा, क्योंकि changes तुरंत दिखाई देते हैं
• native development की सबसे बड़ी समस्याओं में से एक यह थी कि codebase के आकार के अनुसार छोटे बदलावों को भी compile करके emulator या वास्तविक device पर चलाने में कई मिनट लग जाते थे
• इससे समय बर्बाद होता था और डेवलपर का workflow टूट जाता था
• RN का hot reloading इन समस्याओं को लगभग पूरी तरह हल कर देता है, जिससे productivity और developer experience में बड़ा सुधार होता है

TypeScript से टैलेंट मोबिलिटी

• TypeScript के व्यापक उपयोग से React web और React Native(RN) के बीच डेवलपर्स का आना-जाना आसान हुआ
  • Web developers: RN के जरिए native iOS और Android development की तुलना में mobile पर काम शुरू करना कहीं आसान हो गया
  • Mobile developers: RN के जरिए web कार्य में आसानी से भाग ले सकते हैं
• टैलेंट मोबिलिटी के फायदे
  • इंजीनियर्स को अधिक growth opportunities मिलती हैं और staffing flexibility बढ़ती है
  • वही development workforce ज़्यादा काम कर सकती है
  • web और mobile के बीच code sharing से अधिक efficiency और productivity पैदा होती है
• कई platforms पर काम कर सकने वाले डेवलपर्स तेज़ shipping संभव बनाते हैं, और technologies के बीच ideas का आदान-प्रदान कर उन्हें नए तरीकों से लागू कर सकते हैं
• यह culture बनती है कि technology एक tool है, जिससे टीम का दृष्टिकोण व्यापक होता है और काम के लिए सबसे सही tool चुनने की प्रेरणा मिलती है

native developers आवश्यक हैं

• iOS और Android में विशेषज्ञ mobile engineers शानदार mobile apps बनाने के लिए अनिवार्य हैं
• कई mobile products बनाते हुए जमा हुआ अनुभव, usability और conventions की गहरी समझ का कोई विकल्प नहीं है
• platform layer तक पहुँचना, bindings लिखना, build और deployment में mastery हासिल करना, और React Native versions के updates को संभालना—इन सबके लिए native expertise चाहिए
• native developers अलग-अलग device models पर app performance optimize करते हैं और सभी users को consistent experience देते हैं
• iOS और Android की नई features, APIs, tooling changes के साथ तालमेल बैठाने और React Native version updates संभालने में भी उनकी भूमिका आवश्यक है
• native mobile developers के लिए React Native training course विकसित किया गया:
  • self-learning format में तैयार, ताकि वे production-grade code लिख सकें
  • React Native में निपुण डेवलपर्स द्वारा Q&A sessions, pair programming और code review के माध्यम से अतिरिक्त सहायता
• web developers(JavaScript, TypeScript, React experts) को mobile teams में जोड़ा गया:
  • native और React Native के बीच मजबूत expertise का संतुलन बनाया गया
  • समय के साथ पूरी टीम का skill level बेहतर हुआ
• native और web developers का संतुलित team composition, React Native के साथ शानदार mobile apps बनाने की कुंजी है

native code आवश्यक है

• 100% React Native उपयोग से बचना चाहिए: RN ऐसा efficient tool है जिसमें अधिकांश features एक बार बनाकर काम चल सकता है, लेकिन यह हर स्थिति के लिए सही technology नहीं है
• जिन मामलों में native code चाहिए
  • advanced features development: 2D/3D scanning और on-device AI models चलाने जैसे hardware-आधारित features
  • memory-constrained features: home और lock screen widgets, Apple Watch apps और complications, App Intents, Siri Shortcuts आदि
  • लंबे समय तक चलने वाले background tasks:
    • उदाहरण: Shopify का Point of Sale app background में बड़े पैमाने पर data download और sync करता है, ताकि offline स्थिति में भी transactions process हो सकें
    • native code का उपयोग करके background work पूरी तरह offload किया गया, ताकि app performance पर असर न पड़े
• RN अधिकांश features एक बार विकसित करने के लिए उपयुक्त है, लेकिन जहाँ native सबसे अच्छा काम करता है, वहाँ native code का उपयोग करना आदर्श है
• RN द्वारा default रूप से दी गई native के साथ मजबूत interoperability, दोनों technologies को साथ में इस्तेमाल करना आसान बनाती है
• इसे RN ‘या’ native का संबंध नहीं, बल्कि RN ‘और’ native का संबंध समझना ज़रूरी है
• native expertise वाली team composition इस संतुलन को प्रभावी रूप से लागू करने के लिए आवश्यक है

debugging की कठिनाई

• React Native(RN) में debugging कुछ हद तक अस्थिर रही है, और VSCode में इसे सही तरह सेट करने के लिए अतिरिक्त काम करना पड़ता है
• iOS और Android default रूप से शक्तिशाली और स्थिर debugging features देते हैं
• Meta ने हाल ही में RN के debugger stack को पूरी तरह rewrite किया है, और नया debugger आशाजनक नतीजे दिखा रहा है
• Shopify, Meta के साथ मिलकर RN debugging environment को world-class स्तर तक ले जाने पर काम कर रहा है

React Native updates seamless नहीं हैं

• React Native(RN) के नए versions में apps को update करना काफी मेहनत मांगता है, और अक्सर codebase restructuring की आवश्यकता होती है
• इसे संभालने के लिए Shopify ने छोटा rotating developer group बनाया, जो update work को समर्पित रूप से संभाले, ताकि बाकी teams feature development पर ध्यान दे सकें
• उम्मीद है कि RN framework mature होने के साथ update process धीरे-धीरे आसान होगी
• New Architecture के व्यापक adoption से update-related complexity घटने की उम्मीद है

third-party libraries पर बढ़ती निर्भरता

• React Native(RN) framework, native की तुलना में उतना व्यापक नहीं है, इसलिए ज़्यादा third-party libraries का उपयोग करना पड़ता है
• पिछले कुछ वर्षों में ecosystem mature होने से, लगभग हर ज़रूरी feature के लिए अच्छी तरह maintained libraries आसानी से मिल जाती हैं
• लेकिन third-party libraries को लगातार update रखना पड़ता है, और supply-chain attacks की surface area भी बढ़ती है
• Shopify ने Dependabot का उपयोग करके automated dependency updates अपनाए
  • automated code scanning के जरिए malicious code की पहचान और रोकथाम की जाती है
• उम्मीद है कि RN framework आगे और स्पष्ट दिशा के साथ विकसित होगा और default रूप से अधिक features उपलब्ध कराएगा

shared foundation के उपयोग से बड़े फायदे

• जब React Native(RN) पहली बार अपनाया गया, तब RN के साथ mobile apps बनाने का अनुभव सीमित था, और native development से बनी shared foundation का भी लाभ नहीं लिया जा सकता था
• शुरुआत में हर team अपने-अपने तरीके से समस्याएँ हल करते हुए app बनाती थी, जो तेज़ी से शुरू करने और apps migrate करने में प्रभावी था
  • लेकिन हर team समान समस्याओं को बार-बार हल कर रही थी, जिससे inefficient duplication हुआ
  • RN expertise बनाने के लिए समय और मेहनत निवेश की गई, और speed को प्राथमिकता देते हुए consistency से समझौता करने का trade-off जानबूझकर चुना गया
• 2023 के बाद सभी apps mature होने लगे, तो consistency को मजबूत करना शुरू किया गया
  • common components(जैसे Identity, real-time monitoring, performance measurement आदि) को shared libraries में निकाला गया और सभी apps में उपयोग किया गया
  • इससे teams पहले से हल की गई समस्याओं को दोबारा हल करने के बजाय मौजूदा solutions का उपयोग कर सकीं
• 2025 में code sharing को और बढ़ाया जाएगा, ताकि
  • teams के बीच knowledge और expertise का प्रसार हो
  • shared components में सुधार का लाभ सभी apps को अपने-आप मिले
  • engineering resources बचें और user value देने वाले काम पर ज़्यादा ध्यान दिया जा सके

React Native का भविष्य

• React Native(RN) का भविष्य उज्ज्वल है, और Meta इस project का उत्कृष्ट steward बना हुआ है तथा नियमित सुधार दे रहा है
• हर release में developer feedback roadmap पर स्पष्ट रूप से दिखाई देता है, और तेज़ apps बनाना लगातार आसान होने की उम्मीद है
• Shopify New Architecture को अपनाते हुए RN की प्रगति को लगातार support करने की योजना रखता है
• Microsoft, Amazon, Tesla, SpaceX, Coinbase जैसी कई प्रमुख कंपनियाँ RN का उपयोग कर रही हैं, और उच्च गुणवत्ता वाली third-party libraries तथा frameworks लगातार जारी हो रहे हैं
• Shopify निम्न तरीकों से open web, open source, open standards में योगदान दे रहा है
  • RN में code contributions
  • RN releases में co-release captain की भूमिका
  • React Native Skia, Reanimated जैसे high-impact open source projects को support
  • Flashlist, Restyle, Tophat जैसे open source projects को public करना
• इसके अतिरिक्त, 2025 में React Native Working Group को फिर से शुरू किया गया
  • लक्ष्य है RN को support करने वाले संगठनों के प्रमुख leaders को साथ लाकर ecosystem की मुख्य चुनौतियों की पहचान करना, investment priorities तय करना, collaboration बढ़ाना और duplicate work कम करना
  • पहले भाग लेने वाली कंपनियाँ: Meta, Twitter, Coinbase, Microsoft आदि
  • भाग लेना चाहें तो संपर्क करें
• पिछले 5 वर्षों में RN ने बहुत प्रगति की है, और adoption को लेकर जो कई सीमाएँ पहले चिंता का कारण थीं, वे अब काफी हद तक समाप्त हो चुकी हैं
• अगर आपने कुछ समय से RN का उपयोग नहीं किया है, तो अब RN को फिर से आज़माने का सही समय है

[firea32]

हमने भी लगभग उसी समय और लगभग उन्हीं कारणों से RN अपनाया था, और इसे अच्छी तरह इस्तेमाल कर रहे हैं.
परफॉर्मेंस इश्यू वाली बात से थोड़ा सहमत होना मुश्किल है, लेकिन वह शायद react-dom लेवल पर हल की जाने वाली समस्या होगी.
कम लोगों के साथ बहुत सारा काम कर पाना इसका सबसे बड़ा फ़ायदा लगता है.

[wkang586]

जिज्ञासा है कि RN के Native API से कवर न हो पाने वाले कौन-से native फ़ीचर हैं।

[tsboard]

यह एक प्रभावशाली अनुभव साझा करना है। अभी मैं काम के तौर पर Kotlin का उपयोग करके Android app development कर रहा हूँ, लेकिन कभी-कभी सोचता हूँ। क्या सच में native पर जाना ज़रूरी है...? (मेरे मामले में platform के साथ क़रीबी तौर पर काम करने वाली चीज़ें थीं, इसलिए मजबूरी में native चुनना पड़ा) अगर संभव हो, तो React Native या Flutter जैसे cross-platform support वाले रास्ते पर जाना भी अच्छा विकल्प लग सकता है.

[techtech]

Shopify कमाल है @.@

[felizgeek]

"100% React Native should be an anti-goal. It is great for building features just once, but is not the right technology for everything."
"native या React Native में से एक चुनने के बजाय, native और React Native — दोनों के बारे में सोचें."

इंजीनियरिंग में 100% जैसी कोई चीज़ नहीं होती ("हर हाल में A बेहतर है" जैसी clickbait हेडलाइन से सावधान रहें).
हर विकल्प के अपने फायदे-नुकसान होते हैं, और हर स्थिति के लिए अलग tool सही होता है.
इसमें Shopify टीम की team-building philosophy की झलक भी मिलती है, इसलिए यह बहुत अच्छा लेख है.

[treestae]

फिर भी मैं Flutter की ही तारीफ़ करूँगा।

[mhj5730]

RN में सारे ऐप्स माइग्रेट कर दिए... कमाल है, wow wow

[genog]

@shopify/flash-list कमाल का है। धन्यवाद। shopify

[eajrezz]

Shopify, Ruby on Rails ecosystem में भी एक अहम भूमिका निभाता है,
और RN ecosystem में भी इसकी प्रगति काफ़ी शानदार दिख रही है। यह सच में एक बेहतरीन कंपनी है।