2,868 रीडिंग

अलविदा वेबपैक और नोड.जेएस, नमस्ते रेल्स और इम्पोर्ट मैप्स

द्वारा John Vester7m2024/08/07

बहुत लंबा; पढ़ने के लिए

Rails 7 ने नई सुविधाएँ पेश की हैं जो Node.js और Webpack का उपयोग करना आसान बनाती हैं। नया Import map फीचर डेवलपर्स को अपने एप्लिकेशन में मैप्स आयात करने की अनुमति देता है। इससे पैकेज बंडल करने और ES6 और Babel को ट्रांसपाइल करने से संबंधित जटिलताओं से निपटने की आवश्यकता समाप्त हो जाती है। यह लेख बताता है कि Ruby पर Ruby के साथ नए Import Maps फीचर का उपयोग कैसे करें।

featured image - अलविदा वेबपैक और नोड.जेएस, नमस्ते रेल्स और इम्पोर्ट मैप्स

मुझे नई तकनीकें सीखने में समय बिताना अच्छा लगता है। हालाँकि, अक्सर नई तकनीकों के साथ काम करने की सबसे बड़ी कमी अपरिहार्य दर्द बिंदु होते हैं जो शुरुआती अपनाने के साथ आते हैं। मैंने इसे काफी हद तक देखा जब मैं " 2022 में फुल-स्टैक डेवलपर से वेब3 पायनियर में कैसे बदलाव करें " में वेब3 के साथ गति प्राप्त कर रहा था।

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

वेब3 के अलावा, मुझे जावास्क्रिप्ट स्पेस में भी यह चुनौती मिली, जिसमें Node.js और Webpack का उपयोग करने की अर्ध-मानक आवश्यकताएँ थीं। मैं एक ऐसे समाधान की पहचान करना चाहता था जहाँ मैं Node.js और Webpack के साथ काम किए बिना जावास्क्रिप्ट का उपयोग कर सकूँ। मैंने हाल ही में पढ़ा कि Rails 7 रिलीज़ ने इसी स्थिति को कैसे संबोधित किया। तो, यही वह उपयोग मामला है जिसे मैं इस लेख में कवर करूँगा।

रेल के बारे में

पूरी तरह से पारदर्शी होने के लिए, रूबी और रूबी ऑन रेल्स के साथ मेरा अनुभव बहुत कम या बिलकुल भी नहीं है। मुझे याद है कि सालों पहले मैंने किसी को पूरी तरह से कार्यात्मक सेवा बनाने के लिए कुछ कमांड जारी करते हुए देखा था, और मैंने सोचा, "वाह, यह बहुत बढ़िया लग रहा है।" लेकिन मैंने सेवाओं और अनुप्रयोगों के निर्माण के लिए इस दृष्टिकोण के साथ खेलने में कभी समय नहीं बिताया।

मुझे पूरा यकीन है कि मैंने वह डेमो 2006 की शुरुआत में देखा था, क्योंकि रेल्स पहली बार 2005 के अंत में सामने आई थी। जैसा कि मैंने डेमो में देखा, अंतिम परिणाम एक ऐसी सेवा थी जो मॉडल-व्यू-कंट्रोलर (MVC) डिज़ाइन पैटर्न का समर्थन करती थी, एक ऐसा पैटर्न जिससे मैं स्प्रिंग, स्ट्रट्स, JSF और सीम फ्रेमवर्क के अपने शुरुआती उपयोग के माध्यम से परिचित था।

रेल्स DRY (खुद को न दोहराएँ) प्रथाओं का पालन करते हुए चीजों को सीधा रखने का वादा करता है। इस वादे को पूरा करने में मदद करने के लिए, रूबी इंजीनियरों के लिए जेम्स का उपयोग करता है ताकि वे अपनी परियोजनाओं में साझा निर्भरताएँ पेश कर सकें।

संस्करण 7 की मुख्य विशेषताएं

2021 के अंत में, रेल्स के सातवें प्रमुख संस्करण ने कुछ रोमांचक विशेषताएं पेश कीं:

अतुल्यकालिक क्वेरीइंग - क्वेरीज़ को क्रमिक रूप से चलाने से दूर होना
एन्क्रिप्टेड डेटाबेस परत - सेवा और दृढ़ता परतों के बीच डेटा को सुरक्षित करना
तुलना सत्यापनकर्ता - दृढ़ता से पहले ऑब्जेक्ट सत्यापन की अनुमति देता है
मानचित्र आयात करें - अब जावास्क्रिप्ट लाइब्रेरी के लिए Node.js और Webpack की आवश्यकता नहीं है

यही अंतिम विशेषता है जिसने मुझे यह लेख लिखने के लिए प्रेरित किया।

आयात मानचित्र कैसे काम करते हैं?

