React Native में 0.76 से New Architecture लागू

 (reactnative.dev)
5 पॉइंट द्वारा GN⁺ 2024-10-26 | 6 टिप्पणियां | WhatsApp पर शेयर करें
  • React Native 0.76 वर्ज़न npm पर जारी कर दिया गया है। इस वर्ज़न में नई आर्किटेक्चर डिफ़ॉल्ट रूप से शामिल है और यह नवीनतम React फीचर्स को पूरी तरह सपोर्ट करती है।
  • नई आर्किटेक्चर Suspense, Transitions, automatic batching, useLayoutEffect जैसे फीचर्स को सपोर्ट करती है, और नए native module तथा component system को पेश करती है, जिससे type-safe कोड लिखना संभव होता है।
  • यह 2018 से React Native को बुनियादी स्तर पर फिर से लिखने का परिणाम है, और इसे इस तरह डिज़ाइन किया गया है कि अधिकांश ऐप्स धीरे-धीरे नई आर्किटेक्चर पर स्विच कर सकें।
  • React Native 0.76 को अधिकांश ऐप्स पहले जैसी ही मेहनत में अपना सकते हैं, और लोकप्रिय लाइब्रेरीज़ पहले से नई आर्किटेक्चर को सपोर्ट करती हैं।

नई आर्किटेक्चर क्या है?

  • नई आर्किटेक्चर React Native के मुख्य सिस्टम्स का पूर्ण पुनर्लेखन है, जिसमें component rendering, JavaScript और native abstraction के बीच संचार, और threads के बीच काम scheduling करने का तरीका शामिल है।
  • पुरानी आर्किटेक्चर asynchronous bridge के ज़रिए native platform से संवाद करती थी, लेकिन नई आर्किटेक्चर को synchronous और asynchronous दोनों तरह के updates सपोर्ट करने के लिए डिज़ाइन किया गया है।
  • नई आर्किटेक्चर चार मुख्य हिस्सों से बनी है: native module system, नया renderer, event loop, और bridge removal।

नए native modules

  • C++ में लिखे गए हैं और नए फीचर्स प्रदान करते हैं
    • native runtime के साथ synchronous communication संभव
    • JavaScript और native code के बीच type safety प्रदान
    • platforms के बीच code sharing संभव
    • डिफ़ॉल्ट रूप से lazy module loading प्रदान
  • JavaScript/TypeScript API से C++ native implementation की सभी क्षमताओं का उपयोग संभव
  • Codegen के साथ मज़बूत type contracts परिभाषित किए जा सकते हैं
  • modules केवल ज़रूरत पड़ने पर memory में लोड होते हैं, जिससे app startup time कम होता है

नया renderer

  • C++ में फिर से लिखा गया है, जिससे ये फ़ायदे मिलते हैं:
    • अलग-अलग threads पर अलग priorities के साथ updates render किए जा सकते हैं
    • दूसरे thread से synchronous तरीके से layout पढ़ा जा सकता है
    • सभी platforms पर साझा C++ code
  • अब view hierarchy को immutable tree structure में स्टोर किया जाता है
    • thread-safe updates संभालना संभव
    • user interface के अलग-अलग versions को दर्शाने वाले कई in-progress trees को संभालना संभव
  • low-priority updates को रोककर user input जैसे urgent काम पहले render किए जा सकते हैं, और फिर low-priority updates दोबारा शुरू किए जा सकते हैं

event loop

  • नई आर्किटेक्चर एक स्पष्ट event loop handling model लागू करती है, जिससे React DOM और React Native के बीच का अंतर कम होता है।
    • JavaScript thread पर tasks प्रोसेस करने के लिए एक अच्छी तरह परिभाषित event loop processing model लागू किया गया है
  • event loop updates और events को अनुमानित तरीके से क्रमबद्ध करता है, जिससे low-priority updates को urgent user events के लिए रोका जा सकता है।
  • web standards के साथ बेहतर तालमेल
  • भविष्य में और अधिक browser features की नींव बनेगा

bridge removal

  • नई आर्किटेक्चर bridge को हटाकर JavaScript और native code के बीच सीधा और अधिक कुशल संचार संभव बनाती है।
  • bridge हटने से startup time बेहतर होता है, undefined behavior से होने वाले crashes कम होते हैं, और error reporting तथा debugging आसान हो जाती है।

नए फीचर्स

  • Transitions
    • React 18 की नई अवधारणा Transitions urgent updates और non-urgent updates के बीच अंतर करती है।
    • urgent updates को तुरंत प्रतिक्रिया चाहिए होती है, जबकि Transitions updates UI को एक view से दूसरे view में ले जाते हैं।
  • Automatic batching अधिक state updates को एक साथ batch करता है, जिससे intermediate state rendering से बचा जा सकता है और React Native तेज़ व बिना latency के चलता है।
  • नई आर्किटेक्चर useLayoutEffect के ज़रिए layout information को synchronous रूप से पढ़ने और उसी frame में UI को update करने का सपोर्ट देती है।
  • नई आर्किटेक्चर React 18 में पेश किए गए Suspense को पूरी तरह सपोर्ट करती है, जिससे loading state संभालना और user input को उच्च priority देना संभव होता है।

