আমি অভ্যাসবশত Vue.js ব্যবহার করতাম। প্রতিটি প্রজেক্ট একইভাবে শুরু হতো: CLI ইনস্টল করা, রাউটার সেটআপ করা, স্টোর কনফিগার করা এবং পুরো বিষয়টিকে একটি single-page application (SPA) শেলের মধ্যে রাখা। আমি একটি রিয়েল-টাইম ড্যাশবোর্ড তৈরি করছি নাকি একটি সাধারণ কন্টাক্ট ফর্ম, তাতে কিছু যায় আসে না। Vue ছিল আমার ডিফল্ট পছন্দ, এবং আমি ভাবতাম এর চেয়ে হালকা কিছু ব্যবহার করা মানে পিছিয়ে যাওয়া।

এই অভ্যাসটি খুবই সাধারণ। আপনি যদি React বা Vue ইকোসিস্টেমে বছরের পর বছর কাটিয়ে থাকেন, তবে SPA মডেলটি অনিবার্য বলে মনে হতে শুরু করে। আপনি আর প্রশ্ন করেন না যে আপনার আসলে এত জটিল যন্ত্রপাতির প্রয়োজন আছে কি না। আপনি কেবল সেটি ব্যবহার করতে শুরু করেন। সময়ের সাথে সাথে আমি একটি উদ্বেগজনক বিষয় লক্ষ্য করলাম। আমি এমন সব অ্যাডমিন স্ক্রিনের জন্য Vuex স্টোর তৈরি করছিলাম যেগুলোর কেবল একটি স্ট্যাটাস পরিবর্তন করা এবং একটি টেবিল রিফ্রেশ করার প্রয়োজন ছিল। আমি এমন সব ল্যান্ডিং পেজের জন্য fetch লজিক লিখছিলাম যেগুলোর কেবল একটি ইমেল অ্যাড্রেস সাবমিট করার প্রয়োজন ছিল। জটিলতা সমস্যাগুলো থেকে আসছিল না; এটি আসছিল আমার টুল নির্বাচনের কারণে।

তারপর আমি HTMX ব্যবহার করা শুরু করি। এই পরিবর্তনটি আমার প্রত্যাশার চেয়ে অনেক শান্তভাবে ঘটেছিল, কিন্তু এটি আমার টেক স্ট্যাক (stack) নির্বাচনের পদ্ধতি বদলে দিয়েছে।

HTMX আসলে কী করে

অনলাইনের বেশিরভাগ আলোচনা এই বিষয়টি ভুলভাবে উপস্থাপন করে। মানুষ এটিকে Vue বনাম React বনাম HTMX-এর লড়াই হিসেবে দেখে। এই তুলনাটি মূল বিষয়টি সম্পূর্ণ এড়িয়ে যায়। HTMX কোনো SPA ফ্রেমওয়ার্ক নয়। এটি Vue-কে প্রতিস্থাপন করতে চায় না। এটি এমন একটি লাইব্রেরি যা HTML-কে ব্রাউজারের ডিফল্ট ক্ষমতার চেয়েও বেশি কিছু করতে সাহায্য করে।

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

এটি কোনো ডাউনগ্রেড নয়। এটি একটি ভিন্ন মডেল। Vue আপনাকে একটি ক্লায়েন্ট-সাইড অ্যাপ্লিকেশন তৈরি করতে এবং ব্রাউজারে স্টেট ম্যানেজ করতে বলে। HTMX আপনাকে সার্ভারে স্টেট রাখতে এবং নেটওয়ার্কের মাধ্যমে HTML পাঠাতে বলে। যেহেতু তারা ভিন্ন ধরনের সমস্যার সমাধান করে, তাই কোনো দ্বন্দ্ব ছাড়াই একই প্রজেক্টে উভয়টি সহাবস্থান করতে পারে।

কখন Vue এখনও সঠিক সিদ্ধান্ত

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

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

যেখানে HTMX প্রাধান্য পায়

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

HTMX-এর মাধ্যমে, একটি ডিলিট বাটন hx-delete এবং hx-target অ্যাট্রিবিউটযুক্ত একটি ট্যাগে পরিণত হয়। এটি ক্লিক করলে ব্রাউজার রিকোয়েস্ট পাঠায় এবং সার্ভার একটি রিফ্রেশ করা টেবিল রো (table row) দিয়ে রেসপন্স করে।