2,868 পড়া

Buh-Bye Webpack এবং Node.js, Hello Rails এবং Import Maps

দ্বারা John Vester7m2024/08/07

অতিদীর্ঘ; পড়তে

Rails 7 নতুন বৈশিষ্ট্য চালু করেছে যা Node.js এবং Webpack ব্যবহার করা সহজ করে তোলে। নতুন আমদানি মানচিত্র বৈশিষ্ট্যটি বিকাশকারীদের তাদের অ্যাপ্লিকেশনগুলিতে মানচিত্র আমদানি করতে দেয়৷ এটি প্যাকেজ বান্ডলিং এবং ES6 এবং ব্যাবেল ট্রান্সপিলিং সম্পর্কিত জটিলতাগুলি মোকাবেলা করার প্রয়োজনীয়তা দূর করে। রুবি অন রুবি সহ নতুন আমদানি মানচিত্র বৈশিষ্ট্যটি কীভাবে ব্যবহার করবেন তা এই নিবন্ধটি ব্যাখ্যা করে।

featured image - Buh-Bye Webpack এবং Node.js, Hello Rails এবং Import Maps

আমি নতুন প্রযুক্তি শেখার সময় কাটাতে উপভোগ করি। যাইহোক, প্রায়শই নতুন প্রযুক্তির সাথে কাজ করার সবচেয়ে বড় ত্রুটি হল অনিবার্য ব্যথা পয়েন্ট যা তাড়াতাড়ি গ্রহণের সাথে আসে। “ How to Transition from Full-Stack Developer from Web3 Pioneer in 2022 ”-এ Web3 এর সাথে গতি বাড়াতে গিয়ে আমি এটি বেশ কিছুটা দেখেছিলাম।

সফ্টওয়্যার প্রকৌশলী হিসাবে, আমরা নতুন প্রযুক্তিকে একটি পরীক্ষামূলক ড্রাইভ দেওয়ার সময় এই প্রাথমিক-গ্রহণকারী চ্যালেঞ্জগুলি গ্রহণ করতে অভ্যস্ত। আমার জন্য যেটি সবচেয়ে ভালো কাজ করে তা হল আমি যে নোট এবং কমান্ডগুলি সম্পাদন করেছি তার একটি চলমান তালিকা রাখা কারণ আপাতদৃষ্টিতে অযৌক্তিক পদক্ষেপগুলি আমার স্মৃতিতে থাকে না।

Web3 ছাড়াও, Node.js এবং Webpack ব্যবহার করার সেমি-স্ট্যান্ডার্ড প্রয়োজনীয়তা সহ আমি জাভাস্ক্রিপ্ট স্পেসে এই চ্যালেঞ্জটি পেয়েছি। আমি এমন একটি সমাধান চিহ্নিত করতে চেয়েছিলাম যেখানে আমি জাভাস্ক্রিপ্ট ব্যবহার করতে পারি যেমনটি Node.js এবং Webpack এর সাথে পরিশ্রম না করে। আমি সম্প্রতি পড়েছি কিভাবে Rails 7 রিলিজ এই পরিস্থিতির সমাধান করেছে। সুতরাং, যে ব্যবহার ক্ষেত্রে আমি এই নিবন্ধে আচ্ছাদন করা হবে.

রেল সম্পর্কে

সম্পূর্ণ স্বচ্ছ হওয়ার জন্য, রুবি এবং রুবি অন রেলের সাথে আমার অভিজ্ঞতা সামান্য নয়। আমার মনে আছে কয়েক বছর আগে কেউ একটি সম্পূর্ণ কার্যকরী পরিষেবা তৈরি করার জন্য কিছু কমান্ড ইস্যু করতে দেখেছিল এবং আমি ভেবেছিলাম, "বাহ, এটি দুর্দান্ত দেখাচ্ছে।" কিন্তু আমি কখনই পরিষেবা এবং অ্যাপ্লিকেশন তৈরির এই পদ্ধতির সাথে খেলার সময় ব্যয় করিনি।

