2016 में जावास्क्रिप्ट सीखना कैसा लगता है?

इस आलेख के लेखन के दौरान कोई जावास्क्रिप्ट फ्रेमवर्क नहीं बनाया गया।

निम्नलिखित लेख Circle CI के लेख “इट्स द फ्यूचर” से प्रेरित है। आप मूल लेख यहाँ पढ़ सकते हैं । यह लेख सिर्फ़ एक राय है, और किसी भी जावास्क्रिप्ट फ्रेमवर्क की तरह, इसे बहुत गंभीरता से नहीं लिया जाना चाहिए।

अरे, मुझे यह नया वेब प्रोजेक्ट मिला है, लेकिन सच कहूँ तो मैंने पिछले कुछ सालों में ज़्यादा वेब कोड नहीं किया है और मैंने सुना है कि परिदृश्य थोड़ा बदल गया है। आप यहाँ के सबसे अप-टू-डेट वेब डेवलपर हैं, है न?

-वास्तविक शब्द फ्रंट एंड इंजीनियर है, लेकिन हाँ, मैं सही व्यक्ति हूँ। मैं 2016 में वेब करता हूँ। विज़ुअलाइज़ेशन, म्यूज़िक प्लेयर, फ़ुटबॉल खेलने वाले उड़ने वाले ड्रोन, आप नाम बताइए। मैं अभी JsConf और ReactConf से वापस आया हूँ, इसलिए मुझे वेब ऐप बनाने की नवीनतम तकनीकें पता हैं।

बढ़िया। मुझे एक ऐसा पेज बनाना है जो उपयोगकर्ताओं की नवीनतम गतिविधि प्रदर्शित करे, इसलिए मुझे बस REST एंडपॉइंट से डेटा प्राप्त करना है और इसे किसी प्रकार की फ़िल्टर करने योग्य तालिका में प्रदर्शित करना है, और सर्वर में कुछ भी परिवर्तन होने पर इसे अपडेट करना है। मैं सोच रहा था कि शायद डेटा लाने और प्रदर्शित करने के लिए jQuery का उपयोग किया जाए?

-हे भगवान नहीं, अब कोई भी jQuery का उपयोग नहीं करता। आपको React सीखने की कोशिश करनी चाहिए, यह 2016 है।

ओह, ठीक है। रिएक्ट क्या है?

-यह फेसबुक के कुछ लोगों द्वारा बनाई गई एक बहुत ही अच्छी लाइब्रेरी है, यह वास्तव में आपके एप्लिकेशन में नियंत्रण और प्रदर्शन लाती है, जिससे आप किसी भी दृश्य परिवर्तन को बहुत आसानी से संभाल सकते हैं।

यह बढ़िया लगता है। क्या मैं सर्वर से डेटा प्रदर्शित करने के लिए React का उपयोग कर सकता हूँ?

-हाँ, लेकिन पहले आपको अपने वेबपेज में लाइब्रेरी के रूप में React और React DOM को जोड़ना होगा।

रुको, दो पुस्तकालय क्यों?

-तो एक वास्तविक लाइब्रेरी है और दूसरा DOM में हेरफेर करने के लिए है, जिसे अब आप JSX में वर्णित कर सकते हैं।

JSX क्या है?

-JSX सिर्फ़ एक जावास्क्रिप्ट सिंटैक्स एक्सटेंशन है जो XML जैसा ही दिखता है। यह DOM का वर्णन करने का एक और तरीका है, इसे बेहतर HTML के रूप में सोचें।

HTML में क्या ग़लती है?

-यह 2016 है। अब कोई भी सीधे HTML को कोड नहीं करता है।

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

-बिलकुल नहीं। आपको Babel जोड़ने की ज़रूरत है, और फिर आप React का उपयोग करने में सक्षम होंगे।

एक और लाइब्रेरी? बेबेल क्या है?

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

ES5? ES2016+? मैं यहाँ भ्रमित हो रहा हूँ। ES5 और ES2016+ क्या है?

-ES5 का तात्पर्य ECMAScript 5 है। यह वह संस्करण है जिसे अधिकांश लोग लक्ष्य बना रहे हैं, क्योंकि आजकल अधिकांश ब्राउज़रों द्वारा इसका क्रियान्वयन किया जा रहा है।

ईसीएमएस्क्रिप्ट?

