இயல்பாகவே நான் Vue.js-ஐத் தேர்ந்தெடுப்பேன். ஒவ்வொரு திட்டமும் ஒரே மாதிரியாகத் தொடங்கும்: CLI-ஐ நிறுவுதல், router-ஐ அமைத்தல், store-ஐ உள்ளமைத்தல் மற்றும் அனைத்தையும் ஒரு single-page application shell-க்குள் கொண்டு வருதல். நான் ஒரு real-time dashboard அல்லது ஒரு எளிய contact form-ஐ உருவாக்கினாலும் அது முக்கியமல்ல. Vue தான் எனது இயல்புநிலை (default), மற்றும் அதைவிட லேசான (lighter) எதற்கும் ஒரு படி பின்னோக்கிச் செல்வதாகவே நான் கருதினேன்.

இந்த பழக்கம் பொதுவானது. நீங்கள் React அல்லது Vue ecosystem-க்குள் பல ஆண்டுகள் செலவிட்டிருந்தால், SPA மாதிரி தவிர்க்க முடியாதது என்று தோன்றத் தொடங்கும். உங்களுக்கு உண்மையில் அவ்வளவு பெரிய கட்டமைப்புகள் (machinery) தேவையா என்று நீங்கள் கேட்பதை நிறுத்திவிடுவீர்கள். நீங்கள் அதை அப்படியே பயன்படுத்தத் தொடங்குவீர்கள். காலப்போக்கில், நான் ஒரு கவலையளிக்கும் விஷயத்தைக் கவனித்தேன். ஒரு நிலையை (status) மாற்றி ஒரு அட்டவணையை (table) புதுப்பிப்பது மட்டுமே தேவைப்படும் admin screens-களுக்காக நான் Vuex stores-களை இணைத்துக் கொண்டிருந்தேன். ஒரு மின்னஞ்சல் முகவரியை சமர்ப்பிப்பது மட்டுமே தேவைப்படும் landing pages-களுக்காக நான் fetch logic-களை உருவாக்கிக் கொண்டிருந்தேன். சிக்கல் பிரச்சனைகளில் இருந்து வரவில்லை. அது எனது கருவியைத் தேர்ந்தெடுப்பதில் இருந்து வந்தது.

பின்னர் நான் HTMX-ஐப் பயன்படுத்தத் தொடங்கினேன். இந்த மாற்றம் நான் எதிர்பார்த்ததை விட அமைதியாக நடந்தது, ஆனால் நான் எனது stack-ஐத் தேர்ந்தெடுக்கும் முறையை அது மாற்றியது.

HTMX உண்மையில் என்ன செய்கிறது

பெரும்பாலான ஆன்லைன் விவாதங்கள் இதைத் தவறாகப் புரிந்துகொள்கின்றன. மக்கள் இதை Vue vs React vs HTMX என்ற போராகக் கருதுகிறார்கள். அந்த ஒப்பீடு நோக்கத்தையே முற்றிலும் தவறவிடுகிறது. HTMX என்பது ஒரு SPA framework அல்ல. அது Vue-க்கு மாற்றாக வர விரும்பவில்லை. உலாவிகள் (browsers) இயல்பாக வழங்கும் திறனை விட HTML-ஐ அதிக வேலை செய்ய வைக்கும் ஒரு library இது.

ஒரு component-ஐ உருவாக்கி, அதில் JSON-ஐ fetch செய்து, அதை local state-ஆக மாற்றி, ஒரு பட்டியலை (list) மீண்டும் render செய்வதற்குப் பதிலாக, நீங்கள் ஒரு button-இல் ஒரு attribute-ஐச் சேர்க்கிறீர்கள். சர்வர் தரவுப் பொதிகளை (payloads) அனுப்பாமல், HTML துண்டுகளை (fragments) திருப்பி அனுப்புகிறது. உலாவியானது அந்த உள்ளடக்கத்தை உரிய இடத்தில் மாற்றுகிறது (swaps). நீங்கள் இன்னும் server-rendered பக்கங்களிலேயே வேலை செய்கிறீர்கள், ஆனால் வழக்கமாக கனமான JavaScript front ends-களுடன் மக்கள் தொடர்பு கொள்ளும் அந்தத் தன்மையை (interactivity) நீங்கள் பெறுகிறீர்கள்.

இது ஒரு தரக்குறைவு அல்ல. இது ஒரு வேறுபட்ட மாதிரி. Vue உங்களை ஒரு client-side application-ஐ உருவாக்கவும், உலாவியில் state-ஐ நிர்வகிக்கவும் கேட்கிறது. HTMX state-ஐ சர்வரிலேயே வைத்திருக்கவும், HTML-ஐ அனுப்பவும் கேட்கிறது. அவை வெவ்வேறு வகையான பிரச்சனைகளைத் தீர்ப்பதால், இரண்டும் எந்த மோதலும் இன்றி ஒரே திட்டத்தில் இணைந்து செயல்பட முடியும்.

Vue எப்போது சரியான தேர்வாக இருக்கும்

சிக்கலான இடைமுகங்களுக்கு (interfaces) Vue தேவைப்படுகிறது. நீங்கள் drag-and-drop widgets, nested filtering மற்றும் பல காட்சிகளில் (views) தரவைப் பகிரும் live charts கொண்ட ஒரு real-time analytics dashboard-ஐ உருவாக்குகிறீர்கள் என்றால், உங்களுக்கு ஒரு reactive framework தேவைப்படும். அந்த state-ஐ உலாவியே கையாள வேண்டும். ஒரு பயனர் ஒரு chart-ஐ இழுக்கும்போதோ அல்லது ஒரு filter group-ஐ மாற்றும்போதோ ஒவ்வொரு முறையும் சர்வரிற்குச் சென்று வர (round-trip) நீங்கள் விரும்ப மாட்டீர்கள். Vue-இன் component model, reactivity system மற்றும் ecosystem ஆகியவை இதற்காகவே உருவாக்கப்பட்டுள்ளன.

அதே விஷயம் அதிகத் தொடர்புத் தன்மை கொண்ட (highly interactive) நுகர்வோர் பயன்பாடுகளுக்கும் பொருந்தும். ஒரு design tool, ஒரு collaborative whiteboard அல்லது ஒரு music sequencer-ஐப் பற்றி யோசித்துப் பாருங்கள். இவை வெறும் பட்டன்கள் கொண்ட ஆவணங்கள் அல்ல. இவை உலாவியில் இயங்கும் பயன்பாடுகள் (applications). அந்த வேலைகளுக்கு, Vue இப்போதும் எனது முதல் தேர்வாகும்.

HTMX எங்கே ஆதிக்கம் செலுத்துகிறது

எனது திட்டங்களின் சலிப்பூட்டும் பகுதிகளைப் பார்த்தபோது மிகத் தெளிவான வெற்றி கிடைத்தது. Admin panels தான் முதலில் மாறின. ஒரு admin backend-க்கு பொதுவாக ஒரு அட்டவணை, சில action buttons, paginated filters மற்றும் ஒன்று அல்லது இரண்டு forms தேவைப்படும். இவற்றில் எதற்கும் virtual DOM தேவையில்லை. அதற்குத் தேவை விரைவான partial updates மட்டுமே.

HTMX மூலம், ஒரு delete button என்பது hx-delete மற்றும் hx-target attributes கொண்ட ஒரு tag ஆக மாறுகிறது. அதை கிளிக் செய்தவுடன், உலாவியானது கோரிக்கையை (request) அனுப்புகிறது, சர்வர் புதுப்பிக்கப்பட்ட ஒரு table row-வுடன் பதிலளிக்கிறது.