हॉटवायर के साथ इंटरैक्टिव रेल्स ऐप्स तेजी से बनाएं: एक शुरुआती गाइड

हॉटवायर आजकल हर रेल्स डेवलपर के लिए एक गर्म विषय है। यदि आप रेल्स के साथ काम करते हैं, तो बहुत संभावना है कि आपने इसके बारे में पहले ही बहुत कुछ सुन लिया हो।

हॉटवायर क्या है?

हॉटवायर वेब और मोबाइल एप्लिकेशन बनाने का एक नया दृष्टिकोण है जो HTML को वायर पर भेजता है। यह एक सिंगल लाइब्रेरी नहीं है, बल्कि इसमें टर्बो, स्टिमुलस और स्ट्राडा (इस साल के अंत में आ रहा है) शामिल हैं। हम अगले सेक्शन में इनमें से प्रत्येक पर विस्तार से चर्चा करेंगे।

साइड नोट: हालांकि हॉटवायर रेल्स से अत्यधिक जुड़ा हुआ है, लेकिन यह पूरी तरह से भाषा-अज्ञेय है, इसलिए यह अन्य एप्लिकेशन के साथ भी उतना ही अच्छा काम कर सकता है। मैं कई नॉन-रेल्स ऐप्स और कुछ स्टेटिक वेबसाइट्स पर प्रोडक्शन में स्टिमुलस का उपयोग कर रहा हूं। आप रेल्स के बिना टर्बो का उपयोग भी कर सकते हैं।

लेकिन अभी के लिए रेल्स की दुनिया में वापस आते हैं।

अपने रेल्स ऐप में हॉटवायर क्यों उपयोग करें?

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

• कुछ कंटेंट को यूजर के इंटरैक्शन के आधार पर सशर्त रूप से प्रदर्शित/छिपाया जाए (उदाहरण के लिए, एक एड्रेस फॉर्म जहां राज्यों की सूची चयनित देश के आधार पर ऑटोमैटिकली बदल जाती है)।
• कुछ कंटेंट को रियल-टाइम में अपडेट किया जाए (उदाहरण के लिए, ट्विटर जैसा फीड जहां नए ट्वीट्स ऑटोमैटिकली पेज में जुड़ जाते हैं)।
• अपने पेज के कुछ पार्ट्स को लेजी-लोड किया जाए (उदाहरण के लिए, एक अकॉर्डियन के अंदर, आप टाइटल्स लोड कर सकते हैं और डिटेल्स को लेजी-लोड के लिए मार्क कर सकते हैं ताकि लोड टाइम तेज हो)।

हॉटवायर के घटक

जैसा कि पहले बताया गया है, हॉटवायर वेब ऐप्स बनाने की नई (और कुछ पुरानी) तकनीकों का एक संग्रह है। आइए अगले कुछ सेक्शन में इनमें से प्रत्येक पर चर्चा करते हैं।

टर्बो

HTML टर्बो के मूल में है। टर्बो वायर पर आने वाले HTML डेटा को संभालने और इसे फुल पेज रीलोड के बिना आपके एप्लिकेशन पर प्रदर्शित करने के लिए कई तकनीकें प्रदान करता है। यह इसमें शामिल है:

• टर्बो ड्राइव

  अगर आपने पहले टर्बोलिंक्स का उपयोग किया है, तो आप टर्बो ड्राइव के साथ घर जैसा महसूस करेंगे। इसके मूल में, कुछ JS कोड आपके एप्लिकेशन पर JavaScript इवेंट्स को इंटरसेप्ट करता है, HTML को एसिंक्रोनसली लोड करता है, और आपके HTML मार्कअप के पार्ट्स को रिप्लेस करता है।

• टर्बो फ्रेम्स

  टर्बो फ्रेम्स आपके मार्कअप के पार्ट्स को अलग-अलग सेक्शन में डीकपल करते हैं जिन्हें स्वतंत्र रूप से लोड किया जा सकता है।

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

• टर्बो स्ट्रीम्स

  टर्बो स्ट्रीम्स आपके एप्लिकेशन में रियल-टाइम डेटा लाने के लिए यूटिलिटीज प्रदान करता है। उदाहरण के लिए, मान लीजिए आप ट्विटर जैसा न्यूज फीड बना रहे हैं। आप चाहते हैं कि नए ट्वीट्स पोस्ट होते ही यूजर के फीड में खिंच जाएं बिना पेज रीलोड किए। टर्बो स्ट्रीम्स आपको एक भी लाइन JS लिखे बिना ऐसा करने की अनुमति देता है।

• टर्बो नेटिव

  टर्बो नेटिव आपको अपने वेब एप्लिकेशन के चारों ओर एक नेटिव रैपर बनाने देता है। नेविगेशन और इंटरैक्शन नेटिव महसूस होंगे बिना आपको सभी स्क्रीन्स को नेटिवली रीडू किए।

  आप बाकी एप्लिकेशन को वेब के माध्यम से डिलीवर करते रहेंगे। इस तरह, आप अपने एप्लिकेशन के वास्तव में इंटरैक्टिव पार्ट्स पर ध्यान केंद्रित कर सकते हैं और उन्हें सही कर सकते हैं।

