ReactReact का उपयोग करके रिएक्शन एप्लीकेशन डेवलपमेंट

क्या आप उपयोगकर्ता इंटरफ़ेस बनाने के लिए React का उपयोग करते हैं? सामग्री के लेखक, जिसका अनुवाद हम प्रकाशित करते हैं, कहते हैं कि वह रिएक्ट के साथ भी काम करता है। यहां वह इस बारे में बात करना चाहता है कि रीएएमएमएल रिएक्ट एप्लिकेशन के लिए क्यों लिखने लायक है।



प्रतिक्रिया एक बहुत अच्छा इंटरफ़ेस विकास उपकरण है। क्या आप इसे और बेहतर बना सकते हैं? रिएक्ट के साथ अपने काम को बेहतर बनाने के लिए, आपको सबसे पहले इसकी मुख्य समस्याओं को समझना होगा। विशेष रूप से, एक समस्या जिसका मूल इस तथ्य में निहित है कि रिएक्ट एक जावास्क्रिप्ट पुस्तकालय है।

प्रतिक्रिया और जावास्क्रिप्ट

यदि आप रिएक्ट को करीब से देखते हैं, तो आप देखेंगे कि इस पुस्तकालय में अंतर्निहित कुछ सिद्धांत जावास्क्रिप्ट से अलग हैं। विशेष रूप से, हम अपरिवर्तनीयता, कार्यात्मक प्रोग्रामिंग के सिद्धांतों के बारे में और प्रकार प्रणाली के बारे में बात कर रहे हैं।

प्रतिरक्षा, प्रतिक्रिया के मूल सिद्धांतों में से एक है। घटकों या किसी अनुप्रयोग की स्थिति में उत्परिवर्तन अत्यधिक अवांछनीय हैं, क्योंकि इससे अप्रत्याशित परिणाम हो सकते हैं। प्रतिरक्षा प्रदान करने के लिए जावास्क्रिप्ट में कोई मानक तंत्र नहीं है। डेटा संरचनाओं को कुछ सम्मेलनों का पालन करके या अपरिवर्तनीय-जेएस जैसे पुस्तकालयों का उपयोग करके या तो अपरिवर्तनीय बनाया जाता है।

रिएक्ट लाइब्रेरी कार्यात्मक प्रोग्रामिंग के सिद्धांतों पर आधारित है, क्योंकि रिएक्ट एप्लिकेशन कार्यों की रचनाएं हैं। यद्यपि जावास्क्रिप्ट में कुछ कार्यात्मक प्रोग्रामिंग विशेषताएं हैं, जैसे कि प्रथम श्रेणी के कार्य, यह एक कार्यात्मक प्रोग्रामिंग भाषा नहीं है। यदि आपको जावास्क्रिप्ट में अच्छा घोषणात्मक कोड लिखने की आवश्यकता है, तो आपको तीसरे पक्ष के पुस्तकालयों जैसे लोदश / एफपी या रमदा का सहारा लेना होगा ।

प्रकार प्रणाली में क्या गलत है? रिएक्ट में PropTypes की अवधारणा है। इसका उपयोग जावास्क्रिप्ट में प्रकारों को अनुकरण करने के लिए किया जाता है, क्योंकि यह भाषा स्वयं सांख्यिकीय रूप से टाइप नहीं की जाती है। जेएस में स्थैतिक टाइपिंग का लाभ लेने के लिए, आपको फिर से तीसरे पक्ष के उपकरण जैसे कि फ्लो और टाइपस्क्रिप्ट का सहारा लेना होगा ।


रिएक्ट और जावास्क्रिप्ट की तुलना करें

जैसा कि आप देख सकते हैं, जावास्क्रिप्ट प्रतिक्रिया के मूल सिद्धांतों के अनुकूल नहीं है।

क्या कोई प्रोग्रामिंग भाषा है जो जावास्क्रिप्ट के साथ प्रतिक्रिया के अनुरूप है?
आप इस प्रश्न का सकारात्मक उत्तर दे सकते हैं। यह भाषा ReasonML है ।

