Transcript
00:00:00यह OpenTui है, जो टर्मिनल इंटरफेस बनाने के लिए एक Zig-संचालित लाइब्रेरी है
00:00:04जिसमें React, Solid और FreeJS के लिए बाइंडिंग्स हैं, ताकि आप वेब एप्लिकेशन
00:00:09बनाने के तरीके से ही बेहतरीन TUI बना सकें। इसे Anomaly ने बनाया है,
00:00:14जो OpenCode के पीछे की टीम है, एक लोकप्रिय ओपन सोर्स कोडिंग एजेंट,
00:00:19जो वास्तव में OpenCode के पीछे के यूज़र इंटरफेस को संचालित करता है, जिसे लाखों लोग
00:00:24नियमित रूप से इस्तेमाल करते हैं। लेकिन यह नई लाइब्रेरी अन्य लोकप्रिय React
00:00:29टर्मिनल इंटरफेस टूल के मुकाबले कैसी है जो लंबे समय से इस्तेमाल किया जा रहा है और
00:00:35कई लोकप्रिय कोडिंग एजेंटों को चलाता है? सब्सक्राइब करें और आइए जानते हैं!
00:00:40तो Ink React के साथ टर्मिनल इंटरफेस बनाने के लिए गो-टू लाइब्रेरी है। मैंने वास्तव में
00:00:44इस पर एक वीडियो बनाया है जिसे आप यहाँ देख सकते हैं। लेकिन इसमें कुछ समस्याएं हैं। सबसे पहले,
00:00:51साधारण ऐप्स 50MB से ज़्यादा मेमोरी का उपयोग करते हैं और इसमें 30fps की हार्ड-कोडेड कैप है, जो
00:00:56ज़्यादातर एप्लिकेशन के लिए ठीक है। लेकिन अगर आप ऐसा ऐप बना रहे हैं जो बहुत सारा टेक्स्ट स्ट्रीम करता है,
00:01:00जैसे कि एक कोडिंग एजेंट, तो फ्रेम कैप पूरे अनुभव को धीमा बना देती है। तो Anomaly
00:01:06की टीम, जिसने मूल रूप से OpenCode बनाने के लिए Golang के साथ Bubble T का इस्तेमाल किया था, इसे Ink का उपयोग किए बिना
00:01:13TypeScript में फिर से लिखना चाहती थी। इसलिए उन्होंने OpenTui बनाया। मेरा मतलब है, उन्होंने OpenTui खरीदा। उन्होंने
00:01:18इसे बिल्कुल शून्य से नहीं बनाया क्योंकि Commander FX पहले से ही एक Zig-आधारित टर्मिनल
00:01:24लाइब्रेरी बना रहा था। तो Anomaly ने उसे प्रायोजित किया और उसके काम के ऊपर OpenTui बनाया। तो Zig कोर सारा
00:01:30भारी रेंडरिंग करता है और TypeScript बाइंडिंग्स आपको React या Solid में UI घटक लिखने की अनुमति देती हैं। लेकिन
00:01:36वास्तव में चतुर हिस्सा BUN फॉरेन फंक्शन इंटरफेस है, जो आपको बिना किसी देरी के सीधे
00:01:42TypeScript से Zig नेटिव कोड से बात करने की अनुमति देता है, जो OpenTui को बहुत
00:01:47परफॉरमेंस वाला बनाता है। यह Flexbox लेआउट के लिए योगा का उपयोग करता है, इसमें इनपुट और सिलेक्ट जैसे इन-बिल्ट घटक आते हैं,
00:01:54और इसमें एक 3.js पैकेज भी है जो आपको टर्मिनल के अंदर वेब GPU 3D ग्राफिक्स रेंडर करने देता है,
00:01:59जो काफी अविश्वसनीय है। वास्तव में, आइए एक बहुत ही सरल डेमो पर OpenTui को आज़माकर देखें। ऐसे
00:02:04कई तरीके हैं जिनसे आप एक बुनियादी OpenTui प्रोजेक्ट सेट कर सकते हैं। व्यक्तिगत रूप से, मुझे BUN CreateTui
00:02:09का उपयोग करना पसंद है क्योंकि यह आपको यह बहुत उपयोगी विज़ार्ड देता है जिसका उपयोग आप अपने प्रोजेक्ट को नाम देने और
00:02:13उपयोग करने के लिए टेम्पलेट चुनने के लिए कर सकते हैं। अब मैं React के साथ जा रहा हूँ, लेकिन मैं वीडियो में बाद में समझाऊँगा,
00:02:17इन तीनों टेम्पलेट्स के बीच के अंतर। तो एक बार जब यह हो जाता है, तो आपको कुछ मानक फाइलें मिल जाती हैं
00:02:21एक इंडेक्स के साथ जो एक बुनियादी फुल स्क्रीन प्रोजेक्ट चलाता है। और अगर हम कोड देखें,
00:02:27तो हम यहाँ लाइन 15 पर देख सकते हैं कि यह OpenTui की रेंडरिंग का उपयोग करने के लिए CreateCLI रेंडरर का उपयोग कर रहा है
00:02:32इंजन। और उसके नीचे CreateRoot है, जो ऐप घटक को रेंडर करता है। और अगर आप React से परिचित हैं,
00:02:37तो यह वह कोड है जो इसे HTML फाइल में माउंट करता है। लेकिन क्योंकि हम टर्मिनल पर रेंडर कर रहे हैं,
00:02:42इस प्रोजेक्ट में index.html नहीं है, बल्कि यह एक कस्टम React रिकॉन्सिलर का उपयोग करता है जो HTML घटकों के बजाय
00:02:49टर्मिनल बॉक्स और टेक्स्ट का उपयोग करता है। उसके ऊपर, हमारे पास JSX है जो बॉक्स घटक का उपयोग करता है
00:02:55और उसके अंदर रखे बॉक्स को संरेखित करने के लिए कुछ योगा फ्लेक्स बॉक्स प्रॉप्स का उपयोग करता है जो ASCII फोंट और कुछ बुनियादी टेक्स्ट रेंडर करता है।
00:03:00अब, यदि आप नहीं चाहते कि यह एक फुल स्क्रीन ऐप हो, तो OpenTui कई स्क्रीन मोड का समर्थन करता है।
00:03:05और हम इसे फुटर ऊंचाई के साथ स्प्लिट फुटर में बदल सकते हैं, जो रेंडर को टर्मिनल के नीचे एक आरक्षित
00:03:10क्षेत्र में पिन करता है। लेकिन आइए केवल स्क्रीन मोड बदलने से कुछ ज़्यादा दिलचस्प करने की कोशिश करें। यहाँ कुछ
00:03:17शीर्षक टेक्स्ट और एक नाम इनपुट के साथ एक बुनियादी Tui है। अब, इसे देखें। OpenTui के साथ, आपको मुफ्त में
00:03:21रिस्पॉन्सिवनेस मिलती है। तो मेरे टर्मिनल की चौड़ाई चाहे कुछ भी हो, सब कुछ अच्छा दिखता है। और यदि
00:03:26हम कोड पर एक नज़र डालें, तो यह कुछ बहुत ही परिचित React सिंटैक्स का उपयोग कर रहा है। तो यहाँ, हमारे पास एक use
00:03:32state है जो नाम सेट कर रहा है। और इनपुट में, हम on input प्रॉप पर नाम अपडेट कर रहे हैं। और वह
00:03:37टेक्स्ट में बदल जाता है। अब, एक बहुत ही अच्छी चीज़ जो OpenTui करता है वह HMR के बिना लाइव रीलोडिंग है।
00:03:43तो हम यहाँ देख सकते हैं, यदि मैं टेक्स्ट को “goodbye” में बदल दूँ और फिर फाइल को सेव करूँ, तो यह स्वचालित रूप से
00:03:48अपडेट हो जाता है। और एक रिस्पॉन्सिव इनपुट होना अच्छा है, लेकिन कभी-कभी टेक्स्ट दिखाई ही नहीं देता। इसे
00:03:52चौड़ाई जोड़कर ठीक किया जा सकता है, जिससे चीजें बहुत आसान हो जाती हैं। और बॉक्स घटक के साथ, हमारे पास
00:03:56बॉर्डर और बैकग्राउंड कलर जैसे कुछ बहुत ही अच्छे प्रॉप्स हैं, जो तुरंत इस टर्मिनल ऐप को नया लुक देते हैं।
00:04:01फिर से, हम इस टेक्स्ट के बजाय ASCII फोंट का उपयोग कर सकते हैं, जिससे हेडिंग थोड़ी और अलग दिखती है।
00:04:05और निश्चित रूप से, आप कई ASCII फोंट चुन सकते हैं। याद रखें, क्योंकि यह एक टर्मिनल
00:04:10ऐप है, न कि वेब पेज, यह उन सभी फोंट को रेंडर नहीं करता जो आपके सिस्टम पर हैं, बस उन चीजों को जो
00:04:15टर्मिनल का समर्थन करती हैं। हम इस शर्त के आधार पर अलग-अलग JSX प्रदर्शित करके एक नियमित React ऐप की तरह ही
00:04:20सबमिट करने पर व्यू बदलने जैसे काम भी कर सकते हैं। लेकिन यहाँ एक चीज़ है जिसकी आप टर्मिनल से उम्मीद नहीं करेंगे।
00:04:25यदि मैं अपना नाम सबमिट करता हूँ, तो दूसरी स्थिति अब फीकी होकर जगह ले लेती है। और यह OpenTui के use timeline हुक के साथ किया जाता है,
00:04:30जिसका उपयोग एनिमेशन अवधि सेट करने, लक्ष्य सेट करने के लिए किया जाता है। तो इस मामले में, घटक की ओपेसिटी शून्य है और ऑफसेट आठ है,
00:04:36जिसका मतलब है कि इसका मार्जिन टॉप सेंटर के नीचे है। और यहाँ एनिमेशन ऑफसेट शून्य के साथ समाप्त होता है
00:04:40और ओपेसिटी एक है, यहाँ सेट किए गए ऑफसेट और ओपेसिटी स्थितियों को अपडेट करके। और इन
00:04:45मानों को बॉक्स प्रॉप्स में अपडेट किया जाता है। अब यह थोड़ा झटकेदार दिखता है क्योंकि टर्मिनल एनिमेशन को
00:04:50पंक्ति दर पंक्ति चलना होता है। तो एक तरह से ग्रिड पर, लेकिन यह बहुत अच्छा है कि OpenTui आपको ऐसा करने की अनुमति देता है
00:04:55इतनी आसानी से। जो वास्तव में अच्छा है वह यह है कि हम अब तक सीखी गई हर चीज़ को फ्लेक्सबॉक्स का उपयोग करके जोड़ सकते हैं
00:05:00लेआउट का उपयोग करके बॉक्स को एक-दूसरे के बगल में रखा जा सकता है। तो हमारे पास एक तरफ इनपुट है और दूसरी तरफ दूसरा बॉक्स।
00:05:05और यदि हम इनपुट में टाइप करते हैं, तो सबमिट करने पर हम वैल्यू को दूसरे बॉक्स में जाते हुए एनिमेट कर सकते हैं,
00:05:10जो एक बहुत ही अच्छा स्पर्श है। और यहाँ से, हम OpenTui के साथ बहुत कुछ कर सकते हैं,
00:05:14जैसे use keyboard हुक के साथ कीबोर्ड नेविगेशन सक्षम करना, node OS का उपयोग करके सिस्टम डेटा दिखाना,
00:05:19माउस समर्थन वर्चुअलाइज्ड सूचियों को सक्षम करना। और क्योंकि यह सब BUN के ऊपर चल रहा है,
00:05:24आप BUN SQLite, BUN Postgres जैसी चीजों का उपयोग कर सकते हैं, या किसी भी वेबसाइट की तरह
00:05:28बाहरी जानकारी प्राप्त कर सकते हैं। और इसकी अच्छी बात यह है कि मेरे ऐप को कंपाइल करने के बाद, हाँ, यह 71
00:05:34मेगाबाइट का है क्योंकि इसमें BUN रनटाइम और React रिकॉन्सिलिएशन शामिल है। लेकिन जब मैं इसे चलाता हूँ,
00:05:39तो आप देख सकते हैं कि यह 50 मेगाबाइट से कम मेमोरी का उपयोग करता है। और क्योंकि React इतना लोकप्रिय है,
00:05:43LLMs इसे अच्छी तरह जानते हैं। और इसलिए OpenTui में ऐप्स बनाना बहुत आसान हो सकता है
00:05:49बिना डॉक्यूमेंटेशन को बार-बार देखे। तो यह OpenTui का एक बहुत, बहुत सरल
00:05:53रन थ्रू है। लेकिन चलिए वीडियो में थोड़ा पीछे चलते हैं, जहाँ मैंने React, Solid और Core के बीच
00:05:58अंतर समझाने का वादा किया था। तो अगर आप फ्रंट-एंड वेब डेवलपमेंट के बारे में जानते हैं तो यह काफी सरल है।
00:06:02मूल रूप से, वे सभी एक ही ZIC कोर के माध्यम से रेंडर होते हैं। तो आपके टर्मिनल पर वास्तविक ड्राइंग
00:06:07काफी समान है। केवल अंतर यह है कि आप अपने घटक कैसे लिखते हैं
00:06:11और अपडेट कैसे लागू होते हैं। तो React आपके घटकों को फिर से चलाता है और हर बदलाव पर एक वर्चुअल ट्री को डिफ करता है,
00:06:17जो काफी हद तक वर्चुअल DOM के काम करने के तरीके के समान है। Solid ठीक-ठाक अपडेट का उपयोग करता है,
00:06:22इसलिए यह केवल उसी चीज को अपडेट करता है जो बदल गई है। और Core उन सभी को छोड़ देता है, जिसका अर्थ है कि आप
00:06:27सीधे ऑब्जेक्ट को म्यूटेट करते हैं। तो कागज पर, React सबसे भारी है और Core सबसे हल्का है। लेकिन व्यवहार में,
00:06:33ज़्यादातर टर्मिनल ऐप्स के लिए, अंतर छोटा है क्योंकि सारा भारी काम ZIC कोर द्वारा किया जाता है,
00:06:38जिसका मतलब है कि इस मामले में, फ्रेमवर्क केवल व्यक्तिगत प्राथमिकता है। लेकिन भले ही एक OpenTui
00:06:44ऐप पूरे BUN रनटाइम और फ्रेमवर्क-विशिष्ट रिकॉन्सिलिएशन के साथ आता है, यदि कोई हो,
00:06:50परफॉरमेंस और ऐप का आकार अभी भी Ink से बहुत छोटा है, लेकिन निश्चित रूप से Ratatouille या Bubble Tea जैसी नेटिव
00:06:56चीजों जितना परफॉरमेंस नहीं है। लेकिन मेरी राय में, किसी भी UI को कंपोज़ करने के लिए JSX सबसे अच्छा
00:07:02और सबसे सहज तरीका है। और मैं मामूली मेमोरी और आकार के नुकसान को सहना पसंद करूँगा और
00:07:09Tui बनाने का अनुभव बेहतर रखूँगा, बजाय इसके कि कुछ ऐसा हो जो आकार में हल्का हो और
00:07:15मेमोरी उपयोग में हल्का हो, लेकिन उसे लिखना और अपडेट करना एक दर्द हो। तो इसे ध्यान में रखते हुए, मैं OpenTui को चुनूँगा
00:07:20हर बार Ink के ऊपर, अगर मैं कभी टर्मिनल एप्लिकेशन बनाने के लिए समय निकाल पाया,
00:07:25जो मैं वादा करता हूँ कि जल्द ही करूँगा।
Community Posts
No posts yet. Be the first to write about this video!
Write about this video