यह नया सिंटैक्स (Syntax) JSX को रिप्लेस करना चाहता है
BBetter Stack
Computing/SoftwareInternet Technology
Transcript
00:00:00पहले हमारे पास JSX था, फिर TSX आया, लेकिन हम सालों से इन्हीं पर अटके हुए हैं।
00:00:04क्या इनमें सुधार नहीं किया जा सकता? खैर, शायद TSRX द्वारा किया जा सकता है।
00:00:08यह कुछ-कुछ वैसा ही है, लेकिन फिर भी अलग है।
00:00:10यहाँ कोई फ़ंक्शन नहीं है, हमारे पास कंपोनेंट है, टेक्स्ट के लिए स्ट्रिंग्स हैं,
00:00:14इसमें एक सामान्य if स्टेटमेंट है, और कोई return स्टेटमेंट भी नहीं है।
00:00:17तो आखिर यह क्या है, क्यों है, और क्या आपको इसका उपयोग करना चाहिए? आइए जानते हैं।
00:00:21[संगीत]
00:00:26अब आप में से कुछ लोग ऐसे हो सकते हैं जिन्होंने वास्तव में पहले ऐसा कोड देखा हो,
00:00:29और ऐसा इसलिए है क्योंकि इसे वास्तव में Ripple के निर्माता द्वारा आपके पास लाया गया है।
00:00:31यह एक नया फ्रंट-एंड फ्रेमवर्क है जिसे रिच ने छह महीने पहले इस चैनल पर कवर किया था,
00:00:35तो ऐसी चीज़ों से अपडेट रहने के लिए सब्सक्राइब करें।
00:00:38उन्होंने जो किया है वो यह कि उन्होंने Ripple में इस्तेमाल होने वाले सिंटैक्स को अलग कर लिया है,
00:00:41और इसे React, Preact, Solid, Vue और बेशक Ripple के साथ काम करने लायक बना दिया है,
00:00:45और बहुत से लोग इसे लेकर काफी उत्साहित थे।
00:00:47अब TSRX खुद को UI कंपोनेंट्स लिखने के ऐसे तरीके के रूप में बताता है जो पढ़ने में आसान और को-लोकेटेड रहते हैं,
00:00:52ताकि स्ट्रक्चर, स्टाइलिंग और कंट्रोल फ्लो एक साथ रहें,
00:00:55और परिणाम पूरी तरह से TypeScript के साथ बैकवर्ड कम्पैटिबल रहता है।
00:00:58लेकिन जब तक आपने पहले Ripple का उपयोग नहीं किया है, आप शायद अभी भी थोड़ा उलझन में होंगे कि इसका क्या मतलब है,
00:01:01तो आइए इसके फीचर्स को समझते हैं।
00:01:03शुरुआत करने के लिए आप इसे TSRX फ़ाइलों के साथ उपयोग करते हैं, जिसका अर्थ है कि हमें एक कंपाइलर स्टेप की आवश्यकता है,
00:01:07लेकिन Vite प्लगइन के साथ इसे सेट अप करना बेहद आसान है,
00:01:10और अन्य फ्रेमवर्क और रनटाइम्स के लिए भी दूसरे विकल्प मौजूद हैं।
00:01:13जहाँ तक वास्तविक कंपोनेंट्स की बात है, यहाँ फ़ंक्शन लिखने के बजाय हम component लिखते हैं,
00:01:17और यह ज़्यादातर खुद कंपाइलर के लिए सिर्फ एक कीवर्ड है,
00:01:20लेकिन यह यह भी स्पष्ट करता है कि इसमें कुछ रेंडरिंग लॉजिक होने वाला है।
00:01:24मैं इसे शायद एक छोटा सा क्वालिटी-ऑफ-लाइफ सुधार मानूँगा।
00:01:27हालाँकि ध्यान देने वाली एक बात यह है कि हमारे पास यहाँ कोई return स्टेटमेंट नहीं है,
00:01:30और ऐसा इसलिए है क्योंकि TSRX स्टेटमेंट-बेस्ड JSX का उपयोग करता है,
00:01:33इसलिए आपको कंपोनेंट ट्री को रिटर्न करने की आवश्यकता नहीं है,
00:01:35आप बस अपना मार्कअप वहाँ लिख देते हैं जहाँ आप इसे रेंडर करना चाहते हैं।
00:01:37इसका मतलब है कि हम कंपोनेंट के शीर्ष पर इस कार्ड के ऊपर एक और पैराग्राफ टैग डाल सकते हैं,
00:01:42और यह वहीं रेंडर हो जाएगा जहाँ इसे लिखा गया है।
00:01:44आप अभी भी एक कंपोनेंट में return का उपयोग कर सकते हैं, लेकिन यह खाली (bare) होना चाहिए,
00:01:47और इसका उपयोग केवल जल्दी रिटर्न करने (early returning) के लिए किया जाता है, जिससे इसके बाद के UI और लॉजिक को छोड़ दिया जाता है।
00:01:51इसने मुझे TSRX कंपोनेंट्स को बहुत लीनियर तरीके से सोचने में मदद की है,
00:01:54तो जिस क्रम में हम सोर्स लिखते हैं, उसी क्रम में रेंडरिंग होती है,
00:01:57बस ऊपर से नीचे की ओर पढ़ते हुए,
00:01:59लेकिन मैं यह भी देख सकता हूँ कि इससे यह देखना कठिन हो सकता है कि कोई कंपोनेंट क्या रेंडर कर रहा है,
00:02:03जबकि React जैसी चीज़ में, हम सीधे return पर कूद जाते हैं।
00:02:06स्टेटमेंट-बेस्ड JSX का दूसरा लाभ यह है कि हम बहुत अधिक सामान्य JavaScript का उपयोग कर सकते हैं।
00:02:10उदाहरण के लिए, कंडीशनल रेंडरिंग बेहद सरल है।
00:02:13यह ज़रूरत पड़ने पर else-if और else के साथ बस एक सामान्य if स्टेटमेंट है।
00:02:17कंडीशन्स में, हमें बस अपने JSX को एक स्टेटमेंट के रूप में रखना होगा।
00:02:20React में यही चीज़ अक्सर नेस्टेड टर्नरीज़ में बदल जाती है,
00:02:23क्योंकि JSX में, हर ब्रांच को एक एक्सप्रेशन होना पड़ता है,
00:02:26इसलिए मुझे लगता है कि TSRX वर्शन को पढ़ना कभी-कभी आसान हो सकता है,
00:02:29खासकर तब जब हमारे पास अधिक जटिल स्टेटमेंट हो,
00:02:31लेकिन उसी तरह, मैं यह भी देख सकता हूँ कि यह और अधिक वर्बोसिटी (शब्दबाहुल्य) जोड़ सकता है,
00:02:35खासकर तब जब आपको केवल एक साधारण कंडीशन की आवश्यकता हो।
00:02:37यही बात switch स्टेटमेंट्स के लिए भी लागू होती है।
00:02:39आप अपने केसेस और प्रत्येक के लिए रेंडर किए जाने वाले JSX के साथ
00:02:41बस एक सामान्य JavaScript switch का उपयोग कर सकते हैं।
00:02:44यह React में इसे संभालने के तरीके से थोड़ा अधिक सरल है,
00:02:47जहाँ आपको उसी पैटर्न का उपयोग करने के लिए एक फ़ंक्शन की आवश्यकता होती है,
00:02:49इसलिए TSRX यहाँ थोड़ा सा साफ-सुथरा है,
00:02:51लेकिन एक क्षेत्र जो मुझे व्यक्तिगत रूप से TSRX में कम पसंद है, वह है लिस्ट रेंडरिंग।
00:02:55यहाँ हम .map को छोड़ देते हैं और इसके बजाय for-of लूप का उपयोग करते हैं,
00:02:58और TSRX ने वास्तव में इस लूप को विस्तारित किया है ताकि हम इंडेक्स प्राप्त कर सकें
00:03:01और साथ ही की (key) के साथ एक स्थिर पहचान भी।
00:03:03फिर जब आप किसी आइटम को छोड़ना चाहते हैं, तो आप बस continue का उपयोग कर सकते हैं,
00:03:06तो फिर से, यह वेनिला JavaScript फ्लो के थोड़ा करीब है,
00:03:08लेकिन जैसा कि मैंने कहा, मेरे लिए, मुझे .map, filter आदि का उपयोग करने की बहुत आदत हो गई है,
00:03:12इसलिए मैं शायद उसी पर कायम रहूँगा,
00:03:14और यह भी ध्यान देने योग्य है कि आप किसी अन्य लूप प्रकार का उपयोग नहीं कर सकते
00:03:17जैसे for, for-in, while, और do-while।
00:03:19यह केवल for-of है जिसके लिए यह काम करता है।
00:03:21अब सामान्य JavaScript का उपयोग करने के चलन को जारी रखते हुए,
00:03:23TSRX में एरर बाउंड्रीज़ बनाने का तरीका एक सरल try-catch ब्लॉक है।
00:03:27कुछ भी अजीब नहीं और काफी आसान।
00:03:30यदि हमें एसिंक बाउंड्रीज़ की आवश्यकता है तो हम उसी try-catch ब्लॉक का भी उपयोग कर सकते हैं,
00:03:33हमें बस एक pending ब्लॉक जोड़ना होगा
00:03:35और फिर उसमें अपना लोडिंग कंपोनेंट लिखना होगा।
00:03:38कंपाइलर वास्तव में इस कोड को लेने
00:03:40और आप जिस भी फ्रेमवर्क का उपयोग कर रहे हैं उसके अनुसार इसे रिज़ॉल्व करने का काम संभालता है,
00:03:42इसलिए React, Preact और Solid में, यह वास्तव में lazy का उपयोग करता है,
00:03:45और Ripple में, यह Ripple के समकक्ष का उपयोग करता है।
00:03:47विशेष रूप से React की बात करें तो,
00:03:48जो फीचर्स हमने अब तक देखे हैं
00:03:50वे हमें React के प्रमुख नियमों में से एक को तोड़ने की अनुमति देते प्रतीत होते हैं,
00:03:53यानी हुक्स का नियम (rule of hooks)।
00:03:54अब हम उन्हें कंडीशन्स और अर्ली रिटर्न्स के बाद,
00:03:57और यहाँ तक कि लूप्स के अंदर भी रख सकते हैं।
00:03:58वे सभी सामान्य रूप से काम करेंगे।
00:04:00यह हमें अपने कोड को वहाँ बेहतर ढंग से को-लोकेट करने की अनुमति देता है जहाँ इसकी वास्तव में आवश्यकता है,
00:04:03और अंतिम आउटपुट नियमों को तोड़ता भी नहीं है।
00:04:06कंपाइलर चुपचाप जेनरेट किए गए फ़ंक्शन के शीर्ष पर हर हुक को ऊपर उठा (hoist कर) देता है,
00:04:09ताकि React अभी भी उन्हें एक स्थिर क्रम में देखे,
00:04:11लेकिन आपको उन्हें वहाँ लिखने को मिलता है जहाँ वे वास्तव में होने चाहिए।
00:04:14अब मेरे लिए, एक ऐसे व्यक्ति के रूप में जिसने सालों से React का उपयोग किया है,
00:04:16यह उन चीज़ों में से एक है जिसकी आदत डालने में मुझे संघर्ष करना पड़ता है,
00:04:18और यह एक ऐसा फीचर भी है जहाँ हम कंपाइलर से
00:04:20पर्दे के पीछे बहुत अधिक जादू करवा रहे हैं,
00:04:22विशेष रूप से एक फ्रेमवर्क के इर्द-गिर्द,
00:04:24और मुझे लगता है कि अगर मैं इसे डीबग कर रहा होता,
00:04:26तो मैं थोड़ा खो सकता था कि कौन सा कोड कहाँ है।
00:04:28इसके बाद हमारे पास लेक्सिकल स्कोपिंग है,
00:04:30इसलिए प्रत्येक नेस्टेड एलिमेंट अपना खुद का स्कोप बना रहा है,
00:04:32इसलिए हम यहाँ तीन अलग-अलग div ब्लॉक्स में एक const label घोषित करने में सक्षम हैं,
00:04:36और वे आपस में नहीं टकराते।
00:04:37यहाँ फ़ंक्शन के शीर्ष पर भी एक है जिसे कोई नहीं पढ़ रहा है,
00:04:40और फिर से, यह कोई विरोध पैदा नहीं कर रहा है।
00:04:41यही बात हर if, for, switch, या try स्टेटमेंट पर लागू होती है।
00:04:44प्रत्येक का अपना स्कोप होता है,
00:04:46इसलिए जो वेरिएबल्स हम घोषित करते हैं, जो फ़ंक्शन हम चलाते हैं,
00:04:48और जो वैल्यूज़ हम प्राप्त करते हैं, वे दूसरे स्कोप्स में लीक नहीं होते।
00:04:51यह उन फीचर्स में से एक और है जो हमारे कोड को को-लोकेट करने पर केंद्रित है,
00:04:54और फिर से, यह हमारे कंपोनेंट्स को ऊपर-से-नीचे, लीनियर तरीके से पढ़ने लायक बनाता है।
00:04:57अब JavaScript से हटकर, आइए स्टाइलिंग के बारे में बात करते हैं।
00:05:00TSRX में, हमारे पास वास्तव में स्कोप्ड स्टाइल्स हैं,
00:05:02तो आप बस अपने कंपोनेंट में एक style ब्लॉक रख सकते हैं,
00:05:04और जो CSS हम वहाँ लिखते हैं वह केवल उसी कंपोनेंट तक सीमित होती है,
00:05:08और कंपाइल होने पर क्लास नेम के साथ एक यूनिक हैश जुड़ जाता है।
00:05:11तो इस कार्ड कंपोनेंट में एक card क्लास है,
00:05:13और यहाँ ध्यान दें, यह भी उस card क्लास का उपयोग करने का प्रयास कर रहा है,
00:05:16लेकिन इसे कोई भी कार्ड स्टाइलिंग नहीं मिलती है,
00:05:17क्योंकि इसका अपना कोई स्टाइल ब्लॉक नहीं है।
00:05:19इसे अपने पैरेंट से स्टाइल नहीं मिलता है,
00:05:21क्योंकि इसके पास वह यूनिक हैश नहीं है।
00:05:22हालाँकि यदि आप कंपोनेंट्स में स्टाइल्स शेयर करना चाहते हैं,
00:05:24तो TSRX में एक style कीवर्ड है,
00:05:26तो पैरेंट इस कीवर्ड के साथ स्टाइल का नाम
00:05:29एक ऐसे कंपोनेंट को पास करता है जो class name को प्रॉप के रूप में स्वीकार करता है,
00:05:31और यह सुनिश्चित करेगा कि जो यूनिक हैश वह जेनरेट करता है वह इसके साथ जाए।
00:05:35तो अब ध्यान दें कि इसकी स्टाइल पैरेंट जैसी ही है।
00:05:37आप तकनीकी रूप से अपनी स्टाइल्स के चारों ओर एक ग्लोबल सेलेक्टर का भी उपयोग कर सकते हैं
00:05:40ताकि स्कोपिंग से बचा जा सके और उन स्टाइल्स को ग्लोबली लागू किया जा सके,
00:05:42लेकिन मुझे लगता है कि यह थोड़ा गड़बड़ होने वाला है,
00:05:44और आप भूल जाएँगे कि आपकी स्टाइल्स कहाँ से आ रही हैं।
00:05:46व्यक्तिगत रूप से, मैं पूरी तरह से tailwind का समर्थक हूँ,
00:05:48इसलिए मैं शायद इस फीचर का ज़्यादा उपयोग नहीं करूँगा,
00:05:50और मैं tailwind पर ही कायम रहूँगा,
00:05:51लेकिन फिर भी यह काफी अच्छा है।
00:05:53आगे, एक ऐसा फीचर उन लोगों के लिए जो ध्यान दे रहे हैं।
00:05:56मैंने जो कोड ब्लॉक्स दिखाए हैं,
00:05:57उनमें इन स्टेटमेंट्स में टेक्स्ट को हैंडल करने के तरीके में थोड़ा अंतर रहा है।
00:06:01किसी एलिमेंट के अंदर सामान्य टेक्स्ट को डबल-कोटेड होना चाहिए।
00:06:04हम इसे वैसे ही नहीं लिख सकते जैसे हम JSX में लिख सकते हैं।
00:06:07हालाँकि आप अभी भी डायनेमिक वैल्यूज़ का उपयोग कर सकते हैं,
00:06:08और इस जैसी एक लाइन में,
00:06:10जो दो डबल-कोटेड स्ट्रिंग्स के बीच में है,
00:06:12और कंपाइल होने पर TSRX इसे आसानी से एक स्ट्रिंग में जोड़ देगा।
00:06:16दूसरा विकल्प जो आपके पास है वह है बस एक टेम्पलेट लिटरल का उपयोग करना।
00:06:19इससे भी वही परिणाम मिलता है।
00:06:20मेरे लिए, यह TSRX का उपयोग करने की छोटी-मोटी दिक्कतों में से एक रहा है
00:06:23क्योंकि मुझे टेक्स्ट के लिए कोट्स का उपयोग न करने की बहुत आदत हो गई है।
00:06:26हालाँकि एक अन्य टेक्स्ट-बेस्ड फीचर यह है
00:06:27कि TSRX वास्तव में उन स्ट्रिंग्स को हैंडल कर सकता है जिनमें वास्तविक HTML मार्कअप होता है,
00:06:31और इसे रेंडर करने के आपके पास दो तरीके हैं।
00:06:33पहला तरीका केवल text कीवर्ड का उपयोग करना है,
00:06:35जो एस्केप किए गए टेक्स्ट को रेंडर करने वाला है,
00:06:38ताकि आप शाब्दिक HTML स्ट्रिंग देख सकें,
00:06:40और यह क्रॉस-साइट स्क्रिप्टिंग से भी सुरक्षित है।
00:06:42तो यह तब उपयोगी होता है जब आप यह गारंटी देना चाहते हैं कि कोई चीज़ एक स्ट्रिंग होने जा रही है,
00:06:45और उस स्ट्रिंग का सोर्स थोड़ा अस्पष्ट है,
00:06:48इसलिए यह कोड लिखते समय आप ज़रूरी नहीं कि उसका टाइप जानते हों।
00:06:51दूसरा विकल्प यह है कि यदि आप स्ट्रिंग को HTML के रूप में रेंडर करना चाहते हैं,
00:06:54तो हम बस html कीवर्ड का उपयोग कर सकते हैं,
00:06:56और यह इसे वास्तविक HTML के रूप में पार्स करता है,
00:06:58लेकिन यह फीचर केवल Ripple में काम करता है और Vue इसके बहुत छोटे हिस्से को सपोर्ट करता है।
00:07:02एक अन्य फीचर जो React से संबंधित नहीं है,
00:07:03लेकिन यह उन लोगों के लिए दिलचस्प हो सकता है जो Ripple,
00:07:06Vue या Solid का उपयोग कर रहे हैं, वह है lazy destructuring।
00:07:08यदि आप इन फ्रेमवर्क्स में अपने प्रॉप्स को सामान्य रूप से डिस्ट्रक्चर करते हैं,
00:07:10तो आप कॉल टाइम पर प्रत्येक वैल्यू का स्नैपशॉट ले लेते हैं,
00:07:12और इससे प्रति-एक्सेस रिएक्टिविटी (per-access reactivity) टूट जाती है।
00:07:14तो TSRX में आप प्रॉप्स से पहले बस एक एम्परसेंड (&) जोड़ सकते हैं,
00:07:18और भले ही यह डिस्ट्रक्चरिंग जैसा दिखता है,
00:07:20लेकिन प्रत्येक बाइंडिंग वास्तव में वापस एक प्रॉपर्टी लुकअप में कंपाइल हो जाती है जहाँ इसका उपयोग किया जाता है।
00:07:23तो रनटाइम प्रत्येक एक्सेस को व्यक्तिगत रूप से देखता है,
00:07:25इसलिए सिग्नल अपडेट अभी भी री-रेंडर्स को ट्रिगर करते हैं,
00:07:28तो इसका मतलब है कि आपको डिस्ट्रक्चरिंग की सुगमता मिलती है,
00:07:30और फ्रेमवर्क अपनी रिएक्टिविटी बनाए रखता है।
00:07:32अंतिम फीचर जो मैं दिखाऊँगा वह एक अच्छा और सरल क्वालिटी-ऑफ-लाइफ फीचर है।
00:07:35क्या आपके पास कभी ऐसा प्रॉप रहा है जहाँ प्रॉप को पास की जाने वाली वैल्यू का नाम उसी प्रॉप के समान हो,
00:07:40आमतौर पर on-change फ़ंक्शन जैसी किसी चीज़ में?
00:07:42खैर, TSRX के साथ आप इसे शॉर्टहैंड के रूप में लिख सकते हैं,
00:07:45उसी तरह जैसे हम JavaScript ऑब्जेक्ट्स के साथ कर सकते हैं।
00:07:47यह साफ-सुथरा और सरल है।
00:07:49तो कुल मिलाकर, TSRX ऐसा महसूस कराता है कि यह सामान्य JavaScript फ्लो को वापस JSX में मिलाने का प्रयास कर रहा है
00:07:53और साथ ही कुछ क्वालिटी-ऑफ-लाइफ सुधार भी जोड़ रहा है,
00:07:55और मुझे इसके काफी सारे तत्व पसंद हैं।
00:07:57मैं वास्तव में सोचता हूँ कि इसके साथ मेरी मुख्य समस्या यह है कि यह बहुत सीमित (niche) है और बहुत देर से आया है
00:08:01जब AI हमारे अधिकांश कोड लिख रहा है,
00:08:03और AI जिस कोड को लिखने में अच्छा है वह JSX और React प्रतीत होता है।
00:08:07इसके बावजूद, मैंने TSRX का उपयोग करके Claude को कुछ डेमो दिए,
00:08:10और यह साइट की LLM.txt के आधार पर इसे अच्छी तरह से लिखने में कामयाब रहा,
00:08:14लेकिन फिर भी मुझे लगता है कि मैं खुद सामान्य React पर ही कायम रहूँगा।
00:08:17दूसरा नकारात्मक पहलू यह महसूस होता है कि, विशेष रूप से React के लिए,
00:08:19यह शीर्ष पर और अधिक कंपाइलर जादू जोड़ रहा है,
00:08:21और यह उन फ्लो को भी तोड़ रहा है जिन्हें सीखने में मैंने सालों बिताए हैं,
00:08:24इसलिए यह व्यक्तिगत रूप से मेरे लिए नहीं है, लेकिन इसका मतलब यह नहीं है कि यह खराब है।
00:08:27मुझे लगता है कि Svelte से आने वाले लोगों को यह बहुत पसंद आ सकता है,
00:08:30और यदि आपने पहले से ही Ripple का उपयोग किया है, तो आप शायद इसे पहले से ही पसंद करते होंगे।
00:08:33तो मुझे नीचे कमेंट्स में बताएं कि क्या आप ऐसा करते हैं,
00:08:35और वहाँ रहते हुए सब्सक्राइब करें, और हमेशा की तरह, मिलते हैं अगले वीडियो में।
00:08:40[संगीत]