-हाँ, आप जानते हैं, स्क्रिप्टिंग मानक जावास्क्रिप्ट 1995 में अपनी प्रारंभिक रिलीज़ के बाद 1999 में आधारित था, तब जावास्क्रिप्ट का नाम लाइवस्क्रिप्ट था और यह केवल नेटस्केप नेविगेटर में चलता था। उस समय यह बहुत गड़बड़ था, लेकिन शुक्र है कि अब चीजें बहुत स्पष्ट हैं और हमारे पास इस कार्यान्वयन के लगभग 7 संस्करण हैं।

7 संस्करण। सच में। और ES5 और ES2016+ हैं?

-क्रमशः पांचवां और सातवां संस्करण।

रुको, छठे के साथ क्या हुआ?

-आपका मतलब ES6 है? हाँ, मेरा मतलब है, प्रत्येक संस्करण पिछले संस्करण का सुपरसेट है, इसलिए यदि आप ES2016+ का उपयोग कर रहे हैं, तो आप पिछले संस्करणों की सभी सुविधाओं का उपयोग कर रहे हैं।

ठीक है। और फिर ES6 की जगह ES2016+ का उपयोग क्यों करें?

-ठीक है, आप ES6 का उपयोग कर सकते हैं, लेकिन async और await जैसी शानदार सुविधाओं का उपयोग करने के लिए, आपको ES2016+ का उपयोग करने की आवश्यकता है। अन्यथा आप उचित नियंत्रण प्रवाह के लिए एसिंक्रोनस कॉल को ब्लॉक करने के लिए कोरोउटिन के साथ ES6 जनरेटर के साथ फंस जाते हैं।

मुझे नहीं पता कि आपने अभी क्या कहा, और ये सभी नाम भ्रमित करने वाले हैं। देखिए, मैं अभी सर्वर से बहुत सारा डेटा लोड कर रहा हूँ, मैं CDN से jQuery को शामिल करके AJAX कॉल के साथ डेटा प्राप्त कर सकता था, मैं ऐसा क्यों नहीं कर सकता?

-यह 2016 है यार, अब कोई भी jQuery का उपयोग नहीं करता, यह स्पेगेटी कोड के ढेर में समाप्त हो जाता है। यह बात सभी जानते हैं।

ठीक है। तो मेरा विकल्प डेटा लाने और HTML तालिका प्रदर्शित करने के लिए तीन लाइब्रेरीज़ लोड करना है।

-ठीक है, आप उन तीन लाइब्रेरीज़ को शामिल करते हैं लेकिन उन्हें केवल एक फ़ाइल लोड करने के लिए मॉड्यूल मैनेजर के साथ बंडल करते हैं।

मैं समझ गया। और मॉड्यूल मैनेजर क्या है?

- परिभाषा पर्यावरण पर निर्भर करती है, लेकिन वेब में हमारा मतलब आमतौर पर ऐसी किसी भी चीज़ से होता है जो AMD या CommonJS मॉड्यूल का समर्थन करती है।

सही है। और AMD और CommonJS हैं...?

-परिभाषाएँ। यह वर्णन करने के तरीके हैं कि कई जावास्क्रिप्ट लाइब्रेरी और क्लास को कैसे इंटरैक्ट करना चाहिए। आप जानते हैं, निर्यात और आवश्यकताएँ? आप AMD या CommonJS API को परिभाषित करने वाली कई जावास्क्रिप्ट फ़ाइलें लिख सकते हैं और उन्हें बंडल करने के लिए आप Browserify जैसी किसी चीज़ का उपयोग कर सकते हैं।

ठीक है, यह समझ में आता है... मुझे लगता है। ब्राउज़रिफ़ाई क्या है?

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

एनपीएम रजिस्ट्री?

-यह एक बहुत बड़ा सार्वजनिक भंडार है जहां स्मार्ट लोग कोड और निर्भरता को मॉड्यूल के रूप में रखते हैं।

CDN की तरह?

-नहीं, वास्तव में। यह एक केंद्रीकृत डेटाबेस की तरह है, जहाँ कोई भी लाइब्रेरी प्रकाशित और डाउनलोड कर सकता है, इसलिए आप उन्हें स्थानीय रूप से विकास के लिए उपयोग कर सकते हैं और फिर यदि आप चाहें तो उन्हें CDN पर अपलोड कर सकते हैं।

ओह, बोवर की तरह!

-हाँ, लेकिन अब 2016 आ गया है, कोई भी अब बोवर का उपयोग नहीं करता।