कारण अपरिवर्तनीयता को लागू करता है। चूंकि यह एक कार्यात्मक प्रोग्रामिंग भाषा OCaml पर आधारित है, इसलिए संबंधित विशेषताओं को भी कारण बनाया गया है। इस भाषा की भी अपनी प्रकार की प्रणाली प्रतिक्रिया के लिए उपयुक्त है।


प्रतिक्रिया, जावास्क्रिप्ट और कारण की तुलना करें

यह पता चलता है कि रीज़न के मूल सिद्धांतों के साथ रीज़न संगत है।

कारण

कारण कोई नई भाषा नहीं है। यह एक वैकल्पिक प्रोग्रामिंग भाषा ओमेक्एल के लिए जावास्क्रिप्ट-जैसे सिंटैक्स और टूलकिट है, जो लगभग 20 वर्षों से है। कारण फेसबुक के डेवलपर्स द्वारा बनाया गया था जो पहले से ही अपनी परियोजनाओं ( फ्लो , इनफर ) में OCaml का उपयोग करते थे।


OCaml

रीजन के सी-जैसे सिंटैक्स ओकेएमएल को उन प्रोग्रामर्स के लिए उपलब्ध कराता है जो जावास्क्रिप्ट या जावा जैसी सामान्य भाषाओं से परिचित हैं। कारण डेवलपर को OCaml की तुलना में बेहतर प्रलेखन देता है, और उत्साही लोगों के एक बढ़ते समुदाय ने उसके चारों ओर गठन किया है। इसके अलावा, कारण में जो लिखा गया है वह मौजूदा जेएस परियोजनाओं के साथ एकीकृत करना आसान है।


कारण

कारण का मूल OCaml है। कारण OCaml के समान शब्दार्थ है, केवल वाक्य रचना अलग है। इसका मतलब है कि कारण जावास्क्रिप्ट की तरह सिंटैक्स का उपयोग करके OCaml कोड लिखना संभव बनाता है। नतीजतन, प्रोग्रामर में एक सख्त प्रकार की प्रणाली और पैटर्न मिलान तंत्र के रूप में ऐसी अद्भुत OCaml विशेषताएं हैं।

अपने सिंटैक्स के साथ खुद को परिचित करने के लिए कारण कोड स्निपेट पर एक नज़र डालें।

let fizzbuzz = (i) =>  switch (i mod 3, i mod 5) {  | (0, 0) => "FizzBuzz"  | (0, _) => "Fizz"  | (_, 0) => "Buzz"  | _ => string_of_int(i)  }; for (i in 1 to 100) {  Js.log(fizzbuzz(i)) }; 

हालांकि यह पैटर्न एक पैटर्न मिलान तंत्र का उपयोग करता है, यह जावास्क्रिप्ट के समान है।

ब्राउज़रों में काम करने वाली एकमात्र भाषा जावास्क्रिप्ट है, इसलिए, किसी भी भाषा में ब्राउज़रों के लिए लिखने के लिए, हमें इसे जावास्क्रिप्ट में संकलित करने की आवश्यकता है।

BuckleScript

रीज़न की सबसे दिलचस्प विशेषताओं में से एक को बकलेस्क्रिप्ट कंपाइलर कहा जा सकता है, जो रीज़न में लिखे गए कोड को लेता है और इसे पठनीय और उत्पादक जेएस-कोड में परिवर्तित करता है, इसके अलावा, अप्रयुक्त निर्माणों को अच्छी तरह से साफ़ करता है।


BuckleScript

बकलस्क्रिप्ट के परिणामों की पठनीयता काम में आएगी यदि आप एक ऐसी टीम में काम करते हैं जिसमें हर कोई रीज़न से परिचित नहीं है। ये लोग, कम से कम, परिणामी JS कोड को पढ़ सकेंगे।

कारण कोड कभी-कभी JS कोड के समान होता है ताकि संकलक को इसे बदलने की आवश्यकता न हो। इस स्थिति के साथ, आप रीज़न के स्थिर टाइपिंग के लाभों का आनंद ले सकते हैं और ऐसा कोड लिख सकते हैं जो दिखता है कि यह जावास्क्रिप्ट में लिखा गया है।