আমি মোটামুটি নিশ্চিত যে আমি সেই ডেমোটি 2006 সালের প্রথম দিকে দেখেছিলাম কারণ রেলগুলি 2005 সালের শেষের দিকে প্রথম আবির্ভূত হয়েছিল। যেমন আমি প্রদর্শনীতে দেখেছি, শেষ ফলাফল হল একটি পরিষেবা যা মডেল-ভিউ-কন্ট্রোলার (MVC) ডিজাইন প্যাটার্নকে সমর্থন করেছিল, একটি প্যাটার্ন যা আমি স্প্রিং, স্ট্রুটস, জেএসএফ, এবং সীম ফ্রেমওয়ার্কের প্রাথমিক ব্যবহারের মাধ্যমে পরিচিত ছিলাম।

DRY (নিজেকে পুনরাবৃত্তি করবেন না) অনুশীলনগুলি মেনে চলার সময় রেলগুলি জিনিসগুলিকে সোজা রাখার প্রতিশ্রুতি বজায় রাখে। এই প্রতিশ্রুতিকে সম্মান করতে, রুবি তাদের প্রকল্পগুলিতে ভাগ করা নির্ভরতা প্রবর্তন করতে ইঞ্জিনিয়ারদের জন্য রত্ন ব্যবহার করে।

সংস্করণ 7 হাইলাইট

2021 সালের শেষের দিকে, রেলের সপ্তম প্রধান সংস্করণ কিছু উত্তেজনাপূর্ণ বৈশিষ্ট্য চালু করেছে:

অ্যাসিঙ্ক্রোনাস ক্যোয়ারী - সিরিয়ালি কোয়েরি চালানো থেকে দূরে থাকা
এনক্রিপ্ট করা ডাটাবেস স্তর - পরিষেবা এবং অধ্যবসায়ের স্তরগুলির মধ্যে ডেটা সুরক্ষিত করা
তুলনা যাচাইকারী - অধ্যবসায়ের আগে বস্তুর বৈধতা অনুমোদন করে
মানচিত্র আমদানি করুন - জাভাস্ক্রিপ্ট লাইব্রেরির জন্য আর Node.js এবং Webpack এর প্রয়োজন নেই

সেই শেষ বৈশিষ্ট্যটিই আমাকে এই নিবন্ধটি লিখতে পরিচালিত করেছিল।

কিভাবে মানচিত্র আমদানি কাজ করে?

উচ্চ স্তরে, importmaps-rails Gem ডেভেলপারদের তাদের অ্যাপ্লিকেশনগুলিতে মানচিত্র আমদানি করতে দেয়। /bin/importmap এর ব্যবহার ইঞ্জিনিয়ারদের প্রয়োজন অনুযায়ী নির্ভরতা আপডেট, পিন বা আনপিন করতে দেয়। এটি জাভা-ভিত্তিক প্রকল্পগুলিতে ম্যাভেন এবং গ্রেডল কীভাবে কাজ করে তার অনুরূপ।

এটি প্যাকেজ বান্ডলিং এবং ES6 এবং ব্যাবেল ট্রান্সপিলিং সম্পর্কিত জটিলতাগুলি মোকাবেলা করার প্রয়োজনীয়তা দূর করে। বিদায় ওয়েবপ্যাক! বিদায় Node.js!

লেটস বিল্ড সামথিং

যেহেতু আমি প্রায় দুই দশকে রুবি অন রেলকে স্পর্শ করিনি, তাই আমার ম্যাকবুক প্রোতে রুবি 3.3 ইনস্টল করার জন্য আমাকে প্রথমে এই নির্দেশিকাটি অনুসরণ করতে হবে। একবার ইনস্টল হয়ে গেলে, আমার IntelliJ IDEA IDE-এর অংশ হিসাবে রুবি প্লাগইনটি ইনস্টল করতে হবে।

তারপর, আমি IntelliJ-এ একটি নতুন রুবি অন রেল প্রকল্প তৈরি করেছি যার নাম import-map এবং JavaScript ফ্রেমওয়ার্কের জন্য 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 অ্যাকাউন্ট ব্যবহার করে, আমি “ রুবি দিয়ে হেরোকুতে শুরু করা ” নির্দেশিকা অনুসরণ করেছি। আমার প্রকল্পের উপর ভিত্তি করে, আমার প্রথম পদক্ষেপটি নিম্নলিখিত বিষয়বস্তু সহ 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 ইকোসিস্টেম ব্যবহার করে।