उच्च स्तर पर, importmaps-rails Gem डेवलपर्स को अपने अनुप्रयोगों में मानचित्र आयात करने की अनुमति देता है। /bin/importmap का उपयोग इंजीनियरों को आवश्यकतानुसार निर्भरता को अपडेट, पिन या अनपिन करने की अनुमति देता है। यह जावा-आधारित परियोजनाओं में मावेन और ग्रेडल के काम करने के तरीके के समान है।

इससे पैकेजों को बंडल करने और ES6 और Babel को ट्रांसपाइलिंग करने से जुड़ी जटिलताओं से निपटने की ज़रूरत खत्म हो जाती है। अलविदा Webpack! अलविदा Node.js!

चलो कुछ बनाएं

चूँकि मैंने लगभग दो दशकों में रूबी ऑन रेल्स को छुआ तक नहीं था, इसलिए सबसे पहले मुझे अपने मैकबुक प्रो पर रूबी 3.3 स्थापित करने के लिए इस गाइड का पालन करना था। एक बार इंस्टॉल हो जाने के बाद, मुझे बस अपने IntelliJ IDEA IDE के हिस्से के रूप में रूबी प्लगइन को इंस्टॉल करना था।

फिर, मैंने IntelliJ में import-map नामक एक नया Ruby on Rails प्रोजेक्ट बनाया और जावास्क्रिप्ट फ्रेमवर्क के लिए Importmap के उपयोग को निर्दिष्ट किया:

प्रोजेक्ट बनाते समय, मैं सबसे पहले यह देखना चाहता था कि स्थानीय जावास्क्रिप्ट लाइब्रेरी का उपयोग करना कितना आसान होगा। इसलिए, मैंने /public/jvc_utilities.js नामक एक नई जावास्क्रिप्ट फ़ाइल बनाई, जिसमें निम्नलिखित सामग्री थी:

 export default function() { console.log('*****************'); console.log('* jvc-utilities *'); console.log('* version 0.0.1 *'); console.log('*****************'); }

डिफ़ॉल्ट फ़ंक्शन केवल कुछ कमांड को जावास्क्रिप्ट कंसोल पर भेजता है।

इसके बाद, मैंने निम्नलिखित सामग्री के साथ एक HTML फ़ाइल ( /public/jvc-utilities.html ) बनाई:

 <!DOCTYPE html> <html> <head> <title>jvc-utilities</title> </head> <script type="importmap"> { "imports": { "jvc_utilities": "./jvc_utilities.js"} } </script> <script type="module"> import JvcUtilities from "jvc_utilities"; JvcUtilities(); </script> <h3>jvc-utilities.html</h3> <p>Open the console to see the output of the <code>JvcUtilities()</code> function. </p> </html>

यह उदाहरण दर्शाता है कि किसी स्थानीय जावास्क्रिप्ट फ़ाइल को सार्वजनिक HTML फ़ाइल के साथ किस प्रकार उपयोग किया जा सकता है - बिना किसी अतिरिक्त कार्य के।

इसके बाद, मैंने Example नामक एक नया नियंत्रक बनाया:

 bin/rails generate controller Example index

मैं इस उदाहरण के लिए Lodash लाइब्रेरी का उपयोग करना चाहता था, इसलिए मैंने अपने import-map प्रोजेक्ट में लाइब्रेरी जोड़ने के लिए निम्नलिखित कमांड का उपयोग किया:

 bin/importmap pin lodash