यहाँ कोड का एक उदाहरण दिया गया है जो कारण और जावास्क्रिप्ट दोनों में काम करेगा:

 let add = (a, b) => a + b; add(6, 9); 

बकलेस्क्रिप्ट चार पुस्तकालयों के साथ आता है। यह एक मानक पुस्तकालय है जिसे बेल्ट कहा जाता है ( OCaml मानक पुस्तकालय यहाँ पर्याप्त नहीं है), और जावास्क्रिप्ट, Node.js और DOM API के लिए बाइंडिंग।

चूंकि बकलेस्क्रिप्ट OCaml कंपाइलर पर आधारित है, इसलिए संकलन बहुत तेज है - बैबेल की तुलना में बहुत तेज है और टाइपस्क्रिप्ट से कई गुना तेज है।

बकलस्क्रिप्ट का उपयोग करके, हम उपरोक्त कारण कोड टुकड़ा को जावास्क्रिप्ट में fizzbuzz() फ़ंक्शन से संकलित करते हैं।


बकलेस्क्रिप्ट का उपयोग करके जावास्क्रिप्ट में कारण कोड का संकलन

जैसा कि आप देख सकते हैं, जेएस कोड काफी पठनीय निकला। ऐसा लग रहा है मानो किसी आदमी ने लिखा हो।

रीज़न में लिखे गए कार्यक्रमों को न केवल जावास्क्रिप्ट में, बल्कि देशी कोड और बाइट कोड में भी संकलित किया गया है। नतीजतन, उदाहरण के लिए, आप रीज़न पर एक एप्लिकेशन लिख सकते हैं और इसे एक ब्राउज़र में मैकओएस पर चला सकते हैं, एंड्रॉइड और आईओएस चलाने वाले स्मार्टफ़ोन पर। जेरेड फोर्सिथ द्वारा रीज़न पर ग्रेविट्रॉन गेम लिखा गया है। इसे उपरोक्त सभी प्लेटफार्मों पर चलाया जा सकता है।

जावास्क्रिप्ट के साथ बातचीत का संगठन

बकलेस्क्रिप्ट कारण और जावास्क्रिप्ट की बातचीत को व्यवस्थित करना संभव बनाता है। इसका मतलब केवल कारण कोड आधार में काम करने वाले जेएस कोड का उपयोग करने की संभावना नहीं है, बल्कि इस जावास्क्रिप्ट कोड के साथ कारण में लिखे गए कोड की बातचीत की संभावना भी है। नतीजतन, कारण में लिखा कोड मौजूदा जेएस परियोजनाओं में एकीकृत करना आसान है। इसके अलावा, रीजन कोड में आप NPM से जावास्क्रिप्ट पैकेज का उपयोग कर सकते हैं। उदाहरण के लिए, आप एक प्रोजेक्ट बना सकते हैं जो फ्लो, टाइपस्क्रिप्ट और रीज़न को साझा करता है।

हालांकि, सब कुछ इतना सरल नहीं है। कारण में जावास्क्रिप्ट कोड या पुस्तकालयों का उपयोग करने के लिए, आपको पहले रीजन बाइंडिंग का उपयोग करके उन्हें पोर्ट करना होगा। दूसरे शब्दों में, सख्त कारण प्रकार प्रणाली का उपयोग करने के लिए, हमें नियमित जावास्क्रिप्ट कोड के लिए प्रकारों की आवश्यकता होती है।

यदि आपको रीज़न कोड में किसी भी जावास्क्रिप्ट लाइब्रेरी का उपयोग करने की आवश्यकता है, तो आपको पहले रीज़न पैकेज इंडेक्स ( रेडेक्स ) की ओर रुख करना चाहिए और यह पता लगाना चाहिए कि क्या यह लाइब्रेरी पहले ही रीज़न में पोर्ट की गई है। Redex प्रोजेक्ट पुस्तकालयों और रीज़न बाइंडिंग के साथ रीज़न और जावास्क्रिप्ट लाइब्रेरीज़ में लिखे टूल की एक सूची है। यदि आप इस निर्देशिका में आवश्यक लाइब्रेरी खोजने में कामयाब रहे, तो आप इसे एक निर्भरता के रूप में स्थापित कर सकते हैं और इसका उपयोग रीज़न एप्लिकेशन में कर सकते हैं।