ओह, मैं समझ गया... तो फिर मुझे npm से लाइब्रेरीज़ डाउनलोड करने की ज़रूरत है?

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

ओह, एंग्युलर की तरह!

-एंगुलर तो 2015 का है। लेकिन हाँ। एंगुलर, VueJS या RxJS और अन्य शानदार 2016 लाइब्रेरीज़ के साथ होगा। क्या आप उनके बारे में जानना चाहते हैं?

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

-हाँ।

ऐसा लगता है कि बहुत सारी निर्भरताओं को एक साथ जोड़ना अत्यधिक जटिल है।

-यही कारण है कि आप ब्राउज़रिफ़ाई को स्वचालित रूप से चलाने के लिए ग्रंट या गुलप या ब्रोकोली जैसे टास्क मैनेजर का उपयोग करते हैं। अरे, आप मिमोसा का भी उपयोग कर सकते हैं।

ग्रन्ट? गल्प? ब्रोकली? मिमोसा? अब हम किस बारे में बात कर रहे हैं?

-टास्क मैनेजर। लेकिन अब वे अच्छे नहीं रहे। हमने 2015 में उनका इस्तेमाल किया, फिर हमने मेकफाइल्स का इस्तेमाल किया, लेकिन अब हम सब कुछ वेबपैक के साथ लपेटते हैं।

मेकफाइल्स? मुझे लगा कि इसका इस्तेमाल ज्यादातर C या C++ प्रोजेक्ट्स में किया जाता है।

-हाँ, लेकिन जाहिर है कि वेब में हम चीजों को जटिल बनाना और फिर मूल बातों पर वापस जाना पसंद करते हैं। हम ऐसा हर साल या तो करते हैं, बस इसके लिए प्रतीक्षा करें, हम एक या दो साल में वेब में असेंबली करने जा रहे हैं।

आह! आपने वेबपैक नामक किसी चीज़ का उल्लेख किया?

-यह ब्राउज़र के लिए एक और मॉड्यूल मैनेजर है, साथ ही यह एक तरह का टास्क रनर भी है। यह ब्राउज़रिफ़ाई का एक बेहतर संस्करण है।

ओह, ठीक है। यह बेहतर क्यों है?

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

मैं इस पूरे कॉमनजेएस/ईएस6 मामले से बेहद उलझन में हूं।

-हर कोई है, लेकिन आपको सिस्टमजेएस के साथ अब और परवाह नहीं करनी चाहिए।

जीसस क्राइस्ट, एक और संज्ञा-js. ठीक है, और यह SystemJS क्या है?

-खैर, ब्राउज़रीफाई और वेबपैक 1.x के विपरीत, सिस्टमजेएस एक गतिशील मॉड्यूल लोडर है जो आपको कई मॉड्यूल को एक बड़ी फ़ाइल में बंडल करने के बजाय कई फ़ाइलों में बाँधने की अनुमति देता है।

रुकिए, लेकिन मैंने सोचा कि हम अपनी लाइब्रेरीज़ को एक बड़ी फ़ाइल में बनाना चाहते हैं और उसे लोड करना चाहते हैं!

-हां, लेकिन चूंकि अब HTTP/2 आ रहा है, इसलिए एकाधिक HTTP अनुरोध वास्तव में बेहतर हैं।

रुको, तो क्या हम React के लिए तीन मूल लाइब्रेरीज़ नहीं जोड़ सकते?

-नहीं, वास्तव में। मेरा मतलब है, आप उन्हें CDN से बाहरी स्क्रिप्ट के रूप में जोड़ सकते हैं, लेकिन आपको तब भी Babel को शामिल करना होगा।

आह! और यह बुरा है, है ना?

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

मुझे समझ आ गया, मुझे समझ आ गया। तो अगर आप लाइब्रेरीज़ को सीधे CDN में शामिल नहीं करेंगे, तो आप इसे कैसे करेंगे?

-मैं इसे वेबपैक + सिस्टमजेएस + बैबल कॉम्बो का उपयोग करके टाइपस्क्रिप्ट से ट्रांसपाइल करूंगा।

टाइपस्क्रिप्ट? मुझे लगा कि हम जावास्क्रिप्ट में कोडिंग कर रहे हैं!

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

मुझे लगा कि ES2016+ पहले से ही ES6 का सुपरसेट है! अब हमें टाइपस्क्रिप्ट नामक इस चीज़ की क्या ज़रूरत है?