अपग्रेड कैसे करें

  • 0.76 पर अपग्रेड करते समय, अधिकांश ऐप्स के लिए यह दूसरे releases जितनी ही मेहनत में संभव है, क्योंकि interop layer मदद करती है
  • लेकिन New Architecture और concurrent फीचर्स का पूरा लाभ लेने के लिए custom native modules और components को migrate करना होगा
  • ऐप डेवलपर्स के लिए
    • libraries, custom native components और custom native modules को New Architecture का पूरा सपोर्ट देने के लिए अपग्रेड करना ज़रूरी है
    • अधिकांश लोकप्रिय React Native libraries को New Architecture सपोर्ट देने के लिए सहयोग किया गया है
  • लाइब्रेरी maintainers के लिए, libraries को नए native modules और component API पर migrate करने की सिफारिश की जाती है

GN⁺ की टिप्पणी

  • New Architecture की ओर यह बदलाव React Native डेवलपमेंट में एक महत्वपूर्ण मील का पत्थर लगता है। synchronous/asynchronous दोनों तरह के updates संभव होंगे, bridge bottleneck दूर होगा, और layout को दूसरे thread से पढ़ा जा सकेगा, जिससे performance और user experience दोनों में कई सुधार दिख सकते हैं
  • खास तौर पर React 18 के Concurrent फीचर्स का पूरा सपोर्ट मिलना ध्यान देने योग्य है। Suspense, Transition आदि का उपयोग करके और अधिक responsive तथा स्वाभाविक UX बनाया जा सकेगा
  • हालांकि, मौजूदा ऐप्स और libraries को New Architecture का पूरा सपोर्ट देने के लिए migration की ज़रूरत होगी। यह काम चरणबद्ध तरीके से करना पड़ेगा, लेकिन migration पूरा होने पर New Architecture के फ़ायदे अच्छी तरह मिल सकेंगे
  • यह आर्किटेक्चर Meta के Facebook ऐप और Instagram ऐप में पहले से इस्तेमाल हो रही है, और Expensify, Kraken, BlueSky जैसी सफल मिसालें मौजूद हैं
  • कुल मिलाकर, New Architecture React Native के भविष्य के लिए एक बड़ी प्रगति लगती है। उम्मीद है कि community के सहयोग से यह अच्छी तरह स्थापित होगी

संबंधित पढ़ाई

6 टिप्पणियां

 
codemonkey 2024-10-28

मुझे लगता है कि पहली बार React Native के बारे में सुने हुए भी बहुत समय हो गया है। यह Facebook से शुरू हुआ था, फिर भी अभी तक 1 version तक नहीं पहुँचा, यह बात उलटे और भी हैरान करती है..
 
dongwon 2024-10-26

मैंने कभी RN इस्तेमाल नहीं किया है, इसलिए जिज्ञासा है; अंदाज़ से लगता है कि यह Android के लिए optimized होगा, लेकिन वास्तव में iOS पर performance बेहतर आती है, यह काफ़ी दिलचस्प है।
 
hilft 2024-10-27

हमारी तरफ़ के लगभग सभी crash शायद Android पर ही आते हैं।
 
nemorize 2024-10-26

Android पर यह बेहद भयानक है... सच में भयानक स्तर का है..
 
yangeok 2024-10-26

लगता है Hermes में engine बदले ज़्यादा समय भी नहीं हुआ था, और अब फिर से सब कुछ बदल दिया गया है।
 
GN⁺ 2024-10-26
Hacker News राय

  • React Native ऐप्स और backend API को 4 साल तक डेवलप करने का अनुभव है, और Expo पर माइग्रेट करने से कई समस्याएँ हल हुईं, लेकिन अभी भी bugs मौजूद हैं। iOS, Android की तुलना में ज़्यादा stable है और performance भी बेहतर है। React Native सीखना आसान है और इसका JS ecosystem बड़ा है, इसलिए इसकी सिफारिश की जा सकती है, लेकिन फिलहाल Flutter इस्तेमाल कर रहा हूँ

  • React Native को लेकर अलग-अलग राय हैं; कुछ लोग Expo से असंतुष्ट हैं और Kotlin Multiplatform की सिफारिश करते हैं। यह भी राय है कि Hacker News पर चर्चा धीरे-धीरे निरर्थक होती जा रही है

  • Flutter डेवलपर के रूप में मुझे लगता है कि Swift UI और Compose mobile development के लिए अधिक उपयुक्त हैं, और नया ऐप शुरू करते समय मैं Flutter या React Native का उपयोग नहीं करूँगा

  • React Native, iOS पर ठीक है लेकिन Android पर धीमा है। Hermes दिलचस्प है, लेकिन अभी भी बहुत सारे polyfills की ज़रूरत है। उस दिन का इंतज़ार है जब web, React Native की जगह ले लेगा

  • Expo/RN का उपयोग करके Bluesky डेवलप किया जा रहा है, और नई architecture पर शुरुआती tests में Android performance बेहतर हुई है

  • Expo के साथ React Native इस्तेमाल करते हुए सकारात्मक अनुभव रहा है, और solo developer के रूप में RN ने बहुत कुछ संभव बनाया है। नई architecture का इंतज़ार है

  • Flutter की rendering speed, React Native से 5 गुना तेज़ है, और web पर React इस्तेमाल करने पर speed और तेज़ होती है

  • Capacitor, NextJS webapp पोर्टिंग में उपयोगी है, ऐसा एक ट्वीट देखा

  • React Native इस साल काफ़ी बेहतर हुआ है, और react-strict-dom तैयार होने पर बड़ा बदलाव आएगा