यदि आपको वांछित पुस्तकालय नहीं मिल रहा है, तो आपको स्वयं बाइंडरों को लिखना होगा। यदि आप रीज़न के साथ शुरुआत कर रहे हैं, तो ध्यान रखें कि बाइंडर लिखना शुरुआती काम नहीं है। यह उन सबसे कठिन कार्यों में से एक है जिन्हें किसी को रीज़न पर प्रोग्राम करने के लिए हल करना है। वास्तव में, यह एक अलग लेख के लिए एक विषय है।

यदि आपको कुछ जावास्क्रिप्ट लाइब्रेरी की केवल सीमित कार्यक्षमता की आवश्यकता है, तो आपको ऐसी पूरी लाइब्रेरी के लिए बाइंडिंग लिखने की आवश्यकता नहीं है। यह केवल आवश्यक कार्यों या घटकों के लिए किया जा सकता है।

ReasonReact

लेख की शुरुआत में, हमने इस बारे में बात की कि यह रीज़न का उपयोग करके प्रतिक्रियात्मक अनुप्रयोगों को विकसित करने के लिए कैसे समर्पित है। आप इसका कारण ReasonReact लाइब्रेरी से कर सकते हैं।

शायद अब आप सोच रहे हैं: "मुझे अभी भी समझ में नहीं आया कि रीज़न एप्लीकेशन को रीज़न में लिखना क्यों ज़रूरी है।" हालांकि, हमने पहले ही प्रतिक्रिया और कारण बंडल का उपयोग करने के मुख्य कारण पर चर्चा की है, जो यह है कि प्रतिक्रिया जावास्क्रिप्ट के साथ तर्क के साथ बेहतर संगत है। ऐसा क्यों है? बात यह है कि React का निर्माण कारण के आधार पर किया गया था, या बल्कि OCaml पर आधारित था।

पाथ टू रीक्रिएट

पहला रिएक्ट प्रोटोटाइप फेसबुक द्वारा विकसित किया गया था और इसे मानक मेटा लैंग्वेज ( StandardML ) में लिखा गया था, एक ऐसी भाषा में जो OCaml का रिश्तेदार है। तब रिएक्ट OCaml को हस्तांतरित कर दिया गया था, इसके अलावा, प्रतिक्रिया जावास्क्रिप्ट में रखी गई थी। यह इस तथ्य के कारण किया गया था कि पूरे वेब ने जावास्क्रिप्ट का उपयोग किया था और यह संभवत: बयान करने के लिए अनुचित होगा: "अब हम ओईएमएल पर यूआई लिखेंगे"। जावास्क्रिप्ट में रिएक्ट के अनुवाद ने भुगतान किया और इस पुस्तकालय के व्यापक वितरण का नेतृत्व किया।

नतीजतन, हर कोई रिएक्ट को जेएस लाइब्रेरी के रूप में समझने के लिए उपयोग किया जाता है। प्रतिक्रिया, साथ ही साथ अन्य पुस्तकालयों और भाषाओं जैसे एल्म , रिडक्स , रिकॉमपोज , रामदा और प्यूरस्क्रिप्ट ने जावास्क्रिप्ट में प्रोग्रामिंग की कार्यात्मक शैली को लोकप्रिय बनाने में मदद की है। और जावास्क्रिप्ट में फ्लो और टाइपस्क्रिप्ट के प्रसार के लिए धन्यवाद, स्थैतिक टाइपिंग भी लोकप्रिय हो गई है। नतीजतन, स्थैतिक प्रकारों का उपयोग करते हुए कार्यात्मक प्रोग्रामिंग का प्रतिमान सीमांत विकास की दुनिया में प्रभावी हो गया है।

2006 में, ब्लूमबर्ग ने बकलेस्क्रिप्ट कंपाइलर को ओपन सोर्स प्रोजेक्ट्स की श्रेणी में बनाया और स्थानांतरित किया, जो OCaml को जावास्क्रिप्ट में परिवर्तित करता है। इसने उन्हें सख्त OCaml प्रकार प्रणाली का उपयोग करके बेहतर और अधिक सुरक्षित फ्रंट-एंड कोड लिखने की अनुमति दी। उन्होंने अनुकूलित और बहुत तेज़ OCaml कंपाइलर लिया और इसे जावास्क्रिप्ट कोड उत्पन्न किया।