-ओह, क्योंकि यह हमें जावास्क्रिप्ट को टाइप की गई भाषा के रूप में उपयोग करने की अनुमति देता है, और रन-टाइम त्रुटियों को कम करता है। यह 2016 है, आपको अपने जावास्क्रिप्ट कोड में कुछ प्रकार जोड़ने चाहिए।

और टाइपस्क्रिप्ट स्पष्टतः ऐसा करता है।

-Flow में भी यह सुविधा उपलब्ध है, हालांकि यह केवल टाइपिंग की जांच करता है, जबकि टाइपस्क्रिप्ट जावास्क्रिप्ट का एक सुपरसेट है, जिसे संकलित करने की आवश्यकता होती है।

आह... और प्रवाह है?

-यह फेसबुक के कुछ लोगों द्वारा बनाया गया एक स्टैटिक टाइप चेकर है। उन्होंने इसे OCaml में कोड किया है, क्योंकि फंक्शनल प्रोग्रामिंग कमाल की है।

OCaml? फंक्शनल प्रोग्रामिंग?

-यह वही है जो आजकल कूल बच्चे इस्तेमाल करते हैं, आप जानते हैं, 2016? फंक्शनल प्रोग्रामिंग? हाई ऑर्डर फंक्शन? करीइंग? प्योर फंक्शन?

मुझे कुछ पता नहीं कि आपने अभी क्या कहा।

-शुरुआत में कोई भी ऐसा नहीं करता। देखिए, आपको बस यह जानना है कि फंक्शनल प्रोग्रामिंग OOP से बेहतर है और यही वह चीज है जिसका हमें 2016 में इस्तेमाल करना चाहिए।

रुको, मैंने कॉलेज में ओओपी सीखा था, मुझे लगा कि यह अच्छा है?

-ओरेकल द्वारा खरीदे जाने से पहले जावा भी ऐसा ही था। मेरा मतलब है, ओओपी उस समय अच्छा था, और आज भी इसका उपयोग होता है, लेकिन अब हर कोई महसूस कर रहा है कि राज्यों को संशोधित करना बच्चों को लात मारने के बराबर है, इसलिए अब हर कोई अपरिवर्तनीय ऑब्जेक्ट और फंक्शनल प्रोग्रामिंग की ओर बढ़ रहा है। हास्केल के लोग इसे सालों से बुला रहे थे, -और मुझे एल्म के लोगों से शुरू मत करवाओ- लेकिन सौभाग्य से अब वेब में हमारे पास रामदा जैसी लाइब्रेरी हैं जो हमें सादे जावास्क्रिप्ट में फंक्शनल प्रोग्रामिंग का उपयोग करने की अनुमति देती हैं।

क्या आप सिर्फ़ नाम बताने के लिए ऐसा कर रहे हैं? आखिर रामंडा क्या है?

-नहीं। रामदा। लैम्बडा की तरह। तुम्हें पता है, डेविड चेम्बर्स की लाइब्रेरी?

डेविड कौन?

-डेविड चेम्बर्स। बढ़िया आदमी। एक मतलबी कूप गेम खेलता है। रामदा के योगदानकर्ताओं में से एक। अगर आप फंक्शनल प्रोग्रामिंग सीखने के बारे में गंभीर हैं तो आपको एरिक मीजर को भी देखना चाहिए।

और एरिक मेयेर है...?

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

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

-ठीक है, आप वास्तव में React के साथ डेटा नहीं लाते हैं, आप केवल React के साथ डेटा प्रदर्शित करते हैं।

अरे, लानत है मुझ पर। तो आप डेटा लाने के लिए क्या उपयोग करते हैं?

-आप सर्वर से डेटा लाने के लिए Fetch का उपयोग करते हैं।

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

-मुझे पता है ना? Fetch यह एक सर्वर के विरुद्ध XMLHttpRequests निष्पादित करने के लिए मूल कार्यान्वयन का नाम है।

ओह, तो AJAX.

-AJAX सिर्फ़ XMLHttpRequests का उपयोग है। लेकिन ज़रूर। Fetch आपको वादे के आधार पर AJAX करने की अनुमति देता है, जिसे आप कॉलबैक नरक से बचने के लिए हल कर सकते हैं।

कॉलबैक नरक?

-हाँ। हर बार जब आप सर्वर के खिलाफ एक एसिंक्रोनस अनुरोध करते हैं, तो आपको इसकी प्रतिक्रिया के लिए इंतजार करना पड़ता है, जो आपको फ़ंक्शन के भीतर एक फ़ंक्शन जोड़ने के लिए मजबूर करता है, जिसे नरक से कॉलबैक पिरामिड कहा जाता है।

