నేను అలవాటు ప్రకారం Vue.jsనే ఎంచుకునేవాడిని. ప్రతి ప్రాజెక్ట్ ఒకేలా మొదలయ్యేది: CLI ఇన్స్టాల్ చేయడం, router సెటప్ చేయడం, store కాన్ఫిగర్ చేయడం మరియు మొత్తం దానిని ఒక single-page application shell లో చుట్టడం. నేను ఒక real-time dashboard నిర్మిస్తున్నానా లేదా ఒక సాధారణ contact form నిర్మిస్తున్నానా అన్నది ముఖ్యం కాదు. Vue నా డిఫాల్ట్, మరియు అంతకంటే తేలికైనది ఏదైనా వాడటం వెనకడుగు అని నేను అనుకున్నాను.
ఈ అలవాటు చాలా సాధారణం. మీరు సంవత్సరాల తరబడి React లేదా Vue ecosystem లో గడిపితే, SPA మోడల్ అనివార్యంగా అనిపిస్తుంది. మీకు అంత మెషినరీ నిజంగా అవసరమా అని మీరు అడగడం మానేస్తారు. మీరు దానిని నేరుగా వాడుకుంటారు. కాలక్రమేణా, నేను ఒక ఆందోళనకరమైన విషయాన్ని గమనించాను. కేవలం ఒక status ని మార్చడానికి మరియు ఒక table ని refresh చేయడానికి మాత్రమే అవసరమైన admin screens కోసం నేను Vuex stores ని వాడుతున్నాను. కేవలం ఒక email address ని submit చేయడానికి మాత్రమే అవసరమైన landing pages కోసం fetch logic ని రాస్తున్నాను. సమస్యల వల్ల సంక్లిష్టత (complexity) రావడం లేదు. అది నేను ఎంచుకున్న టూల్ వల్ల వస్తోంది.
అప్పుడు నేను HTMX వాడటం ప్రారంభించాను. ఈ మార్పు నేను ఊహించిన దానికంటే నిశ్శబ్దంగా జరిగింది, కానీ నా stack ఎంపికను మార్చేసింది.
HTMX నిజంగా ఏం చేస్తుంది
చాలా ఆన్లైన్ చర్చలు దీనిని తప్పుగా అర్థం చేసుకుంటున్నాయి. ప్రజలు దీనిని Vue వర్సెస్ React వర్సెస్ HTMX అనే పోరాటంగా చూస్తారు. ఆ పోలిక అసలు ఉద్దేశాన్ని పూర్తిగా విస్మరిస్తుంది. HTMX అనేది SPA framework కాదు. ఇది Vue ని భర్తీ చేయాలని కోరుకోవడం లేదు. బ్రౌజర్ ద్వారా లభించే దానికంటే ఎక్కువ HTML చేయగలిగేలా చేసే ఒక library ఇది.
ఒక component ని రాసి, అది mount అయ్యి, JSON ని fetch చేసి, దానిని local state లోకి parse చేసి, ఒక list ని re-render చేసే బదులు, మీరు ఒక button కి ఒక attribute ని జోడిస్తారు. సర్వర్ HTML fragments ని తిరిగి పంపుతుంది, డేటా payloads ని కాదు. బ్రౌజర్ ఆ కంటెంట్ను ఉన్న చోట మార్చేస్తుంది. మీరు ఇంకా server-rendered pages తోనే పనిచేస్తున్నారు, కానీ సాధారణంగా భారీ JavaScript front ends తో అనుబంధించబడిన interactivity ని మీరు పొందవచ్చు.
ఇది ఒక downgrade కాదు. ఇది ఒక భిన్నమైన మోడల్. Vue అనేది క్లయింట్-సైడ్ 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 ని drag చేసిన ప్రతిసారీ లేదా ఒక filter group ని toggle చేసిన ప్రతిసారీ మీరు సర్వర్కి రిక్వెస్ట్ పంపాల్సిన అవసరం ఉండకూడదు. Vue యొక్క component model, reactivity system, మరియు ecosystem సరిగ్గా దీని కోసమే నిర్మించబడ్డాయి.
అత్యంత interactive గా ఉండే consumer applications విషయానికి వస్తే కూడా ఇదే వర్తిస్తుంది. ఒక design tool, collaborative whiteboard, లేదా music sequencer గురించి ఆలోచించండి. ఇవి కేవలం బటన్లు ఉన్న documents మాత్రమే కాదు. ఇవి బ్రౌజర్లో నడిచే applications. అటువంటి పనుల కోసం, Vue ఇప్పటికీ నా మొదటి ఎంపిక.
HTMX ఎక్కడ రంగంలోకి దిగుతుంది
నా ప్రాజెక్ట్లలోని బోరింగ్ భాగాలను నేను గమనించినప్పుడు స్పష్టమైన విజయం కనిపించింది. Admin panels మొదటగా మారాయి. ఒక admin backend కి సాధారణంగా records ఉన్న ఒక table, కొన్ని action buttons, paginated filters, మరియు ఒకటి లేదా రెండు forms అవసరమవుతాయి. వీటన్నిటికీ virtual DOM అవసరం లేదు. దానికి కావాల్సింది వేగవంతమైన partial updates మాత్రమే.
HTMX తో, ఒక delete button అనేది hx-delete మరియు hx-target attributes ఉన్న ఒక tag గా మారుతుంది. దానిని క్లిక్ చేయగానే, బ్రౌజర్ రిక్వెస్ట్ పంపుతుంది, సర్వర్ రిఫ్రెష్ చేయబడిన table row తో స్పందిస్తుంది.