হটওয়ায়ার (Hotwire) বর্তমানে প্রতিটি রেইলস ডেভেলপারের জন্য একটি গরম আলোচনার বিষয়। আপনি যদি রেইলস নিয়ে কাজ করেন, তবে এর সম্পর্কে আপনি ইতিমধ্যে অনেক কিছু শুনে থাকেন সম্ভবত।
হটওয়ায়ার (Hotwire) কী?
হটওয়ায়ার একটি একক লাইব্রেরি নয়, বরং ওয়েব এবং মোবাইল অ্যাপ্লিকেশন তৈরির একটি নতুন পদ্ধতি যা HTML-কে "ওয়ার"-এর মাধ্যমে পাঠায়। এতে টার্বো (Turbo), স্টিমুলাস (Stimulus) এবং স্ট্রাদা (Strada - এই বছর আসছে) অন্তর্ভুক্ত। পরবর্তী বিভাগে আমরা প্রতিটি নিয়ে বিস্তারিত আলোচনা করব।
দ্রষ্টব্য: হটওয়ায়ার রেইলসের সাথে গভীরভাবে জড়িত হলেও, এটি সম্পূর্ণভাবে ভাষা-নিরপেক্ষ, তাই অন্যান্য অ্যাপ্লিকেশনগুলির সাথে এটি একইভাবে ভালো কাজ করে। আমি প্রোডাকশনে নন-রেইলস অ্যাপ্লিকেশন এবং কিছু স্ট্যাটিক ওয়েবসাইটে স্টিমুলাস ব্যবহার করেছি। টার্বোও রেইলস ছাড়া ব্যবহার করা যায়।
এখন আমরা আবার রেইলসের জগতে ফিরে যাই।
আপনার রেইলস অ্যাপে হটওয়ায়ার কেন ব্যবহার করবেন?
তখন আপনি কখন হটওয়ায়ার ব্যবহার করবেন? উত্তর হল - আপনার অ্যাপ্লিকেশনে ইন্টারঅ্যাক্টিভিটি যোগ করার জন্য যেকোনো জায়গায়। উদাহরণস্বরূপ, যদি আপনি চান:
- ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে কিছু কন্টেন্ট শর্তসাপেক্ষভাবে প্রদর্শন/লুকানো (যেমন: একটি ঠিকানার ফর্ম যেখানে নির্বাচিত দেশের ভিত্তিতে রাজ্যের তালিকা স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়)।
- রিয়েল-টাইমে কিছু কন্টেন্ট আপডেট করা (যেমন: টুইটারের মতো একটি ফিড যেখানে নতুন টুইটগুলো পৃষ্ঠা রিফ্রেশ ছাড়াই স্বয়ংক্রিয়ভাবে যোগ হয়)।
- পৃষ্ঠার কিছু অংশ লেজি-লোড করা (যেমন: একটি অ্যাকর্ডিয়নে, আপনি শিরোনাম লোড করতে পারেন এবং ডিটেলগুলো লেজি-লোড চিহ্নিত করে লোড টাইম দ্রুত করতে পারেন)।
হটওয়ায়ার کے উপাদানসমূহ
আগে বলা অনুযায়ী, হটওয়ায়ার ওয়েব অ্যাপ তৈরির জন্য নতুন (এবং কিছু পুরানো) কৌশলগুলোর সমষ্টি।
পরবর্তী কয়েকটি বিভাগে এগুলো নিয়ে আলোচনা করি।
টার্বো (Turbo)
টার্বোর মূলে HTML। টার্বো HTML ডেটা "ওয়ার"-এর মাধ্যমে আসার সময় কীভাবে তা আপনার অ্যাপ্লিকেশনে পূর্ণ পৃষ্ঠা রিলোড ছাড়াই প্রদর্শন করা যায়, সেটির জন্য বেশ কিছু কৌশল প্রদান করে। এটি গঠিত:
টার্বো ড্রাইভ (Turbo Drive)
আপনি যদি অতীতে টার্বোলিংکس (Turbolinks) ব্যবহার করে থাকেন, তবে টার্বো ড্রাইভ আপনাকে খুব পরিচিত লাগবে। এর মূলে, কিছু জাভাস্ক্রিপ্ট কোড আপনার অ্যাপ্লিকেশনে জাভাস্ক্রিপ্ট ইভেন্টগুলো ইন্টারসেপ্ট করে, HTML অ্যাসিঙ্ক্রোনাসলি লোড করে, এবং আপনার HTML মার্কআপের অংশগুলো প্রতিস্থাপন করে।
টার্বো ফ্রেমস (Turbo Frames)
টার্বো ফ্রেমস আপনার মার্কআপের অংশগুলো আলাদা আলাদা секশনে ভাগ করে দেয় যেগুলো স্বাধীনভাবে লোড হতে পারে।
উদাহরণস্বরূপ, আপনার একটি ব্লগ অ্যাপ্লিকেশন থাকলে, আপনার পোস্টের কন্টেন্ট এবং কমেন্টগুলো পৃষ্ঠার দুটি সংশ্লিষ্ট কিন্তু স্বাধীন অংশ। আপনি এগুলোকে আলাদা করে নিতে পারেন যাতে নেভিগেশন স্বतंत्रভাবে কাজ করে অথবা টার্বো ফ্রেমস দিয়ে এগুলো অ্যাসিঙ্ক্রোনাসলি লোড করতে পারেন।
টার্বো স্ট্রিমস (Turbo Streams)
টার্বো স্ট্রিমস আপনার অ্যাপ্লিকেশনে রিয়েল-টাইম ডেটা আনতে সুবিধা দেয়। ধরুন, আপনি টুইটারের মতো একটি নিউজ ফিড তৈরি করছেন। আপনি চান নতুন টুইটগুলো পোস্ট होतेই ব্যবহারকারীর ফিডে পৃষ্ঠা রিলোড ছাড়াই যোগ হয়। টার্বো স্ট্রিমস আপনাকে এক লাইন জাভাস্ক্রিপ্ট লিখে এটি করতে দেয়।
টার্বো নেটিভ (Turbo Native)
টার্বো নেটিভ আপনাকে আপনার ওয়েব অ্যাপ্লিকেশনের চারদিকে একটি নেটিভ র্যাপার (wrapper) তৈরি করতে দেয়। নেভিগেশন এবং ইন্টারঅ্যাকশন নেটিভ जैसा অনুভব দেবে, কিন্তু আপনাকে সকল স্ক্রিন নেটিভভাবে পুনর্নির্মাণ করতে হবে না।
আপনি অ্যাপ্লিকেশনের বাকি অংশ ওয়েবের মাধ্যমে ডেলিভার করতে থাকবেন। যাতে আপনি আপনার অ্যাপ্লিকেশনের সত্যিকারের ইন্টারঅ্যাক্টিভ অংশগুলোর ওপর ফোকাস করতে পারেন এবং সেগুলো সঠিকভাবে বাস্তবায়ন করতে পারেন।
স্টিমুলাস (Stimulus)
স্টিমুলাস আপনার HTML-এর সাথে ইন্টারঅ্যাক্ট করার জন্য কন্ট্রোলার লিখার একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক।
মান लीজिए আমাদের একটি পৃষ্ঠার উপাদানগুলোর সাথে data-controller, data-action, এবং data-target এর মতো জাভাস্ক্রিপ্ট অ্যাট্রিবিউট যোগ করতে হবে। আমরা একটি স্টিমুলাস কন্ট্রোলার লিখব যেটির لتلك উপাদানগুলোর অ্যাক্সেস থাকবে এবং সেই অ্যাট্রিবিউটগুলোর ভিত্তিতে ইভেন্ট পাবে। উদাহরণ:
এটি সম্পর্কিত স্টিমুলাস কন্ট্রোলার পড়া ছাড়াই কী কাজ করে সেটা বুঝতে খুব সহজ।
এখানে HTML-এর সাথে যেতে পারে এমন একটি কন্ট্রোলার:
এটিই স্টিমুলাসের মূল: জিনিসগুলো সহজ এবং পুনঃব্যবহারযোগ্য রাখা।
এখন, যদি কখনো অন্য পৃষ্ঠায় ক্লিপবোর্ডে কপি করার বোতাম দরকার হয়, তবে আপনি কেবল সেই কন্ট্রোলারটি পুনরায় ব্যবহার করতে পারেন। মার্কআপে সঠিক data-* অ্যাট্রিবিউট যোগ করলেই সব কাজ করবে।
স্ট্রাদা (Strada)
দুঃখজনকভাবে, স্ট্রাদা নিয়ে আমরা এখনো অনেক কিছু জানি না। কিন্তু এটি একটি ওয়েব অ্যাপ্লিকেশনকে HTML ব্রিজ অ্যাট্রিবিউট ব্যবহার করে একটি নেটিভ অ্যাপের সাথে যোগাযোগ করতে (এবং সম্ভবত কিছু অ্যাকশন সম্পাদন করতে) দেবে।
আপনার রুবি অন রেইলস অ্যাপ্লিকেশনে হটওয়ায়ার কীভাবে ব্যবহার করবেন
আমি হটওয়ায়ার ইনস্টলেশন বা বেসিক ইউজ কেস নিয়ে অনেক সময় ব্যয় করতে চাই না। হটওয়ায়ার টিম তাদের স্ক্রিনকাস্টে এটি সম্পর্কে চমৎকার কাজ করেছে। সম্পূর্ণ নির্দেশাবলীর জন্য turbo-rails ইনস্টলেশন এবং স্টিমুলাস ইনস্টলেশন দেখুন।
চলুন সরাসরি কিছু সাধারণ হটওয়ায়ার ইউজ কেসে যাই।
এন্ডলেস স্ক্রোল (Endless Scroll)
টার্বো ফ্রেমস ব্যবহার করে আমরা সহজেই একটি পৃষ্ঠা তৈরি করতে পারি যেখানে ব্যবহারকারী স্ক্রোল করার সাথে সাথে স্বয়ংক্রিয়ভাবে পেজিনেশন হবে। এর জন্য দুটি কাজ করতে হবে:
- প্রতিটি "পৃষ্ঠা"কে নিজস্ব ফ্রেমে রেন্ডার করুন পৃষ্ঠা নম্বর ফ্রেম আইডি এর সাথে যুক্ত করে (যেমন:
turbo_frame_tag "posts_#{@posts.current_page}")। - পরবর্তী পৃষ্ঠার জন্য একটি
lazyফ্রেম ব্যবহার করুন যাতে এটি স্বয়ংক্রিয়ভাবে লোড না হয় যতক্ষণ না এটি ভিউপোর্টে আসে।
দ্রষ্টব্য: এই উদাহরণে কামিনারি (Kaminari) এর মেথডগুলো ব্যবহার করা হয়েছে, কিন্তু আপনি যেকোনো অন্যান্য পেজিনেশন মেথডের সাথে এটি ব本作品の করতে পারেন।
কন্ট্রোলারে কিছু 스페শাল করতে হবে না। একটি স্ট্যান্ডার্ড index মেথড কাজ করবে:
এখানে টрюকটি হল নেস্টেড ফ্রেম ব্যবহার করা, যেখানে আগের পৃষ্ঠার ফ্রেমের ভিতরে পরবর্তী পৃষ্ঠার ফ্রেম নেস্ট করা থাকে। যেহেতু প্রথম পৃষ্ঠা লোড হলে, পরবর্তী পৃষ্ঠার ফ্রেম শেষে থাকে। যখন ব্যবহারকারী সেটা স্ক্রোল করে, তখন সেটি দ্বিতীয় পৃষ্ঠার কন্টেন্ট দিয়ে প্রতিস্থাপিত হয়। তৃতীয় পৃষ্ঠার লেজি ফ্রেম শেষে রেন্ডার হয়।
ডাইনামিক ফর্মস (Dynamic Forms)
হটওয়ায়ার ব্যবহার করে আপনি সহজেই ডাইনামিক ফর্ম বাস্তবায়ন করতে পারেন ফ্রন্টএন্ডে ফিল্ড টগল করার জন্য কোনো কাস্টম লজিক ছাড়া। এটি এন্ডলেস স্ক্রোল ইউজ কেসের চেয়ে কিছুটা জটিল, কারণ এতে টার্বো স্ট্রিম এবং স্টিমুলাস দুটোই ব্যবহৃত হয়।
আমাদের ফর্ম থেকে শুরু করি।
ফর্মটি যথেষ্ট সহজ — আমরা kind সিলেক্ট দেখাচ্ছি News এবং Blog অপশন নিয়ে। আমরা চাই উপলব্ধ ক্যাটেগরির মানগুলো নির্বাচিত kind-এর উপর ভিত্তি করে পরিবর্তন হবে (মান করে categories_for_kind(@post.kind) প্রদত্ত kind-এর জন্য ক্যাটেগরির তালিকা ফেরত দেয়)।
নিকট থেকে দেখলে, আপনি দেখবেন ফর্মে কিছু ডেটা অ্যাট্রিবিউট যোগ করা হয়েছে। data-target ফর্ম এলিমেন্টকে RefreshFormController স্টিমুলাস কন্ট্রোলারের form টার্গেটের সাথে লিংক করবে। এবং data-action যার মান change->refresh-form#refreshForm, kind সিলেক্ট পরিবর্তিত হলে লিংক করা স্টিমুলাস কন্ট্রোলারের refreshForm মেথডকে কল করবে।
আমাদের স্টিমুলাস কন্ট্রোলারটি দেখি:
সকল refreshForm কলের সময়, আমরা কন্ট্রোলারের URL-এ একটি নতুন PUT রিকোয়েস্ট করি (যেটি data-controller="refresh-form" সഹ একই এলিমেন্টের data-refresh-form-url দিয়ে সেট করা থাকে)। গুরুত্বপূর্ণ অংশটি হল responseKind কে turbo-stream সেট করা। @rails/request লাইব্রেরি এই রেসপন্স বুঝতে পারে এবং রেসপন্স স্ট্রিমের ভিত্তিতে ইনস্ট্রাকশন সম্পাদন করে।
এখন বাকি থাকল আমাদের refresh_form কল থেকে সঠিক স্ট্রিম ফেরত দেওয়া যাতে টার্বো বুঝতে পারে এবং আমাদের ফর্ম আপডেট করতে পারে।
পোস্টের অ্যাট্রিবিউটগুলো আপডেট করুন এবং চিহ্নিত করুন যে আপনি turbo_stream ফরম্যাটে রেসপন্ড করতে চান (যাতে সেটি refresh_form.turbo_stream.erb খুঁজে বের করে)।
এই ধাপে, আমরা আমাদের form পারশিয়ালটি পুনরায় ব্যবহার করছি, এটিকে replace অ্যাকশন সহ একটি turbo_stream দিয়ে র্যাপ করে।
এতটুকুই একটি ডাইনামিক ফর্ম চালু করার জন্য দরকার। আমি জানি এটি কিছুটা অ্যাডভান্সড দেখাচ্ছে, কিন্তু refresh স্টিমুলাস কন্ট্রোলারটি একটি শেয়ার্ড অংশ যা আপনি এখন আপনার সকল ডাইনামিক ফর্মের জন্য ব্যবহার করতে পারেন সঠিক data-* অ্যাট্রিবিউট যোগ করে। যেনে, এখন আপনি সার্ভার-সাইড ডাইনামিক ফর্ম রিফ্রেশ পাচ্ছেন নতুন কোনো জাভাস্ক্রিপ্ট লিখে অন্য ফর্মের জন্য। খুব ভালো, তো?
পৃষ্ঠা রিলোড ছাড়াই কন্টেন্ট যুক্ত করা (Append Content to Pages Without Reloading)
হটওয়ায়ার যা সহজ করে দেয় তার পরের ইউজ কেস হল একটি ওয়েবসকেট কানেকশনের মাধ্যমে HTML স্ট্রিম করা এবং নতুন কন্টেন্ট আসার সাথে সাথে পৃষ্ঠা আপডেট করা। এর একটি চমৎকার উদাহরণ হল গিটহাবের কমেন্ট সেকশন। আপনি টার্বো স্ট্রিমস ব্যবহার করে এটি খুব সহজে বাস্তবায়ন করতে পারেন।
এটির দুটি অংশ আছে।
প্রথম, লিস্টিং পৃষ্ঠায় একটি টার্বো স্ট্রিম লিসেনার এম্বেড করুন যা সার্ভারের সাথে একটি ওয়েবসকেট কানেকশন খুলে এবং ইভেন্টের জন্য লিসেন করে।
পরবর্তী, মডেলকে আপডেট করুন যাতে নতুন কমেন্টগুলো স্ট্রিমে ব্রডকাস্ট হয়।
আপনাকে আর কিছু দরকার নেই। টার্বো স্বয়ংক্রিয়ভাবে প্রতিটি নতুন কমেন্টের জন্য app/views/comments/_comment.html.erb পারশিয়াল রেন্ডার করবে এবং এটি ওয়েবসকেট কানেকশনের মাধ্যমে পাঠাবে। এটি টার্বোর জাভাস্ক্রিপ্ট দ্বারা পিক আপ হবে এবং comments আইডি বিশিষ্ট টার্গেটে প্রিপেন্ড হবে।
এক ধাপ এগিয়ে যাই এবং সমস্ত নতুন যোগ হওয়া কমেন্টে একটি ইন্ডিকেশন যোগ করি একটি ছোট স্টিমুলাস কন্ট্রোলার দিয়ে।
প্রথম, ব্রডকাস্ট এবং comment পারশিয়াল মডিফাই করুন কন্ট্রোলারটি শর্তসাপেক্ষভাবে অন্তর্ভুক্ত করার জন্য।
এই ছোট স্টিমুলাস কন্ট্রোলার কানেকশনের সময় ৩ সেকেন্ডের জন্য একটি স্পেশাল হাইলাইট ক্লাস যোগ করে এবং তারপর সরিয়ে দেয়।
দ্রষ্টব্য: আপনাকে সেই ক্লাসের উপস্থিতির ভিত্তিতে CSS হাইলাইটিংও আপডেট করতে হবে।
এই কন্ট্রোলার হয়ে গেলে, আপনি যেকোনো জিনিসে যেটিকে হাইলাইট ক্লাস দরকার সেটিতে এটি পুনরায় ব্যবহার করতে পারেন। আপনি এমনকি এটিকে ডেটা অ্যাট্রিবিউট থেকে ডুরেশন এবং ক্লাস নেম নেওয়ার মতো মডিফাই করতে পারেন যদি সেই ফ্লেক্সিবিলিটি দরকার হয়।
হটওয়ায়ারের যেটা চমৎকার সেটা হল — এটি আপনাকে অনেক দূর तक নিয়ে যায়, এবং আপনাকে জাভাস্ক্রিপ্টে হাত দিতে হয় না। যখন আপনি কিছু জাভাস্ক্রিপ্ট লিখেন, স্টিমুলাস আপনাকে ছোট ছোট জেনেরিক কন্ট্রোলার বানাতে টুলস দেয় যেগুলো পুনরায় ব্যবহার করা যায়।
সমাপন এবং আরও পড়া
রেইলস কমিউনিটি হটওয়ায়ার-এর আসার সাথে খুব উত্সাহিত, এবং যাতে হোক।
এই পোস্টে, আমরা হটওয়ায়ার-এর মূল উপাদানগুলো এবং আপনার রেইলস অ্যাপে হটওয়ায়ার কীভাবে ব্যবহার করবেন সেটি দেখেছি। আমরা দেখেছি কীভাবে আপনি টার্বো এবং স্টিমুলাস ব্যবহার করে আপনার অ্যাপ্লিকেশনে প্রাণ ফুঁকতে পারেন।
অফিসিয়াল হটওয়ায়ার স্ক্রিনকাস্ট ইন্ট্রোডাকশন এবং টার্বো ডকুমেন্টেশন হটওয়ায়ার এবং টার্বো আপনার জন্য কী করতে পারে সেটা দেখার জন্য দুটো চমৎকার জায়গা।
অ্যাডভান্সড ব্যবহার için, আমি turbo-rails গিটহাব রেপোতে যেতে পরামর্শ দিই। দুঃখজনকভাবে, ডকুমেন্টেশন কিছুটা বিরল, কিন্তু আপনি যদি হাত গোড়া করার জন্য প্রস্তুত হন, তাহলে কোড এবং ইনলাইন কমেন্টগুলো পড়ুন:
Turbo::FramesHelper- টার্বো ফ্রেমস এর জন্য।Turbo::Broadcastable- কোড থেকে টার্বো স্ট্রিমস-এ ব্রডকাস্ট করার জন্য।Turbo::Streams::TagBuilder- ইনলাইন কন্ট্রোলার অ্যাকশন এর অংশ হিসেবে টার্বো স্ট্রিমস-এ ব্রডকাস্ট করার জন্য।
খুশি কোডিং!
P.S. আপনি যদি রুবি ম্যাজিক পোস্টগুলো প্রেস থেকে বের होते ही পড়তে চান, আমাদের রুবি ম্যাজিক নিউজলেটার সাবস্ক্রাইব করুন এবং একক পোস্টও মিস করবেন না!
সাপান দিবাকার (Sapan Diwakar)
আমাদের অতিথি লেখক সাপান দিবাকার একজন ফুল-স্ট্যাক ডেভেলপার। তিনি তার ব্লগে আপনার আগ্রহের বিষয়ে লিখেন এবং জীবনে এবং কোডে জিনিসগুলো সহজ রাখার পক্ষে। তিনি যখন টেকনোলজির সাথে কাজ করেন না, বাগানে সময় কাটাতে, জঙ্গলে হাইকিং করতে, এবং আউটডোর খেলাধুলা খেলতে পছন্দ করেন।
সাপান দিবাকারের সব আর্টিকেল
