मी सवयीने Vue.js वापरत असे. प्रत्येक प्रकल्पाची सुरुवात एकाच पद्धतीने व्हायची: CLI इंस्टॉल करणे, राउटर सेट करणे, स्टोअर कॉन्फिगर करणे आणि संपूर्ण गोष्टीला सिंगल-पेज ॲप्लिकेशन (SPA) शेलमध्ये गुंडाळणे. मी रिअल-टाइम डॅशबोर्ड बनवत होतो की साधा कॉन्टॅक्ट फॉर्म, याने काहीही फरक पडत नसे. Vue हे माझे डिफॉल्ट होते आणि मला वाटायचे की त्यापेक्षा हलके काहीही वापरणे म्हणजे प्रगतीमागे जाण्यासारखे आहे.
ही सवय सामान्य आहे. जर तुम्ही अनेक वर्षे React किंवा Vue इकोसिस्टममध्ये घालवली असतील, तर SPA मॉडेल अपरिहार्य वाटू लागते. तुम्हाला खरोखर इतक्या मोठ्या यंत्रणेची गरज आहे का, हे तुम्ही विचारणे थांबवता. तुम्ही फक्त ते वापरता. कालांतराने, मला काहीतरी त्रासदायक जाणवू लागले. मी अशा ॲडमिन स्क्रीनसाठी Vuex स्टोअर्स तयार करत होतो ज्यांना फक्त एक स्टेटस बदलणे आणि टेबल रिफ्रेश करण्याची गरज होती. मी अशा लँडिंग पेजेससाठी fetch लॉजिक तयार करत होतो ज्यांना फक्त एक ईमेल पत्ता सबमिट करायचा होता. गुंतागुंत समस्यांमुळे येत नव्हती, तर ती माझ्या साधनांच्या निवडीमुळे येत होती.
मग मी HTMX वापरण्यास सुरुवात केली. हा बदल माझ्या अपेक्षेपेक्षा शांत होता, पण त्याने माझी टेक स्टॅक निवडण्याची पद्धत बदलून टाकली.
HTMX प्रत्यक्षात काय करते
बहुतेक ऑनलाइन चर्चांमध्ये हे चुकीच्या पद्धतीने मांडले जाते. लोक याला Vue विरुद्ध React विरुद्ध HTMX असा लढा समजतात. ही तुलना मूळ मुद्दाच चुकवते. HTMX हे SPA फ्रेमवर्क नाही. त्याला Vue ची जागा घ्यायची नाहीये. ते एक लायब्ररी आहे जी HTML ला ब्राउझरच्या मूळ क्षमतेपेक्षा अधिक काम करण्यास सक्षम करते.
माउंट होणारा, JSON फेच करणारा, त्याला लोकल स्टेटमध्ये पार्स करणारा आणि लिस्ट पुन्हा रेंडर करणारा घटक (component) लिहिण्याऐवजी, तुम्ही बटणाला एक ॲट्रिब्यूट जोडता. सर्व्हर डेटा पेलोड्सऐवजी HTML फ्रॅग्मेंट्स परत करतो. ब्राउझर त्या कंटेंटला योग्य ठिकाणी बदलतो (swap). तुम्ही अजूनही सर्व्हर-रेंडर केलेल्या पेजेसवर काम करत असता, परंतु तुम्हाला अशी इंटरअॅक्टिव्हिटी मिळते जी लोक सहसा जड JavaScript फ्रंट एंड्सशी जोडतात.
हे कोणतेही डाउनग्रेड नाही. हे एक वेगळे मॉडेल आहे. Vue तुम्हाला क्लायंट-साइड ॲप्लिकेशन तयार करण्यास आणि ब्राउझरमध्ये स्टेट मॅनेज करण्यास सांगते. HTMX तुम्हाला स्टेट सर्व्हरवर ठेवण्यास आणि वायरद्वारे HTML पाठवण्यास सांगते. कारण ते वेगवेगळ्या प्रकारच्या समस्या सोडवतात, त्यामुळे दोन्ही एकाच प्रकल्पात कोणत्याही संघर्षाशिवाय एकत्र राहू शकतात.
जेव्हा Vue अजूनही योग्य ठरते
जटिल इंटरफेससाठी Vue ची गरज असते. जर तुम्ही ड्रॅग-अँड-ड्रॉप विगेट्स, नेस्टेड फिल्टरिंग आणि एकाधिक व्ह्यूजमध्ये डेटा शेअर करणारे लाईव्ह चार्ट्स असलेले रिअल-टाइम ॲनालिटिक्स डॅशबोर्ड बनवत असाल, तर तुम्हाला रिअॅक्टिव्ह फ्रेमवर्क हवे असते. त्या स्टेटवर ब्राउझरचे नियंत्रण असावे. वापरकर्त्याने चार्ट ड्रॅग केल्यावर किंवा फिल्टर ग्रुप टॉगल केल्यावर प्रत्येक वेळी सर्व्हरकडे जाणे तुम्हाला नको असते. Vue चे कंपोनंट मॉडेल, रिॲक्टिव्हिटी सिस्टम आणि इकोसिस्टम नेमके याच कामासाठी बनवलेली आहे.
हे अत्यंत इंटरअॅक्टिव्ह कन्झ्युमर ॲप्लिकेशन्ससाठी देखील लागू होते. डिझाइन टूल, कोलॅबोरेटिव्ह व्हाईटबोर्ड किंवा म्युझिक सिक्वेन्सरचा विचार करा. हे केवळ बटणे असलेले दस्तऐवज नाहीत. ते ब्राउझरमध्ये चालणारे ॲप्लिकेशन्स आहेत. त्या कामासाठी, Vue अजूनही माझी पहिली पसंती आहे.
जिथे HTMX कमान हाती घेते
सर्वात स्पष्ट फायदा तेव्हा झाला जेव्हा मी माझ्या प्रकल्पांमधील कंटाळवाण्या भागांकडे पाहिले. ॲडमिन पॅनेलमध्ये सर्वात आधी बदल झाले. ॲडमिन बॅकएंडला सहसा रेकॉर्ड्सचे टेबल, काही ॲक्शन बटणे, पेजिनेटेड फिल्टर्स आणि एक-दोन फॉर्म्सची गरज असते. यापैकी कशासाठीही व्हर्च्युअल DOM ची गरज नसते. त्याला फक्त जलद पार्शिअल अपडेट्सची गरज असते.
HTMX सह, डिलीट बटण hx-delete आणि hx-target ॲट्रिब्युट्ससह एक टॅग बनते. त्यावर क्लिक केल्यावर, ब्राउझर विनंती पाठवतो आणि सर्व्हर रिफ्रेश केलेल्या टेबल रोसह प्रतिसाद देतो.