00:00:00क्या आप पायथन के जबर्दस्त प्रशंसक हैं? मेरा मतलब है, क्या आप ऐसे व्यक्ति हैं जो सिर्फ पायथन कोड लिखना चाहते हैं
00:00:05और कुछ नहीं? अगर ऐसा है, तो मेरे पास आपके लिए एकदम सही चीज़ है। यह एक फ्रेमवर्क है जिसका नाम है
00:00:11Reflex और इसका लक्ष्य फुल-स्टैक पायथन कोड को प्रोडक्शन-रेडी वेब एप्लिकेशन
00:00:17में बदलने की बाधाओं और जटिलता को दूर करना है। इस वीडियो में, हम देखेंगे कि
00:00:22Reflex क्या है, यह कैसे काम करता है, और देखते हैं कि इसकी इतनी चर्चा क्यों है।
00:00:30तो Reflex जो मुख्य समस्या हल करने की कोशिश कर रहा है, वह है पायथन डेवलपर्स के लिए एक
00:00:36पूरी तरह से अलग स्टैक सीखने की मजबूरी, जिसमें जावास्क्रिप्ट, रिएक्ट, राउटिंग और बंडलर्स शामिल हैं, ताकि वे
00:00:43अपने कोड के लिए एक कार्यात्मक वेब इंटरफ़ेस बना सकें। Reflex डेवलपर्स को 100% शुद्ध पायथन में
00:00:50फुल-स्टैक ऐप बनाने की सुविधा देता है, ताकि आप बिना किसी रुकावट के पूरे स्टैक के लिए सिर्फ एक भाषा पर ध्यान केंद्रित कर सकें।
00:00:56उनका दावा यह भी है कि लॉन्च के बाद से डेवलपर्स ने इस फ्रेमवर्क के साथ 10 लाख से अधिक ऐप बनाए हैं
00:01:03और 30% फॉर्च्यून 500 कंपनियां अपने इंटरनल टूल्स के लिए इसका इस्तेमाल कर रही हैं।
00:01:10और हाल ही में, वे AI पर काफी ज़ोर दे रहे हैं और उन्होंने “Reflex Build” नामक एक टूल लॉन्च किया है,
00:01:15जो मूल रूप से आपको एक ही प्रॉम्प्ट से अपना ऐप बनाने की सुविधा देता है।
00:01:21साथ ही, वे अन्य SDK और टूल्स के लिए इंटीग्रेशन का समर्थन करते हैं जिससे आप अपने ऐप को
00:01:26Databricks, Okta, Stripe, AWS जैसी अन्य लोकप्रिय सेवाओं से आसानी से जोड़ सकते हैं। अब यह सब सुनने में तो प्रभावशाली लगता है,
00:01:34लेकिन मैं खुद इसे आज़माना चाहता हूँ और देखना चाहता हूँ कि यह कोड असल में कैसे काम करता है।
00:01:40चलिए एक नई डायरेक्टरी, ReflexTest बनाने से शुरू करते हैं, और फिर उसमें cd करते हैं। यहाँ से,
00:01:44डॉक्युमेंटेशन कहता है कि हम अपने Reflex प्रोजेक्ट को शुरू करने के लिए ये तीन कमांड चला सकते हैं। तो चलिए
00:01:48pip install reflex और फिर reflex init चलाकर शुरू करते हैं। और यहाँ हमें उनके
00:01:53टेम्पलेट्स में से किसी एक को चुनने का विकल्प मिलता है। लेकिन इस डेमो के लिए, हम इसे सरल रखेंगे और ब्लैंक Reflex ऐप विकल्प चुनेंगे।
00:01:57एक बार यह हो जाने के बाद, हम प्रोजेक्ट को अपने कोड एडिटर में खोल सकते हैं। और अगर हम
00:02:02reflex test फोल्डर खोलें, तो यहाँ reflex_test.py फ़ाइल में हमारा पूरा ऐप रहता है। हम देख सकते हैं कि
00:02:09इसमें एक RX कंपोनेंट सेक्शन और एक स्टेट क्लास है। अपना ऐप लॉन्च करने के लिए टर्मिनल में Reflex Build चलाते हैं।
00:02:15और यह पोर्ट 3000 पर हमारा ऐप शुरू कर देता है। और हम ब्राउज़र में इसका परिणाम देख सकते हैं।
00:02:20तो अब देखते हैं कि Reflex स्टेट को कैसे मैनेज करता है। हम एक साधारण काउंट वेरिएबल जोड़ने से शुरू कर सकते हैं।
00:02:25और इस वैल्यू को बदलने के लिए, हमें एक फंक्शन भी परिभाषित करना होगा जो ऐसा करेगा। तो
00:02:29काउंट वेरिएबल के नीचे, हम एक इंक्रीमेंट फंक्शन बना सकते हैं जो काउंट को एक से बढ़ा देगा। और
00:02:34इसके ऊपर RX इवेंट डेकोरेटर जोड़ने की सलाह दी जाती है, जो स्टेटिक टाइप चेकिंग को सक्षम बनाता है और
00:02:39यह सुनिश्चित करता है कि इवेंट हैंडलर्स को सही संख्या और प्रकार के तर्क मिलें। और फिर हम
00:02:44RX कंपोनेंट के रिटर्न स्टेटमेंट में एक साधारण बटन जोड़ सकते हैं। यह हमें टेक्स्ट फील्ड में काउंट दिखाएगा
00:02:48और क्लिक करने पर इंक्रीमेंट फंक्शन को ट्रिगर करेगा। Reflex हॉट रिलोडिंग को सपोर्ट करता है। तो अगर
00:02:53हम अब फ़ाइल को सेव करते हैं और ब्राउज़र खोलते हैं, तो हमें अपना काउंट बटन दिखाई देता है जो हर बार दबाने पर वैल्यू को बढ़ाता है।
00:02:58अब चलिए कुछ और दिलचस्प आज़माते हैं। चलिए अपने स्टेट में आइटम्स की एक एरे बनाते हैं।
00:03:02और सिद्धांत रूप में, हमें इस इनलाइन फॉर लूप के द्वारा इन आइटम्स को लिस्ट के रूप में रेंडर करने में सक्षम होना चाहिए।
00:03:08लेकिन यह काम नहीं करेगा क्योंकि यह वैल्यू कंपाइल टाइम पर ज्ञात नहीं है। देखिए,
00:03:13Reflex के काम करने का तरीका यह है कि जब आप अपना ऐप चलाते हैं, तो फ्रंट एंड जावास्क्रिप्ट कोड में कंपाइल हो जाता है
00:03:18जो ब्राउज़र में चलता है, जिसे Reflex की शब्दावली में कंपाइल टाइम कहा जाता है। बैक एंड पायथन में ही रहता है
00:03:23और ऐप के चलने के दौरान सर्वर पर चलता है। और इसे Reflex की शब्दावली में रनटाइम कहा जाता है।
00:03:27इसलिए हम अपने कंपोनेंट रेंडर में शुद्ध पायथन फॉर लूप नहीं चला सकते, लेकिन हम कंपोनेंट रेंडर ब्लॉक के बाहर शुद्ध पायथन ऑपरेशंस कर सकते हैं।
00:03:32लेकिन हम कंपोनेंट ब्लॉक में आइटम्स को लूप कैसे करें? खैर, इस मामले के लिए, हमें एक सरल रेंडर आइटम फंक्शन
00:03:37परिभाषित करना होगा जो हमारे आइटम को इस तरह रेंडर करेगा। और फिर हमें कंपोनेंट रेंडर ब्लॉक में
00:03:42फॉर लूप करने के लिए RxForEach फंक्शन का उपयोग करना होगा। और अब हम अपने आइटम्स को ऐप पर ठीक से रेंडर होते हुए देखते हैं।
00:03:47यही बात कंडीशनल रेंडरिंग पर भी लागू होती है। हम रिटर्न ब्लॉक में इस तरह सामान्य if-else स्टेटमेंट का उपयोग नहीं कर सकते।
00:03:53इसके बजाय, हमें इस तरह RxConditional फंक्शन का उपयोग करना होगा। और अगर हम अब बटन को पाँच
00:03:58से अधिक बार क्लिक करते हैं, तो हमें अपने ऐप पर टेक्स्ट दिखाई देगा। आखिरी चीज़ जो देखनी है वह यह है कि
00:04:02हम डेटा कैसे फ़ेच और रेंडर कर सकते हैं। इस डेमो के लिए, चलिए रैंडम यूज़लेस फैक्ट्स API से एक रैंडम फैक्ट
00:04:08फ़ेच करते हैं और इसे टेक्स्ट बॉक्स में दिखाते हैं। सबसे पहले, एक बुलियन वेरिएबल जोड़ते हैं जो यह बताएगा कि क्या हमारा
00:04:12डेटा फ़ेच हो रहा है, और एक साधारण खाली स्ट्रिंग जो हमारे फैक्ट को होल्ड करेगी। और फिर हम एक
00:04:17एसिंक्रोनस डेटा फ़ेचिंग फंक्शन बना सकते हैं जो डेटा फ़ेचिंग को ट्रू (true) पर सेट करेगा। और फिर यह
00:04:22HTTPX लाइब्रेरी का उपयोग करके हमारा रैंडम फैक्ट फ़ेच करेगा और उसे हमारे फैक्ट स्टेट वेरिएबल में स्टोर करेगा।
00:04:27और मैं asyncio के साथ एक सेकंड की देरी भी जोड़ रहा हूँ ताकि हम असल में रियल टाइम में डेटा फ़ेचिंग देख सकें।
00:04:33ऑपरेशन पूरा होने के बाद, हम डेटा फ़ेचिंग बुलियन को वापस फॉल्स (false) पर सेट कर देते हैं। और ध्यान दें कि कैसे हमने यहाँ
00:04:38यील्ड (yield) ऑपरेशन जोड़ा है। इसलिए जब भी हम किसी इवेंट हैंडलर में UI को कई बार अपडेट करना चाहते हैं,
00:04:43तो रेंडरर को अपडेट भेजने के लिए हम यील्ड का उपयोग कर सकते हैं। तो इस मामले में, जैसे ही
00:04:48डेटा फ़ेचिंग बदलता है, हम चाहते हैं कि हमारा UI उस बदलाव को दिखाए। और ऊपर HTTPX और asyncio इम्पोर्ट्स
00:04:52जोड़ना न भूलें। और अंत में, हमारे रेंडर फंक्शन में, हम वर्तमान स्थिति के आधार पर
00:04:57लोडिंग स्पिनर या फैक्ट दिखाने के लिए एक साधारण RX कंडीशनल फंक्शन का उपयोग कर सकते हैं। और अगर हम
00:05:03चाहते हैं कि यह फंक्शन पेज लोड होने पर हर बार ट्रिगर हो, तो हमें अपने RX कंपोनेंट के लिए एक डेकोरेटर जोड़ना होगा
00:05:08जो पेज लोड होने पर हमारे फ़ेच डेटा फंक्शन को ट्रिगर करेगा। और अब अगर हम अपना पेज रिलोड करते हैं, तो हम
00:05:12देख सकते हैं कि रैंडम फैक्ट फ़ेच होकर पेज पर रेंडर हो रहा है। आखिरी चीज़ जो मैं यहाँ करना चाहता हूँ
00:05:18वह है .web फोल्डर को देखना। जैसा कि हम यहाँ देख सकते हैं, हमने जो कुछ भी लिखा है वह बैकग्राउंड में
00:05:22एक रिएक्ट ऐप में कंपाइल और रेंडर किया जाता है, जो अपने अंदर Vite और Tailwind का उपयोग करता है। और यहाँ तक कि
00:05:27इसके रूट हैंडलिंग के लिए रिएक्ट राउटर भी है। और ईमानदारी से कहूँ तो, जैसे ही मैंने इसे देखा, मैं बहुत
00:05:33निराश हुआ। मुझे लगा कि उन्होंने कोई कस्टम जावास्क्रिप्ट कंपाइलर या कुछ मौलिक बनाया है।
00:05:38लेकिन इसका मतलब सिर्फ इतना है कि Reflex रिएक्ट के ऊपर एक और एब्स्ट्रैक्शन लेयर है। इसलिए Reflex को लेकर मेरे
00:05:42मिले-जुले विचार हैं। एक तरफ, एक सिंगल पायथन फुल-स्टैक फ्रेमवर्क का विचार वाकई शानदार है जो आपको
00:05:47सब कुछ शुद्ध पायथन में लिखने देता है। लेकिन यह जानकर बहुत निराशा हुई कि इसके अंदरूनी हिस्से में,
00:05:53यह सिर्फ एक रिएक्ट ऐप को रैप कर रहा है और नेटिव पायथन का उपयोग नहीं कर रहा है। यह इसे और भी
00:05:59जटिल बना देता है, क्योंकि अब आप एक नया आर्किटेक्चर सीखने और यह समझने के लिए मजबूर हैं कि
00:06:05Reflex स्टेट मैनेजमेंट को कैसे संभालता है, उन सभी विशेष मामलों (edge cases) की तो बात ही छोड़ दीजिए जो आ सकते हैं,
00:06:11इससे बेहतर है कि आप रिएक्ट के साथ ही बने रहें क्योंकि यह एक परखा हुआ और ठोस फ्रेमवर्क है। इसलिए अगर मुझे
00:06:16पायथन बैकएंड वाला कोई प्रोजेक्ट बनाना हो, तो मैं अभी भी अपने फ्रंटएंड के लिए जावास्क्रिप्ट फ्रेमवर्क का ही उपयोग करूँगा।
00:06:22Reflex मुझे पूरी तरह से पायथन फुल-स्टैक पर जाने के लिए मना नहीं पाया। लेकिन ये बस मेरी अपनी राय है। आप
00:06:28Reflex के बारे में क्या सोचते हैं? क्या आपको इस तरह के फुल-स्टैक पायथन फ्रेमवर्क का विचार पसंद है?
00:06:34मैं वाकई जानना चाहता हूँ कि आप क्या सोचते हैं। और दोस्तों, अगर आपको यह वीडियो पसंद आया हो, तो
00:06:39वीडियो के नीचे उस लाइक बटन को दबाकर हमें ज़रूर बताएं। और हमारे चैनल को सब्सक्राइब करना न भूलें।
00:06:44Better Stack से मैं हूँ Andris, और मैं आपसे अगले वीडियो में मिलूँगा।
00:06:50This has been Andris from better stack and I will see you in the next videos.