00:00:00Radix components का इस्तेमाल बंद करें और आगे बढ़ें, किस पर? Base UI पर। असल में, अगर आप shadcn के फैन हैं
00:00:06तो आपके पास अभी स्विच करने का विकल्प मौजूद है। अगर आपने पहले Base UI के बारे में नहीं सुना है, तो बता दूँ कि यह
00:00:10Radix, Floating UI और Material UI के असली क्रिएटर्स ने बनाया है और यह एक 'headless UI' लाइब्रेरी है।
00:00:15तो यह आपको कंपोनेंट्स की कार्यक्षमता और एक्सेसिबिलिटी तो देता है, लेकिन डिज़ाइन आप खुद तय करते हैं,
00:00:20जो आजकल बहुत ज़रूरी है क्योंकि LLMs अभी भी सभी एज-केसेस और एक्सेसिबिलिटी ज़रूरतों को संभालने में उतने अच्छे नहीं हैं।
00:00:24लेकिन मैंने अभी जो बताया, Radix भी बिल्कुल वैसा ही है।
00:00:30तो फिर एक नई लाइब्रेरी की क्या ज़रूरत है? चलिए, सीधे काम की बात पर आते हैं और मैं आपको मुख्य अंतर दिखाता हूँ।
00:00:35मैं जल्दी से आपको Base UI का डॉक्यूमेंटेशन दिखाऊँगा ताकि आप यहाँ बाईं ओर
00:00:44मौजूद सभी कंपोनेंट्स देख सकें। आप देख सकते हैं कि यहाँ लगभग वो सभी हैं जिनकी आपको अपनी कंपोनेंट लाइब्रेरी में ज़रूरत पड़ेगी,
00:00:48और यहाँ 'combo box' जैसे कुछ एडवांस कंपोनेंट्स भी हैं, जो आपको Radix में नहीं मिलते।
00:00:52आप देखेंगे कि इन सबके लिए बेहतरीन उदाहरण दिए गए हैं कि इन्हें CSS modules जैसी चीज़ों से कैसे स्टाइल किया जा सकता है।
00:00:57अगर आप चाहें तो इसे Tailwind के उदाहरण में भी बदल सकते हैं। इनका डॉक्यूमेंटेशन वाकई बहुत अच्छा है,
00:01:01लेकिन हम यहाँ डॉक्यूमेंटेशन की तुलना करने नहीं आए हैं, तो चलिए सीधे पहले बड़े अंतर पर चलते हैं,
00:01:06जिसके बारे में आप शायद सबसे ज़्यादा सुनेंगे—और वो ये है कि Base UI को एक्टिव रूप से मेंटेन किया जा रहा है,
00:01:10जबकि Radix एक तरह से सुस्त या 'ज़ोंबी' स्थिति में है। मेरा मतलब है, अगर हम इसके GitHub कंट्रीब्यूशन चार्ट को देखें,
00:01:15तो आप देखेंगे कि Base UI लगातार बढ़ रहा है, जबकि Radix में कभी-कभार ही कोई कमिट दिखता है।
00:01:20पिछले महीने क्लोज किए गए PRs और इश्यूज़ को देखने पर यह और भी साफ हो जाता है।
00:01:25आप देख सकते हैं कि Base UI ने 58 इश्यूज़ क्लोज किए और 154 पुल रिक्वेस्ट मर्ज किए हैं, जबकि Radix ने एक भी नहीं।
00:01:29Radix के साथ क्या हुआ, इसका सार यह है कि WorkOS ने Radix के पीछे वाली कंपनी को खरीद लिया
00:01:36और इसमें ज़्यादा निवेश नहीं किया। नतीजतन, Radix की टीम के ज़्यादातर लोग चले गए और अब स्थिति ऐसी है।
00:01:42Radix के को-क्रिएटर ने यहाँ तक कहा कि वे Radix का इस्तेमाल तभी करेंगे जब उनके पास कोई और विकल्प न बचे,
00:01:47और हाँ, अब वे Base UI पर काम कर रहे हैं। तो मुख्य बात यह है कि आपके ऐप्स और डिपेंडेंसीज़ एक्टिवली मेंटेन होनी चाहिए,
00:01:53ताकि भविष्य में किसी ऐसे बग की वजह से आपको परेशानी न हो जिसे कोई ठीक ही नहीं करने वाला।
00:01:58अच्छी बात ये है कि Base UI को Radix जैसा ही बनाया गया है, इसलिए माइग्रेशन में ज़्यादा दिक्कत नहीं होनी चाहिए।
00:02:02लेकिन इसका मतलब यह नहीं कि उन्होंने कोई सुधार नहीं किए हैं। मेरा पसंदीदा सुधार
00:02:08Radix के “as child” प्रॉप को हैंडल करने का तरीका है। अगर आपने इसे पहले नहीं देखा है,
00:02:13तो यहाँ मेरे पास एक Radix select है। अगर मैं यहाँ अपने select trigger के तौर पर एक कस्टम कंपोनेंट रेंडर करना चाहता हूँ,
00:02:17और मैं उसे सिर्फ select trigger कंपोनेंट से रैप कर दूँ, तो आप देखेंगे कि मुझे एक रैपर कंपोनेंट मिलता है,
00:02:22और फिर वो बटन जिस पर “subscribe” लिखा है (जिस पर वैसे आपको क्लिक करना चाहिए)।
00:02:27लेकिन अगर मैं चाहता हूँ कि subscribe बटन ही असल में select trigger के तौर पर काम करे,
00:02:31तो Radix में मुझे बस trigger पर “as child” प्रॉप जोड़ना होगा। यह Radix को बताता है कि
00:02:36इस select trigger की सभी प्रॉप्स और फंक्शनलिटी को उस कंपोनेंट के साथ मर्ज कर दे जो इसका चाइल्ड है।
00:02:41आप देख सकते हैं कि ऐसा हो रहा है क्योंकि यहाँ की क्लास नेम को बटन के साथ मर्ज किया जा रहा है,
00:02:46और इस केस में यह उसे ओवरराइट कर रही है। तो अगर मैं बस उस प्रॉप को डिलीट करके सेव करूँ,
00:02:50तो अब हमारे पास एक बटन है जो फंक्शनली मेरे select trigger के तौर पर काम कर रहा है।
00:02:55यह एक बहुत ही काम की फंक्शनलिटी है, लेकिन इसकी एक आम शिकायत यह थी कि यह बहुत स्पष्ट नहीं थी।
00:03:00मैं मानता हूँ कि कभी-कभी कोड देखते समय मुझसे यह प्रॉप छूट जाती थी और मैं समस्या की जड़ तक नहीं पहुँच पाता था।
00:03:04अब अगर हम यह देखें कि Base UI में इसे कैसे किया जाता है, तो वहाँ भी आपको बिल्कुल वही फंक्शनलिटी मिलती है।
00:03:09यहाँ मेरे पास एक बटन है जो select trigger का काम कर रहा है, लेकिन अगर आप कोड देखें,
00:03:13तो Base UI “as child” के बजाय “render” प्रॉप का इस्तेमाल करता है। इस render प्रॉप में आप वो कंपोनेंट बताते हैं
00:03:18जिसे आप select trigger के रूप में रेंडर करना चाहते हैं। यह एक बहुत छोटा बदलाव है, लेकिन मुझे लगता है कि
00:03:24इससे यह बिल्कुल साफ़ हो जाता है कि यहाँ क्या हो रहा है—यह सीधे तौर पर इस कंपोनेंट को रेंडर कर रहा है।
00:03:29आपको यह नहीं देखना पड़ता कि वह चाइल्ड कंपोनेंट का इस्तेमाल कर रहा है या फिर “as child” प्रॉप को ढूँढना पड़े।
00:03:34जैसा कि मैंने कहा, छोटा बदलाव है पर मेरी राय में बहुत अच्छा है। और रेंडर प्रॉप की ताकत सिर्फ यहीं तक नहीं है।
00:03:39हम यहाँ देख सकते हैं कि 'switch' बनाते समय हम रेंडर प्रॉप में एक फंक्शन भी पास कर सकते हैं।
00:03:43इससे हम उस कंपोनेंट के स्टेट और प्रॉप्स को एक्सेस कर पाते हैं जिसे हम बना रहे हैं, जैसे यहाँ switch thumb के लिए।
00:03:48यह हमें यह चुनने की आज़ादी देता है कि हम पास-थ्रू प्रॉप्स को किस कंपोनेंट पर लागू करना चाहते हैं,
00:03:52और हम स्टेट के आधार पर कुछ कस्टम रेंडरिंग या स्टाइलिंग लॉजिक भी लगा सकते हैं।
00:03:56जैसे switch thumb के मामले में, हम देख सकते हैं कि वह checked है, dirty है, disabled है या भरा हुआ है, और भी बहुत कुछ।
00:04:01यहाँ हम बस यह चेक कर रहे हैं कि वह checked है या नहीं, और उस आधार पर हम एक अलग आइकॉन रेंडर कर रहे हैं।
00:04:05यहाँ तक कि एक 'hook' भी है जो आपको अपने कस्टम कंपोनेंट्स में उस रेंडर प्रॉप को इस्तेमाल करने की सुविधा देता है।
00:04:10खैर, यह थोड़ा एडवांस हो रहा है, लेकिन उम्मीद है आप देख पा रहे होंगे कि Base UI के साथ आप कुछ भी कस्टम आसानी से कर सकते हैं।
00:04:14अब वापस मेरे select कंपोनेंट पर चलते हैं। अगला अंतर यह है कि Base UI आपके कुछ कंपोनेंट्स को डेटा-ड्रिवन बनाने की अनुमति देता है।
00:04:18हम इसे यहाँ select के मामले में देख सकते हैं। अभी मेरे पास Radix select का कोड है।
00:04:22हमारे पास एक एरे (array) है जिसमें लेबल और वैल्यू हैं, और इन वैल्यूज़ को select में लाने के लिए
00:04:27हमें बस apples एरे पर मैप करना होता है और Radix में एक select item रेंडर करना होता है, जिससे वैल्यूज़ इस तरह जुड़ जाती हैं।
00:04:31अब अगर हम देखें कि Base UI में यह कैसे होता है, तो आप देखेंगे कि यह काफी मिलता-जुलता है।
00:04:35हमारे पास अभी भी लेबल और वैल्यूज़ का वही एरे है और हम अभी भी उस पर मैप करके select item रेंडर कर रहे हैं।
00:04:40लेकिन हम इसे एक और जगह शामिल कर रहे हैं, जो कि यहाँ select root है। हम उस एरे को यहाँ डाल रहे हैं,
00:04:44और इसका एक सूक्ष्म प्रभाव यह होता है कि कंपोनेंट को रेंडर होने से पहले ही पता चल जाता है कि उसे क्या डेटा रेंडर करना है।
00:04:49इसका मतलब है कि परफॉरमेंस थोड़ी बेहतर होती है, खासकर सर्वर-साइड रेंडरिंग के दौरान।
00:04:54हालाँकि, मुझे लगता है कि इसमें एक सुधार हो सकता है। अभी मैं apples को 'items' प्रॉप के रूप में पास कर रहा हूँ,
00:04:59लेकिन नीचे मैं फिर से apples एरे पर मैप भी कर रहा हूँ, यानी हम इसका दो जगह इस्तेमाल कर रहे हैं।
00:05:03मुझे लगता है कि उन्हें वैसा करना चाहिए जैसा React Aria करती है। यहाँ आप देख सकते हैं कि हमारे पास 'animals' एरे है,
00:05:08हम इसे यहाँ items के रूप में पास कर रहे हैं और फिर उसके चिल्ड्रन के लिए हम बस एक फंक्शन का इस्तेमाल कर रहे हैं।
00:05:13यह फंक्शन उन सभी आइटम्स को जान लेगा जो पैरेंट एलीमेंट पर पास किए गए हैं। इससे हमें एरे को दो बार इस्तेमाल नहीं करना पड़ेगा
00:05:17और पैरेंट एलीमेंट ही डेटा प्रोवाइडर का काम करेगा। तो निश्चित रूप से, मुझे लगता है कि इसमें थोड़ा सुधार की गुंजाइश है।
00:05:22लेकिन वापस अपने select कंपोनेंट पर आते हैं, मैं आपको एक और अंतर दिखाना चाहता हूँ।
00:05:26यह खास तौर पर select कंपोनेंट के लिए है। रेंडर प्रॉप और डेटा-ड्रिवन अप्रोच तो आपको लगभग सभी कंपोनेंट्स में दिखेगी,
00:05:32लेकिन यह चीज़ सिर्फ select के लिए है—और वो है 'multi-select'। यह Radix में बहुत ज़्यादा खलने वाली कमी थी।
00:05:36Base UI में आपको बस select root पर “multiple” प्रॉप जोड़ना है (जो true या false हो सकता है),
00:05:41और आपका select एक multi-select बन जाता है। यह इतना आसान है। और इसे एक कदम आगे ले जाते हुए,
00:05:45Base UI में कुछ और कंपोनेंट्स भी हैं जो Radix में नहीं थे, जैसे combo box और auto complete।
00:05:50यही एक्टिवली मेंटेन होने का असली फायदा है—वे यूज़र की रिक्वेस्ट पर तुरंत काम कर सकते हैं।
00:05:55अब Radix और Base UI के बीच दो और अंतर हैं जो मैं दिखाना चाहता हूँ। इसके लिए हम checkbox कंपोनेंट पर स्विच करेंगे
00:05:59क्योंकि मैं उस select कंपोनेंट से थोड़ा बोर हो गया हूँ। पहला अंतर जो मैं दिखाना चाहता हूँ वो स्टाइलिंग को लेकर है।
00:06:03Base UI आपको स्टाइलिंग का एक और विकल्प देता है जो मुझे बहुत कूल लगता है। अभी मैं Tailwind का इस्तेमाल कर रहा हूँ।
00:06:08आप सामान्य CSS, CSS modules और अन्य पारंपरिक तरीके इस्तेमाल कर सकते हैं। लेकिन अगर आप Tailwind जैसी चीज़ इस्तेमाल कर रहे हैं,
00:06:13तो ऐसे कंपोनेंट को स्टाइल करने का तरीका आमतौर पर स्टेट के लिए 'data attributes' का इस्तेमाल करना होता है।
00:06:17यहाँ हमारे पास “data checked” है और अगर यह checked है, तो हम 'background primary' इस्तेमाल करेंगे।
00:06:22Tailwind में इसे स्टाइल करने के लिए एक बहुत लंबी स्ट्रिंग बन जाती है, जो कभी-कभी थोड़ी समस्या पैदा कर सकती है।
00:06:27Base UI जो विकल्प देता है, वो ये है कि आप अपनी क्लास नेम के रूप में एक फंक्शन का इस्तेमाल कर सकते हैं।
00:06:33इससे आपको कंपोनेंट के स्टेट का एक्सेस मिल जाता है। यहाँ checkbox के मामले में,
00:06:38मैं इस आधार पर स्टाइल लगा रहा हूँ कि स्टेट 'checked' है या 'disabled'। आप देख सकते हैं कि मैं इसे एक सिंपल कंडिशनल के साथ कर रहा हूँ।
00:06:41मुझे लगता है कि कोड पर सरसरी नज़र डालने पर यह देखना ज़्यादा आसान है कि checked और disabled स्टाइल्स कहाँ से आ रही हैं,
00:06:45बजाय इसके कि आप उस एक लंबी लाइन को स्कैन करें और डेटा एट्रिब्यूट्स को ढूँढें।
00:06:50अगर आप vanilla CSS जैसा कुछ इस्तेमाल कर रहे हैं, तो यह और भी ज़्यादा मददगार होता है।
00:06:55यह 'Tailwind Variants' जैसी दूसरी लाइब्रेरी के साथ भी बहुत अच्छा काम करता है, जिसे मैं काफी पसंद करता हूँ।
00:06:59आप देख सकते हैं कि मैं अपने checkbox फंक्शन में स्टेट पास कर रहा हूँ और ऊपर हमारे पास बेस स्टाइल्स के साथ-साथ वेरिएंट्स भी हैं।
00:07:04आप देख सकते हैं कि मैं बस यह कह रहा हूँ—अगर checked 'true' है तो ये स्टाइल्स लगाओ, और अगर disabled 'true' है तो ये।
00:07:08मुझे लगता है कि डेटा एट्रिब्यूट्स के मुकाबले यह तरीका ज़्यादा साफ़ है, लेकिन यह आपकी पसंद और सुविधा पर निर्भर करता है।
00:07:13यह बहुत अच्छी बात है कि Base UI हमें इतने सारे विकल्प देता है। मैं यह भी बता दूँ कि क्लास नेम के तौर पर फंक्शन का इस्तेमाल करना
00:07:17मुझे सबसे पहले React Aria में पसंद आया था। तो मुझे ऐसा लगता है कि एक तरफ React Aria है जिसका लर्निंग कर्व थोड़ा कठिन है,
00:07:22और दूसरी तरफ Radix है जो काफी सरल है—Base UI इनके बीच का रास्ता है जिसने दोनों की बेहतरीन खूबियाँ लेकर
00:07:26मेरे लिए एक बेहतरीन हेडलेस लाइब्रेरी बनाई है। इस वीडियो में मुझे बस यही मुख्य अंतर बताने थे, लेकिन अभी और भी बहुत कुछ है।
00:07:31जैसे Base UI में React Hook Form और TanStack Form के लिए बेहतरीन सपोर्ट है। इसमें एनीमेशन सपोर्ट भी है
00:07:35ताकि आप अपने कंपोनेंट्स को आसानी से एनिमेट कर सकें। इसमें 'input scrubbing', 'nested dialogues' और होवर पर मेनू ट्रिगर करने जैसे फीचर्स भी हैं।
00:07:40मुझे यकीन है कि अगर आपकी कोई जायज़ रिक्वेस्ट होगी, तो वे GitHub पर उस पर ज़रूर प्रतिक्रिया देंगे क्योंकि इसे एक्टिवली मेंटेन किया जा रहा है।
00:07:45हालाँकि, मैं यह भी कहूँगा कि मैं तुरंत अपने Radix ऐप को Base UI पर माइग्रेट करने के लिए नहीं दौड़ूँगा क्योंकि Radix पूरी तरह खराब नहीं है।
00:07:49लेकिन अगर मैं कोई नया प्रोजेक्ट शुरू कर रहा हूँ, तो मैं निश्चित रूप से Base UI का ही इस्तेमाल करूँगा।
00:07:53और अगर मुझे combo box या autocomplete जैसे फीचर्स की ज़रूरत हुई, तो भी मैं माइग्रेशन के बारे में सोचूँगा।
00:07:58कमेंट में मुझे ज़रूर बताएँ कि आप Base UI के बारे में क्या सोचते हैं। नीचे दिए बटन से सब्सक्राइब करें और हमेशा की तरह,
00:08:02अगले वीडियो में मिलते हैं।
00:08:06comfortable with using it's just super nice that base ui gives us all of these choices i'll also
00:08:11add that using a function as a class name was something i first fell in love with from react
00:08:14area so it really seems to me like we have react area over here which does have a steeper learning
00:08:19curve and radix which is quite simple and base ui has sort of met in the middle and taken the
00:08:23features that i like about both of them and created me the ultimate headless library now that's all of
00:08:28the key differences that i wanted to go over in this video but there is still loads more like base ui has
00:08:33great support for react hook form and tan stack form it has animation support to make it a nice
00:08:38and easy process to actually animate your components and it even has features like input scrubbing
00:08:42nested dialogues and triggering menus on hover and i'm sure if you have a reasonable request they'd
00:08:47actually respond to it over on the github as it is actively maintained it is also worth saying though
00:08:52that i probably wouldn't jump to migrating my radix app over to base ui straight away as i don't think
00:08:57radix is completely broken if i'm starting a new project i definitely use base ui now and if i wanted
00:09:02a feature like a combo box or an autocomplete i'd also consider migrating my application let me know
00:09:07what you think of base ui in the comments though while you're down there subscribe and as always
00:09:11see you in the next one