कार्यात्मक प्रोग्रामिंग की लोकप्रियता और बकलेस्क्रिप्ट की रिहाई ने एक आदर्श जलवायु बनाई जिसने फेसबुक को रिएक्ट के मूल विचार पर लौटने की अनुमति दी - एक पुस्तकालय जो मूल रूप से स्टैंडर्डएमएल में लिखा गया था।


ReasonReact

उन्होंने OCaml के शब्दार्थ को जावास्क्रिप्ट सिंटैक्स के साथ मिलाया और कारण बनाया। इसके अलावा, उन्होंने React के लिए एक कारण आवरण बनाया, जो एक ReasonReact पुस्तकालय के रूप में प्रस्तुत किया गया है, जिसमें अतिरिक्त कार्य हैं, जैसे कि राज्य के घटकों में Redux सिद्धांतों का एनकैप्सुलेट करना। ऐसा करने के बाद, वे रिएक्ट को उसके मूल में वापस लाए।

कारण में रिएक्ट फीचर्स के बारे में

जब रिएक्ट लाइब्रेरी का जावास्क्रिप्ट में अनुवाद किया गया था, तो विभिन्न पुस्तकालयों और उपकरणों को बनाकर भाषा की क्षमताओं को रिएक्ट की जरूरतों के लिए अनुकूलित किया गया था। यह दृष्टिकोण, विशेष रूप से, परियोजनाओं के लिए बड़ी संख्या में निर्भरता की आवश्यकता का मतलब है। हम यह नहीं कहेंगे कि इस तरह के पुस्तकालय लगातार विकसित हो रहे हैं, और उनमें नियमित रूप से बदलाव हो रहे हैं, जिससे उनके नए संस्करण पुराने लोगों के साथ असंगत हैं। परिणामस्वरूप, पुस्तकालयों को बनाए रखने के बारे में डेवलपर को बहुत गंभीर और सावधान रहना पड़ता है, जिस पर उसकी परियोजनाएं निर्भर करती हैं।

यह जावास्क्रिप्ट विकास के लिए जटिलता की एक अतिरिक्त परत जोड़ता है। उदाहरण के लिए, एक विशिष्ट रिएक्ट एप्लिकेशन में आमतौर पर कम से कम निर्भरताएं होती हैं जिन्हें निम्न आकृति में देखा जा सकता है।


विशिष्ट प्रतिक्रिया आवेदन निर्भरताएँ

ये कार्य ऐसे हैं जो इन निर्भरताओं को हल करते हैं:

• स्टेटिक टाइपिंग - फ्लो / टाइपस्क्रिप्ट।
• प्रतिरक्षा - ImmutableJS।
• रूटिंग - ReactRouter।
• कोड फ़ॉर्मेटिंग - Prettier।
• अस्तर - ESLint।
• सहायक कार्य - रामदा / लोदश।

अब हम इसका उपयोग करेंगे, प्रतिक्रिया के लिए जावास्क्रिप्ट के बजाय, ReasonReact पुस्तकालय। क्या हमें इस दृष्टिकोण के साथ, इन सभी निर्भरताओं की आवश्यकता है?


ReasonReact पर स्विच करना

उन कार्यों की एक ही सूची का विश्लेषण करने के बाद जो पहले अतिरिक्त टूल का उपयोग करके हल किए गए थे, हमें पता चलता है कि उन सभी को अंतर्निहित ReasonReact टूल्स का उपयोग करके हल किया जा सकता है। आप यहां उनके बारे में अधिक पढ़ सकते हैं।

ReasonReact द्वारा तैयार किए गए एक आवेदन में, इन सभी और कई अन्य निर्भरताओं की आवश्यकता नहीं है। तथ्य यह है कि विकास को सरल बनाने वाली कई सबसे महत्वपूर्ण विशेषताएं पहले से ही भाषा में शामिल हैं। नतीजतन, निर्भरता के साथ काम सरल है, और, जैसे-जैसे आवेदन बढ़ता है और विकसित होता है, यह काम जटिल नहीं हो जाता है।