नियंत्रक में कुछ जावास्क्रिप्ट-आधारित कार्यक्षमता जोड़ने के लिए, मैंने javascript/controllers/example_controller.js इस तरह अद्यतन किया:

 import { Controller } from "@hotwired/stimulus" import _ from "lodash" export default class extends Controller { connect() { const array = [1, 2, 3] const doubled = _.map(array, n => n * 2) console.log('array', array) // Output: [1, 2, 3] console.log('doubled', doubled) // Output: [2, 4, 6] this.element.textContent = `array=${array} doubled=${doubled.join(', ')}` } }

यह तर्क तीन मानों की एक सरणी स्थापित करता है, और फिर यह मानों को दोगुना कर देता है। मैं ऐसा करने के लिए Lodash map() विधि का उपयोग करता हूँ।

अंत में, मैंने views/example/index.html.erb अद्यतन किया जिसमें निम्नलिखित शामिल है:

 <h3>Example Controller</h3> <div data-controller="example"></div>

इस समय, निम्नलिखित URI उपलब्ध हैं:

/jvc-utilities.html
/example/index

आइए तैनात करें और सत्यापित करें

रेल्स सेवा को स्थानीय रूप से चलाने के बजाय, मैंने सोचा कि मैं इसके बजाय हेरोकू का उपयोग करूँगा। इस तरह, मैं यह सुनिश्चित कर सकता था कि मेरी सेवा अन्य उपभोक्ताओं के लिए सुलभ हो सके।

अपने Heroku खाते का उपयोग करते हुए, मैंने “ रूबी के साथ Heroku पर आरंभ करना ” गाइड का पालन किया। मेरे प्रोजेक्ट के आधार पर, मेरा पहला कदम निम्नलिखित सामग्री के साथ Procfile नामक एक फ़ाइल जोड़ना था:

 web: bundle exec puma -C config/puma.rb

इसके बाद, मैंने Heroku में एक नया एप्लिकेशन बनाने के लिए Heroku CLI का उपयोग किया:

 heroku login heroku create

create कमांड के साथ, मैंने निम्नलिखित एप्लिकेशन को चालू कर दिया:

 Creating app... done, ⬢ lit-basin-84681 https://lit-basin-84681-3f5a7507b174.herokuapp.com/ | https://git.heroku.com/lit-basin-84681.git

इस कदम से Git रिमोट का भी निर्माण हुआ जिसका उपयोग Heroku पारिस्थितिकी तंत्र करता है।

अब, मुझे बस अपने नवीनतम अपडेट को Heroku पर भेजना था और एप्लिकेशन को तैनात करना था:

 git push heroku main

इसके साथ ही, मेरा कोड Heroku पर भेज दिया गया, जिसने फिर मेरे एप्लिकेशन को संकलित और तैनात किया। एक मिनट से भी कम समय में, मैंने निम्नलिखित देखा, जिससे मुझे पता चला कि मेरा एप्लिकेशन उपयोग के लिए तैयार था:

 remote: Verifying deploy... done. To https://git.heroku.com/lit-basin-84681.git fe0b7ad..1a21bdd main -> main

फिर, मैं अपने Heroku URL (जो मेरे एप्लिकेशन के लिए अद्वितीय है, लेकिन मैंने इसे हटा दिया है) का उपयोग करके /example/index पृष्ठ पर गया: https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

मैंने जो देखा वह यह है:

और जब मैंने अपने ब्राउज़र में जावास्क्रिप्ट कंसोल देखा, तो निम्नलिखित लॉग दिखाई दिए:

/jvc-utilities.html पर जाकर मैंने निम्नलिखित जानकारी देखी:

जब मैंने अपने ब्राउज़र में जावास्क्रिप्ट कंसोल देखा, तो मुझे निम्नलिखित लॉग दिखाई दिए:

सफलता। मैं अपने Rails 7 एप्लिकेशन में एक स्व-निहित जावास्क्रिप्ट लाइब्रेरी और सार्वजनिक Lodash जावास्क्रिप्ट लाइब्रेरी का उपयोग करने में सक्षम था - यह सब Import Maps का उपयोग करके और Webpack या Node.js से निपटने की आवश्यकता के बिना। अलविदा, Webpack और Node.js!

निष्कर्ष

मेरे पाठकों को मेरा व्यक्तिगत मिशन वक्तव्य याद होगा, जो मुझे लगता है कि किसी भी आईटी पेशेवर पर लागू हो सकता है:

"अपना समय उन सुविधाओं/कार्यक्षमताओं को प्रदान करने पर केंद्रित करें जो आपकी बौद्धिक संपदा के मूल्य को बढ़ाती हैं। बाकी सभी चीज़ों के लिए फ्रेमवर्क, उत्पादों और सेवाओं का लाभ उठाएँ।" - जे. वेस्टर

इस लेख में, मैंने Rails 7 में सबसे पहले प्रवेश किया और Import Maps का उपयोग करके दिखाया कि आप Webpack और Node.js का उपयोग करने की आवश्यकता के बिना जावास्क्रिप्ट लाइब्रेरी का कितनी आसानी से उपयोग कर सकते हैं। मैं अपने लक्ष्यों को पूरा करने के लिए आवश्यक कम समय से काफी प्रभावित था, जबकि मैंने Rails को आखिरी बार काम करते हुए दो दशक से अधिक समय पहले देखा था।

परिनियोजन के परिप्रेक्ष्य से, Heroku प्लेटफॉर्म पर Rails अनुप्रयोग को परिनियोजित करने के प्रयास में एक Procfile और तीन CLI कमांड का निर्माण शामिल था।

दोनों मामलों में, रेल्स और हेरोकू मेरे मिशन वक्तव्य का पालन करते हैं, जिससे मुझे अपने ग्राहकों को मूल्य प्रदान करने पर ध्यान केंद्रित करने की अनुमति मिलती है और वेबपैक, नोड.जेएस या यहां तक कि डेवऑप्स कार्यों की चुनौतियों से नहीं जूझना पड़ता है।

हालांकि मुझे यकीन है कि नई प्रौद्योगिकियों की खोज करते समय हमें कुछ कठिनाइयों का सामना करना पड़ेगा, लेकिन मुझे यह भी विश्वास है कि समय के साथ, हम वैसी ही उपलब्धियां देखेंगे, जैसा कि मैंने इस लेख में दर्शाया है।

हमेशा की तरह, मेरा स्रोत कोड GitLab पर यहां पाया जा सकता है।

आपका दिन सचमुच बहुत अच्छा हो!