श्श्श! यहाँ क्यों ReasonReact, React लिखने का सबसे अच्छा तरीका है

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

प्रतिक्रिया उपयोगकर्ता इंटरफ़ेस लिखने के लिए एक बहुत अच्छा तरीका है। लेकिन, क्या हम इसे और भी ठंडा बना सकते हैं? बेहतर?

इसे बेहतर बनाने के लिए, हमें पहले इसकी समस्याओं को पहचानने की आवश्यकता है। तो, जावास्क्रिप्ट पुस्तकालय के रूप में रिएक्ट की मुख्य समस्या क्या है?

प्रतिक्रिया शुरू में जावास्क्रिप्ट के लिए विकसित नहीं की गई थी

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

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

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

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

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

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

क्या कोई अन्य प्रोग्रामिंग भाषा है जो जावास्क्रिप्ट की तुलना में प्रतिक्रिया के साथ अधिक संगत होगी?

सौभाग्य से, हमारे पास ReasonML है।

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

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

कारण रिएक्ट के मुख्य सिद्धांतों के अनुकूल है।

कारण

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

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

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

आइए रीज़न सिंटैक्स के एक उदाहरण पर एक नज़र डालें।

आज्ञा देना fizzbuzz = (i) =>
  स्विच (i mod 3, i mod 5) {
  | (0, 0) => "फ़िज़बज़"
  | (0, _) => "फ़िज़"
  | (_, 0) => "बज़"
  | _ => string_of_int (i)
  };
के लिए (मैं 1 से 100 में) {
  Js.log (fizzbuzz (i))
};

हालाँकि हम इस उदाहरण में प्रतिमान मिलान का उपयोग कर रहे हैं, यह अभी भी जावास्क्रिप्ट के समान ही सही है?

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

BuckleScript

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

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

जोड़ने = (ए, बी) => ए + बी;
जोड़ें (6, 9);

यह कारण और जावास्क्रिप्ट दोनों में मान्य कोड है।

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

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

आइए जावास्क्रिप्ट के कारण में लिखे गए हमारे FizzBuzz एल्गोरिदम को संकलित करें।

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

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

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

जावास्क्रिप्ट इंटरॉप

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

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

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

हालाँकि, यदि आपको अपना पुस्तकालय नहीं मिला है, तो आपको स्वयं रीज़न बाइंडिंग लिखने की आवश्यकता होगी। यदि आप सिर्फ रीज़न से शुरू कर रहे हैं, तो ध्यान रखें कि बाइंडिंग लिखना एक ऐसी चीज़ नहीं है जिसे आप शुरू करना चाहते हैं, क्योंकि यह रीज़न के इकोसिस्टम में सबसे चुनौतीपूर्ण चीजों में से एक है।

सौभाग्य से, मैं रीज़न बाइंडिंग लिखने के बारे में सिर्फ एक पोस्ट लिख रहा हूं, इसलिए बने रहें!

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

ReasonReact

यह लेख React in Reason लिखने के बारे में है, जिसे आप ReasonReact लाइब्रेरी के लिए धन्यवाद कर सकते हैं।

शायद आप अब सोच रहे हैं "मुझे अभी भी नहीं पता कि मुझे रीज़न ऑफ़ रीज़न का उपयोग क्यों करना चाहिए।"

हमने ऐसा करने के लिए पहले से ही मुख्य कारण का उल्लेख किया है - कारण जावास्क्रिप्ट की तुलना में प्रतिक्रिया के साथ अधिक संगत है। यह अधिक संगत क्यों है? क्योंकि OCaml के लिए React को कारण या अधिक सटीक रूप से विकसित किया गया था।

रोड टू रीजरेक्ट

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

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

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

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

बकलेस्क्रिप्ट की रिलीज के साथ-साथ कार्यात्मक प्रोग्रामिंग की लोकप्रियता ने फेसबुक के लिए प्रतिक्रिया के मूल विचार को वापस लाने के लिए आदर्श जलवायु उत्पन्न की, जिसे शुरू में एक एमएल भाषा में लिखा गया था।

ReasonReact

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

कारण में प्रतिक्रिया की शक्ति

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

इससे जावास्क्रिप्ट विकास में जटिलता की एक और परत जुड़ गई।

आपके विशिष्ट प्रतिक्रिया आवेदन में कम से कम ये निर्भरताएँ होंगी:

  • स्थैतिक टाइपिंग - प्रवाह / टाइपस्क्रिप्ट
  • अपरिवर्तनीयता - immutableJS
  • मार्ग - ReactRouter
  • स्वरूपण - संक्षिप्त
  • linting - ESLint
  • सहायक कार्य - रमदा / लोदश

आइए अब कारण के लिए जावास्क्रिप्ट प्रतिक्रिया स्वैप करें।

क्या हमें अभी भी इन सभी निर्भरताओं की आवश्यकता है?

  • स्थैतिक टाइपिंग - अंतर्निहित
  • अपरिवर्तनीयता - अंतर्निहित
  • रूटिंग - बिल्ट-इन
  • स्वरूपण - अंतर्निहित
  • linting - बिल्ट-इन
  • सहायक कार्य - अंतर्निहित

आप मेरी अन्य पोस्ट में इन अंतर्निहित सुविधाओं के बारे में अधिक जान सकते हैं।

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

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

लपेटें

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

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

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

आगे क्या होगा?

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

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

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

यदि आप React in Reason का उपयोग करके एक एप्लिकेशन बनाना चाहते हैं और रीज़न की मूल बातें व्यावहारिक रूप से सीखते हैं, तो मेरे अन्य लेख की जाँच करें जहाँ हम एक साथ Tic Tac Toe गेम का निर्माण करेंगे।

यदि आपके पास कोई प्रश्न, आलोचना, अवलोकन, या सुधार के लिए सुझाव हैं, तो नीचे टिप्पणी लिखें या ट्विटर या मेरे ब्लॉग के माध्यम से मुझ तक पहुंचें।