स्टिमुलस

स्टिमुलस आपके HTML के साथ इंटरैक्ट करने वाले कंट्रोलर्स लिखने के लिए एक JavaScript फ्रेमवर्क है।

मान लीजिए हमें एक पेज पर एलिमेंट्स में data-controller, data-action, और data-target जैसे JavaScript एट्रिब्यूट्स जोड़ने की जरूरत है। हम एक स्टिमुलस कंट्रोलर लिखेंगे जिसमें उन एट्रिब्यूट्स के आधार पर इवेंट्स प्राप्त करने वाले एलिमेंट्स तक पहुंच होगी। यहां एक उदाहरण है:

बिना संबंधित स्टिमुलस कंट्रोलर को पढ़े भी यह समझना बहुत आसान है कि यह क्या करता है।

यहां वह कंट्रोलर है जो HTML के साथ जाता है:

यह स्टिमुलस के मूल में है: चीजों को सरल और पुन: प्रयोज्य रखना।

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

स्ट्राडा

दुर्भाग्य से, हम अभी तक स्ट्राडा के बारे में ज्यादा नहीं जानते। लेकिन यह एक वेब एप्लिकेशन को HTML ब्रिज एट्रिब्यूट्स का उपयोग करके एक नेटिव ऐप के साथ कम्यूनिकेट करने (और संभवतः एक्शन परफॉर्म करने) की अनुमति देगा।

अपने रूबी ऑन रेल्स एप्लिकेशन में हॉटवायर का उपयोग कैसे करें

मैं हॉटवायर इंस्टॉलेशन या बेसिक यूज केस पर चर्चा करने में बहुत समय नहीं बिताना चाहता। हॉटवायर टीम ने अपने हॉटवायर स्क्रीनकास्ट में इसका उत्कृष्ट काम किया है। पूर्ण निर्देशों के लिए, turbo-rails इंस्टॉलेशन और स्टिमुलस इंस्टॉलेशन देखें।

आइए सीधे कुछ सामान्य हॉटवायर यूज केस में कूदते हैं।

एंडलेस स्क्रॉल

टर्बो फ्रेम्स का उपयोग करके, हम आसानी से एक पेज बना सकते हैं जिसमें यूजर के स्क्रॉल करते ही ऑटोमैटिक पेजिनेशन हो। इसके लिए हमें दो चीजें करने की आवश्यकता है:

1. प्रत्येक "पेज" को उसके अपने फ्रेम में रेंडर करें फ्रेम आईडी में पेज नंबर जोड़कर (उदाहरण के लिए, turbo_frame_tag "posts_#{@posts.current_page}")।
2. अगले पेज के लिए एक lazy फ्रेम उपयोग करें ताकि यह ऑटोमैटिकली लोड न हो जब तक कि यह व्यू में न आ जाए।

ध्यान दें कि यह उदाहरण कामिनारी के मेथड्स का उपयोग करता है, लेकिन आप इसे किसी अन्य पेजिनेशन मेथड के लिए अनुकूलित कर सकते हैं।

हमें कंट्रोलर में कुछ खास करने की आवश्यकता नहीं है। एक मानक index मेथड काम करता है:

यहां ट्रिक यह है कि हम नेस्टेड फ्रेम्स का उपयोग करते हैं, अगले पेज का फ्रेम पिछले पेज के फ्रेम के अंदर नेस्टेड होता है। इस तरह, जब पहला पेज लोड होता है, तो अगले पेज का फ्रेम अंत में रखा जाता है। जब यूजर उस फ्रेम तक स्क्रॉल करता है, तो इसे दूसरे पेज के कंटेंट से रिप्लेस किया जाता है। तीसरे पेज के लिए लेजी फ्रेम अंत में रेंडर होता है।

डायनामिक फॉर्म्स

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

आइए अपने फॉर्म से शुरू करते हैं।

फॉर्म काफी सरल है - हम News और Blog ऑप्शन के साथ एक kind सेलेक्ट प्रदर्शित करते हैं। हम चयनित प्रकार के आधार पर उपलब्ध श्रेणियों के मान बदलना चाहते हैं (यह मानते हुए कि categories_for_kind(@post.kind) दिए गए प्रकार के लिए श्रेणियों की सूची लौटाता है)।

यदि आप करीब से देखें, तो आप देखेंगे कि हमने फॉर्म में कुछ डेटा एट्रिब्यूट्स जोड़े हैं। data-target फॉर्म एलिमेंट को RefreshFormController स्टिमुलस कंट्रोलर के form टारगेट से लिंक करेगा। और change->refresh-form#refreshForm मान के साथ data-action हर बार kind सेलेक्ट बदलने पर लिंक्ड स्टिमुलस कंट्रोलर पर refreshForm मेथड को कॉल करेगा।

आइए हमारे स्टिमुलस कंट्रोलर को देखें:

सभी refreshForm कॉल पर, हम कंट्रोलर के URL पर एक नया PUT रिक्वेस्ट बनाते हैं (उसी एलिमेंट पर data-refresh-form-url का उपयोग करके जिसमें data-controller="refresh-form" है)। यहां महत्वपूर्ण हिस्सा यह है कि responseKind को turbo-stream पर सेट किया गया है। @rails/request लाइब्रेरी इस रिस्पांस को समझती है और रिस्पांस स्ट्रीम के आधार पर निर्देश परफॉर्म करती है।

अब बस हमारे refresh_form कॉल से सही स्ट्रीम वापस करना बाकी है ताकि टर्बो इसे समझ सके और हमारे फॉर्म को अपडेट कर सके।

बस पोस्ट पर एट्रिब्यूट्स अपडेट करें और मार्क करें कि आप turbo_stream फॉर्मेट में रिस्पांड करना चाहते हैं (ताकि यह refresh_form.turbo_stream.erb को देखे)।

इस चरण में, हम अपने form पार्शियल को पुन: उपयोग कर रहे हैं, इसे replace एक्शन के साथ एक turbo_stream के अंदर लपेटकर।

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

पेज रीलोड किए बिना कंटेंट को पेज में जोड़ें

हॉटवायर द्वारा आसान बनाया गया अगला यूज केस WebSocket कनेक्शन पर HTML स्ट्रीमिंग करना और नए कंटेंट के साथ पेज को अपडेट करना है जैसे ही यह आता है। इसका एक अच्छा उदाहरण GitHub कमेंट्स सेक्शन है। आप इसे टर्बो स्ट्रीम्स का उपयोग करके बहुत आसानी से इम्प्लीमेंट कर सकते हैं।

इसके दो पार्ट हैं।

पहला, हम लिस्टिंग पेज पर एक टर्बो स्ट्रीम लिसनर एम्बेड करते हैं जो सर्वर से WebSocket कनेक्शन खोलता है और इवेंट्स के लिए सुनता है।

अगला, हम मॉडल को अपडेट करते हैं ताकि नए कमेंट्स को स्ट्रीम पर ब्रॉडकास्ट किया जाए।

आपको और कुछ करने की आवश्यकता नहीं है। टर्बो ऑटोमैटिकली प्रत्येक नए कमेंट के लिए app/views/comments/_comment.html.erb पार्शियल को रेंडर करेगा और इसे WebSocket कनेक्शन पर भेजेगा। इसे टर्बो के JS द्वारा पिक किया जाएगा और comments आईडी वाले टारगेट में प्रीपेंड किया जाएगा।

आइए एक कदम आगे बढ़ें और एक छोटे स्टिमुलस कंट्रोलर के साथ सभी नए जोड़े गए कमेंट्स पर एक संकेत जोड़ें।

पहले, ब्रॉडकास्ट और comment पार्शियल को कंट्रोलर को सशर्त रूप से शामिल करने के लिए संशोधित करें।

यह छोटा स्टिमुलस कंट्रोलर कनेक्शन पर 3 सेकंड के लिए एक विशेष हाइलाइट क्लास जोड़ता है और फिर इसे हटा देता है।

नोट: आपको उस क्लास की उपस्थिति के आधार पर CSS हाइलाइटिंग को भी अपडेट करना होगा।

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

हॉटवायर की यही खूबी है - यह आपको बहुत दूर ले जाता है, और आपको JS में हाथ नहीं डालना पड़ता। जब आपको कुछ JS लिखने की आवश्यकता होती है, तो स्टिमुलस आपको छोटे जेनेरिक कंट्रोलर बनाने के लिए टूल देता है जिन्हें पुन: उपयोग किया जा सकता है।

समापन और आगे पढ़ने के लिए

रेल्स कम्युनिटी हॉटवायर की शुरूआत से वास्तव में उत्साहित रही है, और सही भी है।

इस पोस्ट में, हमने हॉटवायर के प्रमुख घटकों को देखा और अपने रेल्स ऐप में हॉटवायर का उपयोग कैसे करें। हमने इस पर छुआ कि आप टर्बो और स्टिमुलस का उपयोग करके अपने एप्लिकेशन में जान कैसे डाल सकते हैं।

आधिकारिक हॉटवायर स्क्रीनकास्ट परिचय और टर्बो डॉक्यूमेंटेशन यह देखने के लिए बेहतरीन स्थान हैं कि हॉटवायर और टर्बो आपके लिए क्या कर सकते हैं।

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

1. Turbo::FramesHelper टर्बो फ्रेम्स के लिए।
2. Turbo::Broadcastable कोड से टर्बो स्ट्रीम्स पर ब्रॉडकास्टिंग के लिए।
3. Turbo::Streams::TagBuilder इंलाइन कंट्रोलर एक्शन के हिस्से के रूप में टर्बो स्ट्रीम्स पर ब्रॉडकास्टिंग के लिए।

हैप्पी कोडिंग!

P.S. यदि आप रूबी मैजिक पोस्ट्स को प्रेस से निकलते ही पढ़ना चाहते हैं, तो हमारे रूबी मैजिक न्यूजलेटर को सब्सक्राइब करें और कभी भी एक भी पोस्ट मिस न करें!

सपन दिवाकर

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

सपन दिवाकर के सभी लेख