ओह, ठीक है। और यह वादा करने से यह समस्या हल हो जाएगी?

-बिलकुल। वादों के माध्यम से अपने कॉलबैक में हेरफेर करके, आप समझने में आसान कोड लिख सकते हैं, उनका मॉक और परीक्षण कर सकते हैं, साथ ही एक साथ कई अनुरोधों को निष्पादित कर सकते हैं और तब तक प्रतीक्षा कर सकते हैं जब तक कि वे सभी लोड न हो जाएं।

और यह Fetch के साथ किया जा सकता है?

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

भगवान के लिए मुझे कितने पुस्तकालयों के बारे में जानना होगा? उनमें से कितने हैं?

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

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

-वे XMLHttpRequests निष्पादित करने वाली लाइब्रेरी हैं जो वादे वापस करती हैं।

क्या jQuery की AJAX विधि भी वादे लौटाने लगी है?

-हम 2016 में अब “J” शब्द का इस्तेमाल नहीं करते। बस Fetch का इस्तेमाल करें और जब यह ब्राउज़र में न हो तो इसे पॉलीफ़िल करें या इसके बजाय Bluebird, Request या Axios का इस्तेमाल करें। फिर async फ़ंक्शन के भीतर await के साथ वादे को मैनेज करें और बूम, आपके पास उचित नियंत्रण प्रवाह है।

यह तीसरी बार है जब आपने await का जिक्र किया है, लेकिन मुझे नहीं पता कि यह क्या है।

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

यह पागलपन है.

-नहीं, यह पागलपन है कि आपको टाइपस्क्रिप्ट कोड को प्रीकंपाइल करने की आवश्यकता है और फिर प्रतीक्षा का उपयोग करने के लिए इसे बैबल के साथ ट्रांसपाइल करना होगा।

क्या? यह टाइपस्क्रिप्ट में शामिल नहीं है?

-यह अगले संस्करण में करता है, लेकिन संस्करण 1.7 के अनुसार यह केवल ES6 को लक्षित करता है, इसलिए यदि आप ब्राउज़र में await का उपयोग करना चाहते हैं, तो सबसे पहले आपको अपने टाइपस्क्रिप्ट कोड को ES6 को लक्षित करने के लिए संकलित करना होगा और फिर Babel को ES5 को लक्षित करने के लिए तैयार करना होगा।

इस समय मैं नहीं जानता कि क्या कहूं।

-देखिए, यह आसान है। सब कुछ Typescript में कोड करें। Fetch का उपयोग करने वाले सभी मॉड्यूल उन्हें ES6 को लक्षित करने के लिए संकलित करते हैं, उन्हें स्टेज-3 प्रीसेट पर Babel के साथ ट्रांसपाइल करते हैं, और उन्हें SystemJS के साथ लोड करते हैं। यदि आपके पास Fetch नहीं है, तो इसे पॉलीफ़िल करें, या Bluebird, Request या Axios का उपयोग करें, और अपने सभी वादों को await के साथ संभालें।

हमारे पास आसान की बहुत अलग परिभाषाएँ हैं। तो, उस अनुष्ठान के साथ मैंने आखिरकार डेटा प्राप्त कर लिया और अब मैं इसे रिएक्ट के साथ प्रदर्शित कर सकता हूँ, है ना?

-क्या आपका एप्लीकेशन किसी भी राज्य परिवर्तन को संभाल सकेगा?

अरे, मुझे ऐसा नहीं लगता। मुझे बस डेटा प्रदर्शित करने की आवश्यकता है।

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

मैं बस उन नामों पर उड़ान भरने जा रहा हूँ। फिर से, मुझे बस डेटा प्रदर्शित करने की आवश्यकता है।

-ओह, अगर आप सिर्फ़ डेटा प्रदर्शित कर रहे हैं तो आपको शुरू में React की ज़रूरत नहीं थी। टेम्प्लेटिंग इंजन के साथ आप ठीक रह सकते थे।

क्या तुम मज़ाक कर रहे हो? क्या तुम्हें यह सब मज़ाक लगता है? क्या तुम अपने प्रियजनों के साथ ऐसा ही व्यवहार करते हो?

-मैं तो बस यह बता रहा था कि आप क्या उपयोग कर सकते हैं।

रुको, बस रुको।

