হটওয়্যার সহ দ্রুত ইন্টারেক্টিভ রেল অ্যাপস তৈরি করুন:একটি শিক্ষানবিস গাইড

Hotwire এই মুহূর্তে প্রতিটি Rails ডেভেলপারের জন্য একটি আলোচিত বিষয়৷ আপনি যদি Rails এর সাথে কাজ করেন, তাহলে একটি ভাল সুযোগ রয়েছে যে আপনি ইতিমধ্যেই এটি সম্পর্কে অনেক কিছু শুনেছেন৷

Hotwire হল কোডের খুব কম লাইন সহ আপনার অ্যাপে ইন্টারঅ্যাকটিভিটি যোগ করার একটি সম্পূর্ণ নতুন উপায়, এবং এটি তারের উপর HTML ট্রান্সমিট করার মাধ্যমে খুব দ্রুত কাজ করে৷ এর মানে হল আপনি বেশিরভাগ একক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) ফ্রেমওয়ার্ক থেকে আপনার হাত পরিষ্কার রাখতে পারেন৷ দ্রুত পৃষ্ঠা লোডের সময় এবং ইন্টারঅ্যাক্টিভিটি বজায় রেখে আপনি সার্ভারে আপনার রেন্ডারিং যুক্তিকে কেন্দ্রীভূত রাখতে পারেন।

এই পোস্টে, আমরা হটওয়্যারের প্রধান উপাদানগুলি দেখব এবং কীভাবে এটি আপনার রেল অ্যাপে ব্যবহার করবেন। তবে প্রথমে:হটওয়্যার কী এবং কেন আপনি এটি ব্যবহার করবেন?

হটওয়্যার কি?

হটওয়্যার একটি একক লাইব্রেরি নয়, বরং তারের উপর HTML পাঠিয়ে ওয়েব এবং মোবাইল অ্যাপ্লিকেশন তৈরি করার একটি নতুন পদ্ধতি৷ এতে রয়েছে Turbo, Stimulus, এবং Strada (এই বছরের শেষের দিকে আসছে)৷ আমরা এইগুলির প্রত্যেকটি নিয়ে পরবর্তী বিভাগে বিস্তারিত আলোচনা করব৷

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

তবে আসুন আমরা আপাতত রেল জগতে ফিরে আসি।

আপনার রেল অ্যাপে হটওয়্যার ব্যবহার করুন কেন?

তাহলে আপনি কখন Hotwire ব্যবহার করবেন? উত্তরটি যেখানে আপনি আপনার অ্যাপ্লিকেশনটিতে ইন্টারঅ্যাক্টিভিটি যুক্ত করতে চান। উদাহরণস্বরূপ, আপনি যদি চান:

• ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে শর্তসাপেক্ষে প্রদর্শিত/লুকানো কিছু বিষয়বস্তু (যেমন, একটি ঠিকানা ফর্ম যেখানে নির্বাচিত দেশের উপর ভিত্তি করে রাজ্যের তালিকা স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়)।
• রিয়েল-টাইমে কিছু বিষয়বস্তু আপডেট করতে (যেমন, টুইটারের মতো একটি ফিড যেখানে নতুন টুইটগুলি স্বয়ংক্রিয়ভাবে পৃষ্ঠায় যুক্ত হয়)।
• আপনার পৃষ্ঠাগুলির কিছু অংশ অলস-লোড করতে (যেমন, একটি অ্যাকর্ডিয়নের ভিতরে, আপনি শিরোনামগুলি লোড করতে পারেন এবং লোডের সময় দ্রুত করতে অলস-লোড হওয়ার জন্য বিশদ চিহ্নিত করতে পারেন)।

হটওয়্যার উপাদান

আগেই উল্লেখ করা হয়েছে, Hotwire হল ওয়েব অ্যাপ তৈরির জন্য নতুন (এবং কিছু পুরানো) কৌশলের একটি সংগ্রহ৷

আসুন পরবর্তী কয়েকটি বিভাগে এর প্রতিটি নিয়ে আলোচনা করা যাক।

টার্বো

এইচটিএমএল টার্বোকে এর মূল অংশে ড্রাইভ করে। টার্বো তারের উপর আসা এইচটিএমএল ডেটা পরিচালনা করার জন্য এবং একটি সম্পূর্ণ পৃষ্ঠা পুনরায় লোড না করে এটিকে আপনার অ্যাপ্লিকেশনে প্রদর্শন করার জন্য বিভিন্ন কৌশল প্রদান করে। এটির সমন্বয়ে গঠিত:

