हॉटवायर के साथ त्वरित रूप से इंटरैक्टिव रेल ऐप्स बनाएं:एक शुरुआती मार्गदर्शिका
<पी> हॉटवायर इस समय प्रत्येक रेल्स डेवलपर के लिए एक गर्म विषय है। यदि आप रेल्स के साथ काम करते हैं, तो संभावना है कि आपने इसके बारे में पहले ही बहुत कुछ सुना होगा। <पी> हॉटवायर कोड की बहुत कम पंक्तियों के साथ आपके ऐप में इंटरैक्टिविटी जोड़ने का एक बिल्कुल नया तरीका है, और यह तार पर HTML संचारित करके तेजी से काम करता है। इसका मतलब है कि आप अधिकांश सिंगल पेज एप्लिकेशन (एसपीए) फ्रेमवर्क से अपने हाथ साफ रख सकते हैं। आप त्वरित पेज लोड समय और अन्तरक्रियाशीलता को बनाए रखते हुए अपने रेंडरिंग लॉजिक को सर्वर पर केंद्रीकृत भी रख सकते हैं। <पी> इस पोस्ट में, हम हॉटवायर के मुख्य घटकों को देखेंगे और इसे अपने रेल ऐप में कैसे उपयोग करें। लेकिन पहले:हॉटवायर क्या है और आपको इसका उपयोग क्यों करना चाहिए? हॉटवायर क्या है?
<पी> हॉटवायर कोई एकल लाइब्रेरी नहीं है, बल्कि वायर पर HTML भेजकर वेब और मोबाइल एप्लिकेशन बनाने का एक नया दृष्टिकोण है। इसमें टर्बो, स्टिमुलस और स्ट्राडा (इस साल के अंत में आ रहे हैं) शामिल हैं। हम इनमें से प्रत्येक पर अगले भाग में विस्तार से चर्चा करेंगे। <पी> साइड नोट :जबकि हॉटवायर रेल्स के साथ अत्यधिक जुड़ा हुआ है, यह पूरी तरह से भाषा-अज्ञेयवादी है, इसलिए यह अन्य अनुप्रयोगों के साथ भी काम कर सकता है। मैं कई गैर-रेल ऐप्स और कुछ स्थिर वेबसाइटों पर उत्पादन में स्टिमुलस का उपयोग कर रहा हूं। आप बिना रेल्स के भी टर्बो का उपयोग कर सकते हैं। <पी> लेकिन फिलहाल हम रेल की दुनिया में वापस आते हैं। अपने रेल ऐप में हॉटवायर का उपयोग क्यों करें?
<पी> तो आपको हॉटवायर का उपयोग कब करना चाहिए? इसका उत्तर यह है कि आप कहीं भी अपने एप्लिकेशन में अन्तरक्रियाशीलता जोड़ना चाहते हैं। उदाहरण के लिए, यदि आप चाहें: - कुछ सामग्री को उपयोगकर्ता की बातचीत के आधार पर सशर्त रूप से प्रदर्शित/छिपाया जाना चाहिए (उदाहरण के लिए, एक पता प्रपत्र जहां चयनित देश के आधार पर राज्यों की सूची स्वचालित रूप से बदल जाती है)।
- कुछ सामग्री को वास्तविक समय में अपडेट करने के लिए (उदाहरण के लिए, ट्विटर जैसा फ़ीड जहां नए ट्वीट स्वचालित रूप से पृष्ठ पर जुड़ जाते हैं)।
- अपने पृष्ठों के कुछ हिस्सों को आलसी-लोड करने के लिए (उदाहरण के लिए, एक अकॉर्डियन के अंदर, आप शीर्षकों को लोड कर सकते हैं और लोड समय को तेज करने के लिए विवरणों को आलसी-लोड करने के लिए चिह्नित कर सकते हैं)।
हॉटवायर घटक
<पी> जैसा कि पहले उल्लेख किया गया है, हॉटवायर वेब ऐप्स बनाने के लिए नई (और कुछ पुरानी) तकनीकों का एक संग्रह है। <पी> आइए अगले कुछ अनुभागों में इनमें से प्रत्येक पर चर्चा करें। टर्बो
<पी> HTML अपने मूल में टर्बो को संचालित करता है। टर्बो तार पर आने वाले HTML डेटा को संभालने और पूर्ण पृष्ठ पुनः लोड किए बिना इसे आपके एप्लिकेशन पर प्रदर्शित करने के लिए कई तकनीकें प्रदान करता है। यह निम्न से बना है: - <पी> टर्बो ड्राइव <पी> यदि आपने पहले टर्बोलिंक्स का उपयोग किया है, तो आप टर्बो ड्राइव के साथ बिल्कुल घर जैसा महसूस करेंगे। इसके मूल में, कुछ जेएस कोड आपके एप्लिकेशन पर जावास्क्रिप्ट घटनाओं को इंटरसेप्ट करते हैं, HTML को एसिंक्रोनस रूप से लोड करते हैं, और आपके HTML मार्कअप के कुछ हिस्सों को बदल देते हैं।
- <पी> टर्बो फ़्रेम <पी> टर्बो फ़्रेम आपके मार्कअप के हिस्सों को अलग-अलग अनुभागों में विभाजित करता है जिन्हें स्वतंत्र रूप से लोड किया जा सकता है। <पी> उदाहरण के लिए, यदि आपके पास एक ब्लॉग एप्लिकेशन है, तो आपके पोस्ट की सामग्री और टिप्पणियाँ पृष्ठ के दो संबंधित लेकिन स्वतंत्र भाग हैं। आप उन्हें अलग कर सकते हैं ताकि नेविगेशन स्वतंत्र रूप से काम करे या यहां तक कि उन्हें टर्बो फ्रेम के साथ अतुल्यकालिक रूप से लोड भी कर सकते हैं।
- <पी> टर्बो स्ट्रीम <पी> टर्बो स्ट्रीम आपके एप्लिकेशन में वास्तविक समय डेटा को आसानी से लाने के लिए उपयोगिताएँ प्रदान करता है। उदाहरण के लिए, मान लें कि आप ट्विटर की तरह एक समाचार फ़ीड बना रहे हैं। आप पेज को दोबारा लोड किए बिना पोस्ट होते ही नए ट्वीट्स को उपयोगकर्ता के फ़ीड में खींचना चाहते हैं। टर्बो स्ट्रीम आपको जेएस की एक भी पंक्ति लिखे बिना ऐसा करने की अनुमति देता है।
- <पी> टर्बो नेटिव <पी> टर्बो नेटिव आपको अपने वेब एप्लिकेशन के चारों ओर एक देशी रैपर बनाने की सुविधा देता है। नेविगेशन और इंटरैक्शन आपको सभी स्क्रीन को मूल रूप से दोबारा किए बिना मूल लगेंगे। <पी> आप शेष एप्लिकेशन को वेब के माध्यम से वितरित करते रहेंगे। इस तरह, आप अपने एप्लिकेशन के वास्तव में इंटरैक्टिव हिस्सों पर ध्यान केंद्रित कर सकते हैं और उन्हें सही कर सकते हैं।
प्रोत्साहन
<पी> स्टिमुलस लेखन नियंत्रकों के लिए एक जावास्क्रिप्ट ढांचा है जो आपके HTML के साथ इंटरैक्ट करता है। <पी> मान लीजिए कि हमें data-controller जैसी कुछ JavaScript विशेषताएँ जोड़ने की आवश्यकता है , data-action , और data-target किसी पृष्ठ पर तत्वों के लिए. हम उन तत्वों तक पहुंच के साथ एक प्रोत्साहन नियंत्रक लिखेंगे जो उन विशेषताओं के आधार पर घटनाओं को प्राप्त करता है। यहां एक उदाहरण दिया गया है: <पी> संबंधित स्टिमुलस कंट्रोलर को पढ़े बिना यह क्या करता है इसका अंदाजा लगाना बहुत आसान है। <पी> यहां एक नियंत्रक है जो HTML के साथ जाता है: <पी> यह स्टिमुलस के मूल में है:चीजों को सरल और पुन:प्रयोज्य रखना। <पी> अब, यदि आपको कभी किसी अन्य पृष्ठ पर कॉपी-टू-द-क्लिपबोर्ड बटन की आवश्यकता हो, तो आप उस नियंत्रक का पुन:उपयोग कर सकते हैं। data-* जोड़ें सब कुछ काम करने के लिए मार्कअप पर विशेषताएँ। स्ट्राडा
<पी> दुर्भाग्य से, हम अभी तक स्ट्राडा के बारे में ज्यादा नहीं जानते हैं। लेकिन यह एक वेब एप्लिकेशन को HTML ब्रिज विशेषताओं का उपयोग करके एक मूल ऐप के साथ संचार करने (और संभवतः कार्य करने) की अनुमति देगा। अपने रूबी ऑन रेल्स एप्लिकेशन में हॉटवायर का उपयोग कैसे करें
<पी> मैं हॉटवायर इंस्टॉलेशन या बुनियादी उपयोग के मामले पर चर्चा करने में बहुत अधिक समय बर्बाद नहीं करना चाहता। हॉटवायर टीम ने पहले ही अपने हॉटवायर स्क्रीनकास्ट में इस पर उत्कृष्ट काम किया है। संपूर्ण निर्देशों के लिए, turbo-rails देखें इंस्टालेशन और स्टिमुलस इंस्टालेशन। <पी> आइए सीधे कुछ सामान्य हॉटवायर उपयोग मामलों पर चलते हैं। अंतहीन स्क्रॉल
<पी> टर्बो फ्रेम्स का उपयोग करके, हम उपयोगकर्ता के स्क्रॉल करते समय आसानी से स्वचालित पेजिनेशन के साथ एक पेज बना सकते हैं। इसके लिए हमें दो काम करने होंगे: - फ़्रेम आईडी में पेज नंबर जोड़कर प्रत्येक "पेज" को उसके अपने फ्रेम के अंदर रेंडर करें (उदाहरण के लिए,
turbo_frame_tag "posts_#{@posts.current_page}" ).
lazy का उपयोग करें अगले पृष्ठ के लिए फ़्रेम बनाएं ताकि जब तक वह दृश्य में न आ जाए, वह स्वचालित रूप से लोड न हो।
<पी> ध्यान दें कि यह उदाहरण कामिनारी की विधियों का उपयोग करता है, लेकिन आप इसे किसी अन्य पृष्ठांकन विधि में अनुकूलित कर सकते हैं। <पी> हमें नियंत्रक में किसी विशेष चीज़ की आवश्यकता नहीं है। एक मानक index विधि काम करती है: <पी> यहां चाल यह है कि हम नेस्टेड फ्रेम का उपयोग करते हैं, जिसमें अगले पेज के लिए फ्रेम पिछले पेज के फ्रेम के अंदर नेस्टेड होता है। इस तरह, जब पहला पेज लोड होता है, तो अगले पेज के लिए फ्रेम अंत में रखा जाता है। जब उपयोगकर्ता उस फ्रेम पर स्क्रॉल करता है, तो उसे दूसरे पेज की सामग्री से बदल दिया जाता है। तीसरे पेज के लिए आलसी फ्रेम अंत में प्रस्तुत होता है। गतिशील रूप
<पी> आप फ्रंट एंड पर फ़ील्ड्स को टॉगल करने के लिए कस्टम लॉजिक के बिना हॉटवायर के साथ डायनेमिक फॉर्म आसानी से लागू कर सकते हैं। यह अंतहीन स्क्रॉल उपयोग के मामले की तुलना में थोड़ा अधिक शामिल है, क्योंकि इसमें टर्बो स्ट्रीम और स्टिमुलस दोनों का उपयोग शामिल है। <पी> आइए पहले अपने फॉर्म से शुरुआत करें। <पी> फॉर्म काफी सरल है - हम एक kind प्रदर्शित करते हैं News के साथ चयन करें और Blog विकल्प। हम उपलब्ध श्रेणियों के मूल्यों को चयनित प्रकार के आधार पर बदलना चाहते हैं (यह मानते हुए कि categories_for_kind(@post.kind) दिए गए प्रकार के लिए श्रेणियों की सूची लौटाता है)। <पी> यदि आप करीब से देखेंगे, तो आप देखेंगे कि हमने फॉर्म में कुछ डेटा विशेषताएँ जोड़ दी हैं। data-target प्रपत्र तत्व को RefreshFormController से लिंक करेगा प्रोत्साहन नियंत्रक का form लक्ष्य.और data-action change->refresh-form#refreshForm के मान के साथ refreshForm पर कॉल करेगा हर बार kind पर लिंक किए गए स्टिमुलस कंट्रोलर पर विधि चयन बदल गया है. <पी> आइए हमारे प्रोत्साहन नियंत्रक को देखें: <पी> सभी refreshForm पर कॉल, हम बस एक नया PUT बनाते हैं नियंत्रक के यूआरएल के लिए अनुरोध (data-refresh-form-url का उपयोग करके सेट करें)। data-controller="refresh-form" के साथ एक ही तत्व पर .यहां महत्वपूर्ण हिस्सा यह है कि responseKind turbo-stream पर सेट है .@rails/request लाइब्रेरी इस प्रतिक्रिया को समझती है और प्रतिक्रिया स्ट्रीम के आधार पर निर्देश निष्पादित करती है। <पी> अब जो कुछ बचा है वह हमारे refresh_form से सही स्ट्रीम लौटाना है हमारे फॉर्म को समझने और अपडेट करने के लिए टर्बो को कॉल करें। <पी> बस पोस्ट पर विशेषताओं को अपडेट करें और चिह्नित करें कि आप turbo_stream में जवाब देना चाहते हैं प्रारूप (ताकि यह refresh_form.turbo_stream.erb दिखे)। ). <पी> इस चरण में, हम अपने form का पुन:उपयोग कर रहे हैं आंशिक, इसे turbo_stream के अंदर लपेटकर replace के साथ कार्रवाई. <पी> और एक डायनामिक फॉर्म को कार्यान्वित करने के लिए आपको बस इतना ही चाहिए। मुझे पता है कि यह थोड़ा उन्नत दिखता है, लेकिन refresh प्रोत्साहन नियंत्रक एक साझा हिस्सा है जिसे अब आप सही data-* जोड़कर अपने सभी गतिशील रूपों के लिए उपयोग कर सकते हैं विशेषताएँ। तो अनिवार्य रूप से, अब आपको अन्य रूपों के लिए कोई नया जेएस लिखे बिना सर्वर-साइड डायनेमिक फॉर्म रीफ्रेश मिलता है। बहुत बढ़िया, है ना? सामग्री को पुनः लोड किए बिना पृष्ठों पर जोड़ें
<पी> हॉटवायर द्वारा उपयोग किया जाने वाला अगला मामला वेबसॉकेट कनेक्शन पर HTML को स्ट्रीम करना और पेज के आते ही उसे नई सामग्री के साथ अपडेट करना है। इसका एक अच्छा उदाहरण GitHub टिप्पणियाँ अनुभाग है। आप इसे टर्बो स्ट्रीम का उपयोग करके बहुत आसानी से कार्यान्वित कर सकते हैं। <पी> इसके दो भाग हैं. <पी> सबसे पहले, हम लिस्टिंग पेज पर एक टर्बो स्ट्रीम श्रोता को एम्बेड करते हैं जो सर्वर से एक वेबसॉकेट कनेक्शन खोलता है और घटनाओं को सुनता है। <पी> इसके बाद, हम स्ट्रीम में नई टिप्पणियाँ प्रसारित करने के लिए मॉडल को अपडेट करते हैं। <पी> आपको किसी और चीज की जरूरत नहीं है. टर्बो स्वचालित रूप से app/views/comments/_comment.html.erb प्रस्तुत करेगा प्रत्येक नई टिप्पणी के लिए आंशिक और इसे वेबसॉकेट कनेक्शन पर भेजें। इसे टर्बो के जेएस द्वारा उठाया जाएगा और आईडी comments के साथ लक्ष्य से जोड़ा जाएगा। . <पी> आइए एक कदम आगे बढ़ें और एक छोटे प्रोत्साहन नियंत्रक के साथ सभी नई जोड़ी गई टिप्पणियों में एक संकेत जोड़ें। <पी> सबसे पहले, प्रसारण और comment को संशोधित करें नियंत्रक को सशर्त रूप से शामिल करने के लिए आंशिक। <पी> यह छोटा स्टिमुलस नियंत्रक 3 सेकंड के लिए कनेक्शन पर एक विशेष हाइलाइट क्लास जोड़ता है और फिर इसे हटा देता है। <पी> ध्यान दें :आपको उस कक्षा की उपस्थिति के आधार पर सीएसएस हाइलाइटिंग को भी अपडेट करना होगा। <पी> एक बार जब यह नियंत्रक पूरा हो जाता है, तो आप इसे किसी भी चीज़ पर फिर से उपयोग कर सकते हैं जिसके लिए हाइलाइट क्लास की आवश्यकता होती है। यदि आपको उस लचीलेपन की आवश्यकता है तो आप डेटा विशेषताओं से अवधि और वर्ग का नाम प्राप्त करने के लिए इसे संशोधित भी कर सकते हैं। <पी> हॉटवायर के बारे में यह बहुत अच्छी बात है - यह आपको बहुत दूर ले जाता है, और आपको जेएस में अपना हाथ डुबाना नहीं पड़ता है। जब आपको कुछ जेएस लिखने की आवश्यकता होती है, तो स्टिमुलस आपको छोटे सामान्य नियंत्रक बनाने के लिए उपकरण देता है जिनका पुन:उपयोग किया जा सकता है। समाप्ति और आगे की पढ़ाई
<पी> हॉटवायर की शुरुआत से रेल समुदाय वास्तव में उत्साहित है, और यह सही भी है। <पी> इस पोस्ट में, हमने हॉटवायर के प्रमुख घटकों और अपने रेल ऐप में हॉटवायर का उपयोग कैसे करें, इस पर गौर किया। हमने इस बात पर चर्चा की कि आप टर्बो और स्टिमुलस का उपयोग करके अपने एप्लिकेशन को कैसे जीवंत बना सकते हैं। <पी> आधिकारिक हॉटवायर स्क्रीनकास्ट परिचय और टर्बो दस्तावेज़ीकरण यह देखने के लिए बेहतरीन स्थान हैं कि हॉटवायर और टर्बो आपके लिए क्या कर सकते हैं। <पी> उन्नत उपयोग के लिए, मैं टर्बो-रेल GitHub रेपो पर जाने का सुझाव देता हूं। अफसोस की बात है कि दस्तावेज थोड़ा विरल है, लेकिन यदि आप अपने हाथों को गंदा करने से डरते नहीं हैं, तो कोड और इनलाइन टिप्पणियों को पढ़ें: Turbo::FramesHelper टर्बो फ्रेम्स के लिए .Turbo::Broadcastable टर्बो स्ट्रीम पर प्रसारण के लिए कोड से.Turbo::Streams::TagBuilder टर्बो स्ट्रीम पर प्रसारण के लिए इनलाइन नियंत्रक क्रियाओं के भाग के रूप में।
<पी> हैप्पी कोडिंग! <पी> पी.एस. यदि आप प्रेस से हटते ही रूबी मैजिक पोस्ट पढ़ना चाहते हैं, तो हमारे रूबी मैजिक न्यूज़लेटर की सदस्यता लें और एक भी पोस्ट न चूकें! 
सपन दिवाकर
<पी> हमारे अतिथि लेखक सपन दिवाकर एक पूर्ण-स्टैक डेवलपर हैं। वह अपने ब्लॉग पर अपनी रुचियों के बारे में लिखते हैं और जीवन में और कोड में चीजों को सरल रखने के बड़े प्रशंसक हैं। जब वह प्रौद्योगिकी के साथ काम नहीं कर रहा होता है, तो उसे बगीचे में समय बिताना, जंगलों के आसपास घूमना और आउटडोर खेल खेलना पसंद है। <पी> सभी लेख सपन दिवाकर द्वारा