-मेरा मतलब है, भले ही यह सिर्फ टेम्प्लेटिंग इंजन का उपयोग कर रहा हो, फिर भी अगर मैं आपकी जगह होता तो मैं टाइपस्क्रिप्ट + सिस्टमजेएस + बैबल कॉम्बो का उपयोग करता।

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

-बहुत सारे हैं, आप किससे परिचित हैं?

उफ़, नाम याद नहीं आ रहा। बहुत समय पहले की बात है।

-jTemplates? jQote? शुद्ध?

अरे, याद नहीं आ रहा। एक और?

-पारदर्शिता? JSRender? MarkupJS? KnockoutJS? उसमें दो-तरफ़ा बाइंडिंग थी।

दूसरा?

-प्लेट्सजेएस? jQuery-tmpl? हैंडलबार्स? कुछ लोग अभी भी इसका उपयोग करते हैं।

शायद। क्या पिछले वाले जैसा कोई और भी है?

-मूंछें, अंडरस्कोर? ईमानदारी से कहूं तो मुझे लगता है कि अब लॉडैश के पास भी एक है, लेकिन वे 2014 की तरह हैं।

अरे.. शायद यह नया था।

-जेड? डस्टजेएस?

नहीं।

-डॉटजेएस? ईजेएस?

नहीं।

-ननजक्स? ईसीटी?

नहीं।

-माह, वैसे भी कॉफ़ीस्क्रिप्ट सिंटैक्स किसी को पसंद नहीं है। जेड?

नहीं, आपने पहले ही जेड कहा है।

-मेरा मतलब पग था। मेरा मतलब जेड था। मेरा मतलब है, जेड अब पग है।

आह. नहीं. याद नहीं आ रहा. आप कौन सा इस्तेमाल करेंगे?

-संभवतः सिर्फ ES6 मूल टेम्पलेट स्ट्रिंग्स.

मुझे अनुमान लगाने दीजिए। और इसके लिए ES6 की आवश्यकता है।

-सही।

जो इस बात पर निर्भर करता है कि मैं कौन सा ब्राउज़र उपयोग कर रहा हूँ, उसे Babel की आवश्यकता है।

-सही।

यदि मैं संपूर्ण कोर लाइब्रेरी को जोड़े बिना इसे शामिल करना चाहता हूं, तो मुझे इसे npm से एक मॉड्यूल के रूप में लोड करना होगा।

-सही।

जिसके लिए ब्राउज़रीफाई, या वेपबैक, या संभवतः सिस्टमजेएस नामक किसी अन्य चीज़ की आवश्यकता होती है।

-सही।

जब तक कि यह वेबपैक न हो, आदर्श रूप से इसे टास्क रनर द्वारा प्रबंधित किया जाना चाहिए।

-सही।

लेकिन, चूंकि मुझे फंक्शनल प्रोग्रामिंग और टाइप्ड लैंग्वेज का उपयोग करना चाहिए, इसलिए मुझे पहले टाइपस्क्रिप्ट को प्री-कंपाइल करना होगा या इस फ्लो थिंग को जोड़ना होगा।

-सही।

और फिर यदि मैं await का उपयोग करना चाहता हूँ तो उसे Babel पर भेज देता हूँ।

-सही।

तो मैं फ़ेच, प्रॉमिस, और नियंत्रण प्रवाह और उस सभी जादू का उपयोग कर सकता हूं।

-यदि यह समर्थित नहीं है तो Fetch को पॉलीफ़िल करना न भूलें, सफारी अभी भी इसे संभाल नहीं सकता है।

आप जानते हैं क्या। मुझे लगता है कि हम यहाँ समाप्त हो गए हैं। वास्तव में, मुझे लगता है कि मैं समाप्त हो गया हूँ। मैं वेब के साथ समाप्त हो गया हूँ, मैं जावास्क्रिप्ट के साथ पूरी तरह से समाप्त हो गया हूँ।

-यह ठीक है, कुछ वर्षों में हम सभी एल्म या वेबअसेंबली में कोडिंग करेंगे।

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

-मैं आपकी बात सुन रहा हूँ। फिर आपको पायथन समुदाय की कोशिश करनी चाहिए।

क्यों?

-क्या आपने कभी पायथन 3 के बारे में सुना है?

अद्यतन: टाइपो और गलतियों को इंगित करने के लिए धन्यवाद, मैं लेख को अपडेट करूंगा। HackerNews और Reddit में चर्चा ।