• টার্বো ড্রাইভ

  আপনি যদি অতীতে Turbolinks ব্যবহার করে থাকেন, তাহলে আপনি Turbo Drive-এর সাথে বাড়িতেই ঠিক অনুভব করবেন৷ এর মূল অংশে, কিছু JS কোড আপনার অ্যাপ্লিকেশনে JavaScript ইভেন্টগুলিকে বাধা দেয়, HTML অ্যাসিঙ্ক্রোনাসভাবে লোড করে এবং আপনার HTML মার্কআপের অংশগুলিকে প্রতিস্থাপন করে৷

• টার্বো ফ্রেম

  টার্বো ফ্রেমগুলি আপনার মার্কআপের অংশগুলিকে বিভিন্ন বিভাগে বিভক্ত করে যা স্বাধীনভাবে লোড করা যায়৷

  উদাহরণস্বরূপ, যদি আপনার একটি ব্লগ অ্যাপ্লিকেশন থাকে, তাহলে আপনার পোস্টের বিষয়বস্তু এবং মন্তব্যগুলি পৃষ্ঠার দুটি সম্পর্কিত কিন্তু স্বাধীন অংশ। আপনি তাদের ডিকপল করতে পারেন যাতে নেভিগেশন স্বাধীনভাবে কাজ করে বা এমনকি টার্বো ফ্রেমের সাথে অ্যাসিঙ্ক্রোনাসভাবে লোড করতে পারে।

• টার্বো স্ট্রীম

  Turbo Strems আপনার অ্যাপ্লিকেশনে সহজে রিয়েল-টাইম ডেটা আনার জন্য ইউটিলিটিগুলি অফার করে৷ উদাহরণস্বরূপ, ধরা যাক আপনি টুইটারের মতো একটি নিউজ ফিড তৈরি করছেন৷ পৃষ্ঠাটি পুনরায় লোড না করে পোস্ট করার সাথে সাথে আপনি ব্যবহারকারীর ফিডে নতুন টুইটগুলি টেনে আনতে চান৷ টার্বো স্ট্রিম আপনাকে JS-এর একটি লাইন না লিখে এটি করতে দেয়৷

• টার্বো নেটিভ

  Turbo Native আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনের চারপাশে একটি নেটিভ র‍্যাপার তৈরি করতে দেয়। নেভিগেশন এবং ইন্টারঅ্যাকশনগুলি আপনাকে নেটিভভাবে সমস্ত স্ক্রীন পুনরায় করা ছাড়াই নেটিভ মনে হবে৷

  আপনি ওয়েবের মাধ্যমে বাকি অ্যাপ্লিকেশন সরবরাহ করতে থাকবেন। এইভাবে, আপনি আপনার অ্যাপ্লিকেশনের সত্যিই ইন্টারেক্টিভ অংশগুলিতে ফোকাস করতে পারেন এবং সেগুলি সঠিকভাবে পেতে পারেন৷

  ৷

উদ্দীপক

উদ্দীপক হল একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক লেখার নিয়ামক যা আপনার HTML এর সাথে ইন্টারঅ্যাক্ট করে।

ধরা যাক আমাদের কিছু জাভাস্ক্রিপ্ট অ্যাট্রিবিউট যোগ করতে হবে যেমন data-controller , data-action , এবং data-target একটি পৃষ্ঠার উপাদানগুলিতে। আমরা একটি উদ্দীপক নিয়ন্ত্রক লিখব যাতে উপাদানগুলিতে অ্যাক্সেস থাকে যা সেই বৈশিষ্ট্যগুলির উপর ভিত্তি করে ইভেন্টগুলি গ্রহণ করে৷ এখানে একটি উদাহরণ:

এমনকি সংশ্লিষ্ট স্টিমুলাস কন্ট্রোলার না পড়েও এটি কী করে সে সম্পর্কে ধারণা পাওয়া খুবই সহজ।

এখানে একটি নিয়ামক যা HTML এর সাথে যায়:

এটি উদ্দীপকের মূলে রয়েছে:জিনিসগুলিকে সহজ এবং পুনরায় ব্যবহারযোগ্য রাখা।

এখন, যদি আপনার কখনো অন্য পৃষ্ঠায় একটি কপি-টু-দ্য-ক্লিপবোর্ড বোতামের প্রয়োজন হয়, আপনি সেই কন্ট্রোলারটি পুনরায় ব্যবহার করতে পারেন। data-* যোগ করুন সবকিছু কাজ করার জন্য মার্কআপে বৈশিষ্ট্যগুলি।

