ഞാൻ ഒരു ശീലമായി Vue.js ഉപയോഗിച്ചിരുന്നു. എല്ലാ പ്രോജക്റ്റുകളും ഒരേ രീതിയിലാണ് തുടങ്ങാറുള്ളത്: CLI ഇൻസ്റ്റാൾ ചെയ്യുക, റൂട്ടർ സെറ്റ് ചെയ്യുക, സ്റ്റോർ കോൺഫിഗർ ചെയ്യുക, എന്നിട്ട് ഇതിനെല്ലാം കൂടി ഒരു single-page application shell നൽകുക. ഞാൻ ഒരു real-time dashboard ആണോ അതോ ഒരു ലളിതമായ contact form ആണോ നിർമ്മിക്കുന്നത് എന്നത് പ്രശ്നമല്ലായിരുന്നു. Vue ആയിരുന്നു എന്റെ ഡിഫോൾട്ട്, അതിനേക്കാൾ ലളിതമായ മറ്റെന്തെങ്കിലും ഉപയോഗിക്കുന്നത് ഒരു പിന്നോട്ടടവാണ് എന്ന് ഞാൻ കരുതിയിരുന്നു.
ഈ ശീലം സാധാരണമാണ്. നിങ്ങൾ വർഷങ്ങളോളം React അല്ലെങ്കിൽ Vue ഇക്കോസിസ്റ്റത്തിൽ ചെലവഴിച്ചിട്ടുണ്ടെങ്കിൽ, SPA മോഡൽ അനിവാര്യമാണെന്ന് തോന്നിത്തുടങ്ങും. അത്രയധികം സംവിധാനങ്ങൾ ശരിക്കും ആവശ്യമുണ്ടോ എന്ന് നിങ്ങൾ ചോദിക്കാറില്ല. നിങ്ങൾ അത് ഉപയോഗിക്കാൻ തുടങ്ങുന്നു. കാലക്രമേണ, ആശങ്കാജനകമായ ഒരു കാര്യം ഞാൻ ശ്രദ്ധിച്ചു. ഒരു സ്റ്റാറ്റസ് മാറ്റാനും ഒരു ടേബിൾ റിഫ്രഷ് ചെയ്യാനും മാത്രം ആവശ്യമുള്ള അഡ്മിൻ സ്ക്രീനുകൾക്കായി ഞാൻ Vuex സ്റ്റോറുകൾ തയ്യാറാക്കുന്നുണ്ടായിരുന്നു. വെറുമൊരു ഇമെയിൽ അഡ്രസ് സബ്മിറ്റ് ചെയ്യാൻ മാത്രം ആവശ്യമുള്ള ലാൻഡിംഗ് പേജുകൾക്കായി ഞാൻ fetch ലോജിക് തയ്യാറാക്കുന്നുണ്ടായിരുന്നു. സങ്കീർണ്ണത വരുന്നത് പ്രശ്നങ്ങളിൽ നിന്നല്ല, മറിച്ച് ഞാൻ തിരഞ്ഞെടുത്ത ടൂളിൽ നിന്നാണ്.
പിന്നീട് ഞാൻ HTMX ഉപയോഗിക്കാൻ തുടങ്ങി. ഞാൻ പ്രതീക്ഷിച്ചതിനേക്കാൾ ശാന്തമായിരുന്നു ആ മാറ്റം, പക്ഷേ അത് എന്റെ സ്റ്റാക്ക് തിരഞ്ഞെടുക്കുന്ന രീതി തന്നെ മാറ്റിമറിച്ചു.
എന്താണ് യഥാർത്ഥത്തിൽ HTMX ചെയ്യുന്നത്
മിക്ക ഓൺലൈൻ ചർച്ചകളും ഇതിനെ തെറ്റായിട്ടാണ് കാണുന്നത്. ആളുകൾ ഇതിനെ Vue versus React versus HTMX എന്നൊരു പോരാട്ടമായിട്ടാണ് അവതരിപ്പിക്കുന്നത്. ആ താരതമ്യം അതിന്റെ ലക്ഷ്യം പൂർണ്ണമായും വിട്ടുപോകുന്നു. HTMX ഒരു SPA framework അല്ല. അത് Vue-യെ മാറ്റിസ്ഥാപിക്കാൻ ആഗ്രഹിക്കുന്നില്ല. ബ്രൗസർ നൽകുന്നതിനേക്കാൾ കൂടുതൽ കാര്യങ്ങൾ HTML ചെയ്യാൻ സഹായിക്കുന്ന ഒരു ലൈബ്രറിയാണിത്.
ഒരു കമ്പോണന്റ് എഴുതി, അത് മൗണ്ട് ചെയ്യുക, JSON ഫെച്ച് ചെയ്യുക, അത് ലോക്കൽ സ്റ്റേറ്റിലേക്ക് മാറ്റുക, എന്നിട്ട് ഒരു ലിസ്റ്റ് വീണ്ടും റെൻഡർ ചെയ്യുക എന്നതിന് പകരം, നിങ്ങൾ ഒരു ബട്ടണിൽ ഒരു അറ്റ്രിബ്യൂട്ട് ചേർക്കുന്നു. ഡാറ്റയുടെ പാക്കേജുകൾക്ക് പകരം സെർവർ HTML ഫ്രാഗ്മെന്റുകൾ തിരികെ നൽകുന്നു. ബ്രൗസർ ആ ഉള്ളടക്കം കൃത്യമായ സ്ഥാനത്ത് മാറ്റിവെക്കുന്നു. നിങ്ങൾ ഇപ്പോഴും സെർവർ റെൻഡർ ചെയ്ത പേജുകളുമായാണ് പ്രവർത്തിക്കുന്നത്, എന്നാൽ സാധാരണയായി വലിയ JavaScript ഫ്രണ്ട് എൻഡുകൾക്കൊപ്പം മാത്രം കാണാറുള്ള ഇന്ററാക്റ്റിവിറ്റി നിങ്ങൾക്ക് ഇതിലൂടെ ലഭിക്കുന്നു.
ഇതൊരു പിന്നോട്ടടവല്ല. ഇതൊരു വ്യത്യസ്ത മോഡലാണ്. ഒരു ക്ലയന്റ് സൈഡ് ആപ്ലിക്കേഷൻ നിർമ്മിക്കാനും ബ്രൗസറിൽ സ്റ്റേറ്റ് മാനേജ് ചെയ്യാനും Vue നിങ്ങളോട് ആവശ്യപ്പെടുന്നു. എന്നാൽ സ്റ്റേറ്റ് സെർവറിൽ നിലനിർത്താനും HTML അയച്ചുനൽകാനും HTMX നിങ്ങളോട് ആവശ്യപ്പെടുന്നു. അവ വ്യത്യസ്ത തരത്തിലുള്ള പ്രശ്നങ്ങളാണ് പരിഹരിക്കുന്നത് എന്നതുകൊണ്ട്, ഒരേ പ്രോജക്റ്റിൽ തന്നെ തർക്കങ്ങളില്ലാതെ ഇവ രണ്ടും ഉപയോഗിക്കാം.
Vue എപ്പോഴാണ് ഇപ്പോഴും ശരിയായ തിരഞ്ഞെടുപ്പ്
സങ്കീർണ്ണമായ ഇന്റർഫേസുകൾക്ക് Vue ആവശ്യമാണ്. ഡ്രാഗ് ആൻഡ് ഡ്രോപ്പ് വിഡ്ജറ്റുകൾ, നെസ്റ്റഡ് ഫിൽട്ടറിംഗ്, ഒന്നിലധികം വ്യൂകളിലായി ഡാറ്റ പങ്കിടുന്ന ലൈവ് ചാർട്ടുകൾ എന്നിവയുള്ള ഒരു real-time analytics dashboard ആണ് നിങ്ങൾ നിർമ്മിക്കുന്നതെങ്കിൽ, നിങ്ങൾക്ക് ഒരു റിയാക്റ്റീവ് ഫ്രെയിംവർക്ക് ആവശ്യമാണ്. ആ സ്റ്റേറ്റ് ബ്രൗസറിൽ തന്നെയായിരിക്കണം. ഒരു ഉപയോക്താവ് ഒരു ചാർട്ട് ഡ്രാഗ് ചെയ്യുമ്പോഴോ ഒരു ഫിൽട്ടർ ഗ്രൂപ്പ് മാറ്റുമ്പോഴോ ഓരോ തവണയും സെർവറിലേക്ക് റിക്വസ്റ്റ് അയക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കില്ല. Vue-യുടെ കമ്പോണന്റ് മോഡലും റിയാക്റ്റിവിറ്റി സിസ്റ്റവും ഇക്കോസിസ്റ്റവും കൃത്യമായി നിർമ്മിച്ചിരിക്കുന്നത് ഇതിനുവേണ്ടിയാണ്.
ഉയർന്ന ഇന്ററാക്റ്റിവിറ്റി ആവശ്യമുള്ള കൺസ്യൂമർ ആപ്ലിക്കേഷനുകളുടെ കാര്യവും ഇതുതന്നെയാണ്. ഒരു ഡിസൈൻ ടൂൾ, ഒരു കൊളാബറേറ്റീവ് വൈറ്റ്ബോർഡ്, അല്ലെങ്കിൽ ഒരു മ്യൂസിക് സീക്വൻസർ എന്നിവയെക്കുറിച്ച് ചിന്തിക്കുക. ഇവ വെറുമൊരു ബട്ടണുകളുള്ള ഡോക്യുമെന്റുകളല്ല. ഇവ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്ന ആപ്ലിക്കേഷനുകളാണ്. അത്തരം ജോലികൾക്കായി Vue ഇപ്പോഴും എന്റെ ആദ്യ തിരഞ്ഞെടുപ്പാണ്.
HTMX എവിടെയാണ് മുൻതൂക്കം നേടുന്നത്
എന്റെ പ്രോജക്റ്റുകളിലെ വിരസമായ ഭാഗങ്ങൾ പരിശോധിച്ചപ്പോഴാണ് ഇതിന്റെ ഗുണം ഏറ്റവും വ്യക്തമായി മനസ്സിലായത്. അഡ്മിൻ പാനലുകളാണ് ആദ്യം മാറിയത്. ഒരു അഡ്മിൻ ബാക്കെൻഡിന് സാധാരണയായി റെക്കോർഡുകളുടെ ഒരു ടേബിൾ, കുറച്ച് ആക്ഷൻ ബട്ടണുകൾ, പേജിനേറ്റഡ് ഫിൽട്ടറുകൾ, ഒരു ഫോമോ രണ്ടോ എന്നിവ ആവശ്യമാണ്. ഇതിൽ ഒന്നിനും ഒരു virtual DOM ആവശ്യമില്ല. അതിന് വേണ്ടത് വേഗത്തിലുള്ള പാർഷ്യൽ അപ്ഡേറ്റുകളാണ്.
HTMX ഉപയോഗിക്കുമ്പോൾ, ഒരു ഡിലീറ്റ് ബട്ടൺ hx-delete, hx-target എന്നീ അറ്റ്രിബ്യൂട്ടുകളുള്ള ഒരു ടാഗായി മാറുന്നു. അതിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ, ബ്രൗസർ റിക്വസ്റ്റ് അയക്കുന്നു, സെർവർ പുതുക്കിയ ഒരു ടേബിൾ റോ തിരികെ നൽകുന്നു.