यह सब OCaml भाषा के उपयोग के लिए संभव है, जो 20 वर्ष से अधिक पुरानी है। यह एक परिपक्व भाषा है, जिसके मूल सिद्धांत और तंत्र समय-परीक्षण और स्थिर हैं।

आगे क्या है?

यदि आप जावास्क्रिप्ट दुनिया से आते हैं, तो कारण के साथ आरंभ करना आसान है क्योंकि इस भाषा का वाक्यविन्यास जावास्क्रिप्ट के समान है। यदि आपने पहले React एप्लीकेशन लिखी हैं, तो रीज़न पर स्विच करना आपके लिए और भी आसान हो जाएगा, क्योंकि जब आप ReasonReact के साथ काम कर रहे हैं, तब आप रिएक्ट के क्षेत्र में अपने सभी ज्ञान का उपयोग कर सकते हैं। ReasonReact के दिल में React के मूल के समान ही विचार मॉडल निहित है, उनके साथ काम करने की प्रक्रिया भी बहुत समान है। इसका मतलब है कि जब आप रीज़न पर जाते हैं तो आपको स्क्रैच से शुरू नहीं करना पड़ता है। आप प्रक्रिया में कारण से निपटेंगे।

अपनी परियोजनाओं में रीज़न का उपयोग शुरू करने का सबसे अच्छा तरीका धीरे-धीरे रीज़न में लिखे अंशों का परिचय देना है। जैसा कि पहले ही उल्लेख किया गया है, जेएस परियोजनाओं में कारण कोड का उपयोग किया जा सकता है, साथ ही जेएस कोड इन रीस प्रोजेक्ट्स में भी इस्तेमाल किया जा सकता है। यह दृष्टिकोण ReasonReact का उपयोग करते समय भी लागू होता है। आप ReasonReact घटक को ले सकते हैं और इसका उपयोग जावास्क्रिप्ट में लिखे गए पारंपरिक रिएक्ट एप्लिकेशन में कर सकते हैं।

यह वास्तव में वृद्धिशील दृष्टिकोण है जिसे फेसबुक के डेवलपर्स द्वारा चुना गया था, जिन्होंने फेसबुक मैसेंजर को विकसित करते समय रीज़न का व्यापक रूप से उपयोग किया था।

यदि आप रीज़न का उपयोग करके एक रिएक्ट एप्लिकेशन लिखना चाहते हैं और व्यवहार में इस भाषा की मूल बातें सीखते हैं, तो इस सामग्री पर एक नज़र डालें, जहाँ खेल का विकास "टिक टैक टो" चरण-दर-चरण है।

परिणाम

रीजन के रचनाकारों के पास दो विकल्प थे। पहले जावास्क्रिप्ट को लेना था और किसी तरह इसमें सुधार करना था। अगर उन्होंने यह रास्ता चुना, तो उन्हें जेएस की ऐतिहासिक खामियों से निपटना होगा।

हालांकि, उन्होंने OCaml से जुड़े दूसरे रास्ते को चुना। उन्होंने उत्कृष्ट प्रदर्शन के साथ एक परिपक्व भाषा OCaml ली, और इसे जावास्क्रिप्ट की तरह देखने के लिए संशोधित किया।

रिएक्ट OCaml के सिद्धांतों पर भी आधारित है। यही कारण है कि कारण का उपयोग करके रिएक्ट एप्लिकेशन लिखना बहुत आसान और अधिक सुखद है। रीक्ट इन रीज़न के साथ काम करने से रिएक्ट घटक बनाने के लिए अधिक स्थिर और सुरक्षित दृष्टिकोण प्रदान करता है, क्योंकि एक सख्त प्रकार की प्रणाली डेवलपर को प्रेरित करती है और उसे अधिकांश ऐतिहासिक जावास्क्रिप्ट समस्याओं का सामना नहीं करना पड़ता है।

प्रिय पाठकों! क्या आपने ReasonReact की कोशिश की है?