স্ট্রাডা

দুর্ভাগ্যবশত, আমরা এখনও Strada সম্পর্কে অনেক কিছু জানি না৷ কিন্তু এটি একটি ওয়েব অ্যাপ্লিকেশনকে HTML ব্রিজ বৈশিষ্ট্যগুলি ব্যবহার করে একটি নেটিভ অ্যাপের সাথে যোগাযোগ (এবং সম্ভবত ক্রিয়া সম্পাদন করতে) অনুমতি দেবে৷

How to use Hotwire in your Ruby on Rails অ্যাপ্লিকেশন

আমি হটওয়্যার ইন্সটলেশন বা বেসিক ইউজ কেস নিয়ে আলোচনা করতে খুব বেশি সময় দিতে চাই না৷ হটওয়্যার টিম ইতিমধ্যেই তাদের হটওয়্যার স্ক্রিনকাস্টে এটির একটি দুর্দান্ত কাজ করেছে৷ সম্পূর্ণ নির্দেশাবলীর জন্য, turbo-rails দেখুন ইনস্টলেশন এবং উদ্দীপক ইনস্টলেশন।

চলুন সরাসরি কিছু সাধারণ Hotwire ব্যবহারের ক্ষেত্রে ঝাঁপিয়ে পড়ি।

অন্তহীন স্ক্রোল

টার্বো ফ্রেম ব্যবহার করে, ব্যবহারকারীর স্ক্রোল করার সাথে সাথে আমরা সহজেই স্বয়ংক্রিয় পৃষ্ঠা সংখ্যা দিয়ে একটি পৃষ্ঠা তৈরি করতে পারি। এর জন্য, আমাদের দুটি জিনিস করতে হবে:

1. ফ্রেম আইডিতে পৃষ্ঠা নম্বর যুক্ত করে প্রতিটি "পৃষ্ঠা" তার নিজস্ব ফ্রেমের মধ্যে রেন্ডার করুন (যেমন, turbo_frame_tag "posts_#{@posts.current_page}" )।
2. একটি 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-কে কল করুন।

শুধু পোস্টের বৈশিষ্ট্যগুলি আপডেট করুন এবং আপনি একটি turbo_stream এ প্রতিক্রিয়া জানাতে চান তা চিহ্নিত করুন বিন্যাস (যাতে এটি refresh_form.turbo_stream.erb দেখায় )।

এই ধাপে, আমরা আমাদের form পুনরায় ব্যবহার করছি আংশিক, এটি একটি turbo_stream এর ভিতরে মোড়ানো একটি replace সহ কর্ম।

এবং এটি একটি গতিশীল ফর্ম কাজ করার জন্য আপনার প্রয়োজন। আমি জানি এটি একটু উন্নত দেখাচ্ছে, কিন্তু refresh উদ্দীপক নিয়ামক হল একটি ভাগ করা অংশ যা আপনি এখন সঠিক data-* যোগ করে আপনার সমস্ত গতিশীল ফর্মের জন্য ব্যবহার করতে পারেন বৈশিষ্ট্য। তাই, আপনি এখন সার্ভার-সাইড ডায়নামিক ফর্ম রিফ্রেশ পাচ্ছেন অন্য ফর্মের জন্য কোনো নতুন JS না লিখেই। বেশ অসাধারণ, তাই না?

পুনরায় লোড না করেই পৃষ্ঠাগুলিতে সামগ্রী যুক্ত করুন

পরবর্তী ব্যবহারের ক্ষেত্রে Hotwire যেটি সহজ করে তোলে তা হল WebSocket সংযোগের মাধ্যমে HTML স্ট্রিম করা এবং নতুন বিষয়বস্তু সহ একটি পৃষ্ঠা আপডেট করা। এর একটি ভাল উদাহরণ হল GitHub মন্তব্য বিভাগ। আপনি টার্বো স্ট্রিম ব্যবহার করে এটি খুব সহজে বাস্তবায়ন করতে পারেন।

এর দুটি অংশ রয়েছে৷

প্রথমত, আমরা তালিকার পৃষ্ঠায় একটি টার্বো স্ট্রিম লিসেনারকে এম্বেড করি যা সার্ভারে একটি ওয়েবসকেট সংযোগ খোলে এবং ইভেন্টগুলি শোনে৷

এরপরে, আমরা স্ট্রীমে নতুন মন্তব্য সম্প্রচার করতে মডেলটি আপডেট করি।