এখন, আমার যা করা দরকার তা হল আমার সর্বশেষ আপডেটগুলিকে হেরোকুতে পুশ করা এবং অ্যাপ্লিকেশন স্থাপন করা:

 git push heroku main

এর সাথে, আমার কোডটি হেরোকুতে ঠেলে দেওয়া হয়েছিল, যা তারপরে আমার অ্যাপ্লিকেশনটি কম্পাইল এবং স্থাপন করেছিল। এক মিনিটেরও কম সময়ে, আমি নিম্নলিখিতটি দেখেছি, আমাকে জানিয়েছি যে আমার অ্যাপ্লিকেশনটি ব্যবহারের জন্য প্রস্তুত ছিল:

 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 অ্যাপ্লিকেশনে একটি স্বয়ংসম্পূর্ণ জাভাস্ক্রিপ্ট লাইব্রেরি এবং পাবলিক লোডাশ জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে সক্ষম হয়েছি—সবকিছু ইমপোর্ট ম্যাপ ব্যবহার করে এবং Webpack বা Node.js-এর সাথে ডিল করার প্রয়োজন ছাড়াই। Buh-bye, Webpack এবং Node.js!

উপসংহার

আমার পাঠকরা আমার ব্যক্তিগত মিশন বিবৃতিটি স্মরণ করতে পারেন, যা আমি মনে করি যে কোনও আইটি পেশাদারের ক্ষেত্রে প্রয়োগ করা যেতে পারে:

“আপনার বৌদ্ধিক সম্পত্তির মূল্যকে প্রসারিত করে এমন বৈশিষ্ট্য/কার্যকারিতা প্রদানে আপনার সময়কে ফোকাস করুন। অন্য সবকিছুর জন্য ফ্রেমওয়ার্ক, পণ্য এবং পরিষেবার সুবিধা নিন।" — জে. ভেস্টার

এই নিবন্ধে, আমি প্রথমে রেল 7-এ প্রবেশ করেছি এবং ওয়েবপ্যাক এবং Node.js ব্যবহার করার প্রয়োজন ছাড়া আপনি কত সহজে জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে পারেন তা দেখানোর জন্য আমদানি মানচিত্র ব্যবহার করেছি। আমি শেষবার রেলকে অ্যাকশনে দেখেছি দুই দশকের বেশি হওয়া সত্ত্বেও আমার লক্ষ্যগুলি অর্জনের জন্য যে অল্প সময়ের প্রয়োজন হয়েছিল তাতে আমি বেশ প্রভাবিত হয়েছিলাম।

একটি স্থাপনার দৃষ্টিকোণ থেকে, Heroku প্ল্যাটফর্মে Rails অ্যাপ্লিকেশন স্থাপন করার প্রচেষ্টার মধ্যে একটি Procfile এবং তিনটি CLI কমান্ড তৈরি করা হয়েছে।

উভয় ক্ষেত্রেই, Rails এবং Heroku আমাকে আমার গ্রাহকদের মূল্য প্রদানের উপর লেজার-ফোকাসড থাকার অনুমতি দিয়ে এবং Webpack, Node.js, বা এমনকি DevOps টাস্কগুলির সাথে চ্যালেঞ্জের দ্বারা আটকে না দিয়ে আমার মিশন স্টেটমেন্ট মেনে চলে।

যদিও আমি নিশ্চিত যে আমরা নতুন প্রযুক্তিগুলি অন্বেষণ করার সময় অ-আদর্শ ব্যথার পয়েন্টগুলির মুখোমুখি হতে থাকব, আমি এও আত্মবিশ্বাসী যে সময়ের সাথে সাথে, আমরা এই নিবন্ধে প্রদর্শিত একই ধরনের অর্জনগুলি দেখতে পাব।

বরাবরের মতো, আমার সোর্স কোড এখানে গিটল্যাবে পাওয়া যাবে।

একটি সত্যিই মহান দিন আছে!