তোমার আর কিছু লাগবে না। Turbo স্বয়ংক্রিয়ভাবে app/views/comments/_comment.html.erb রেন্ডার করবে প্রতিটি নতুন মন্তব্যের জন্য আংশিক এবং এটি একটি WebSocket সংযোগের মাধ্যমে পাঠান। এটি Turbo's JS দ্বারা বাছাই করা হবে এবং id comments সহ লক্ষ্যের সাথে প্রিপেন্ড করা হবে .

আসুন এক ধাপ এগিয়ে যাই এবং একটি ছোট উদ্দীপক কন্ট্রোলারের সাথে নতুন যোগ করা সমস্ত মন্তব্যে একটি ইঙ্গিত যোগ করি।

প্রথমে, সম্প্রচার এবং comment পরিবর্তন করুন শর্তসাপেক্ষে কন্ট্রোলার অন্তর্ভুক্ত করার জন্য আংশিক৷

এই ছোট স্টিমুলাস কন্ট্রোলারটি 3 সেকেন্ডের জন্য সংযোগে একটি বিশেষ হাইলাইট ক্লাস যোগ করে এবং তারপর এটি সরিয়ে দেয়।

দ্রষ্টব্য :আপনাকে সেই ক্লাসের উপস্থিতির উপর ভিত্তি করে CSS হাইলাইটিং আপডেট করতে হবে।

একবার এই কন্ট্রোলারটি হয়ে গেলে, আপনি হাইলাইট ক্লাসের প্রয়োজন এমন যেকোনো কিছুতে এটি পুনরায় ব্যবহার করতে পারেন৷ আপনার যদি সেই নমনীয়তার প্রয়োজন হয় তবে আপনি ডেটা অ্যাট্রিবিউটগুলি থেকে সময়কাল এবং শ্রেণির নাম পেতে এটিকে পরিবর্তনও করতে পারেন৷

এটি হটওয়্যার সম্পর্কে দুর্দান্ত জিনিস — এটি আপনাকে অনেক দীর্ঘ পথ নিয়ে যায়, এবং আপনাকে JS-এ হাত ডুবাতে হবে না। যখন আপনাকে কিছু JS লিখতে হবে, স্টিমুলাস আপনাকে ছোট সাধারণ কন্ট্রোলার তৈরি করার সরঞ্জাম দেয় যা পুনরায় ব্যবহার করা যেতে পারে।

র্যাপ আপ এবং আরও পড়া

রেল সম্প্রদায় হটওয়্যার প্রবর্তনের মাধ্যমে সত্যিই উত্তেজিত হয়েছে, এবং ঠিক তাই।

এই পোস্টে, আমরা হটওয়্যারের মূল উপাদানগুলি দেখেছি এবং কীভাবে আপনার রেল অ্যাপে হটওয়্যার ব্যবহার করবেন। টার্বো এবং স্টিমুলাস ব্যবহার করে আপনি কীভাবে আপনার অ্যাপ্লিকেশনটিকে প্রাণবন্ত করতে পারেন তা আমরা স্পর্শ করেছি৷

হটওয়্যার এবং টার্বো আপনার জন্য কী করতে পারে তা দেখার জন্য অফিসিয়াল হটওয়্যার স্ক্রিনকাস্ট ভূমিকা এবং টার্বো ডকুমেন্টেশন দুর্দান্ত জায়গা৷

উন্নত ব্যবহারের জন্য, আমি টার্বো-রেল গিটহাব রেপোতে যাওয়ার পরামর্শ দিচ্ছি। দুঃখের বিষয়, ডকুমেন্টেশনটি একটু বিরল, কিন্তু আপনি যদি আপনার হাত নোংরা হওয়ার ভয় না পান, তাহলে কোড এবং ইনলাইন মন্তব্যগুলি পড়ুন:

1. Turbo::FramesHelper টার্বো ফ্রেম এর জন্য .
2. Turbo::Broadcastable টার্বো স্ট্রীম-এ সম্প্রচারের জন্য কোড থেকে।
3. Turbo::Streams::TagBuilder টার্বো স্ট্রীম-এ সম্প্রচারের জন্য ইনলাইন কন্ট্রোলার অ্যাকশনের অংশ হিসেবে।

শুভ কোডিং!

পি.এস. আপনি যদি রুবি ম্যাজিক পোস্টগুলি প্রেস থেকে বের হওয়ার সাথে সাথে পড়তে চান তবে আমাদের রুবি ম্যাজিক নিউজলেটারে সাবস্ক্রাইব করুন এবং একটি পোস্ট মিস করবেন না!

সপন দিবাকর

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

সপন দিবাকরের সমস্ত নিবন্ধ