Usavo Vue.js per riflesso. Ogni progetto iniziava nello stesso modo: installazione della CLI, configurazione del router, impostazione dello store e creazione di una shell di single-page application. Non importava se stavo costruendo una dashboard in tempo reale o un semplice modulo di contatto. Vue era il mio predefinito, e davo per scontato che qualsiasi cosa più leggera fosse un passo indietro.
Questa abitudine è comune. Se hai trascorso anni nell'ecosistema di React o Vue, il modello SPA inizia a sembrare inevitabile. Smetti di chiederti se tu abbia effettivamente bisogno di tutta quella strumentazione. Ti limiti a usarla. Con il tempo, ho notato qualcosa di preoccupante. Stavo configurando store Vuex per schermate di amministrazione che dovevano solo cambiare uno stato e aggiornare una tabella. Stavo scrivendo logiche di fetch per landing page che dovevano solo inviare un indirizzo email. La complessità non derivava dai problemi. Derivava dalla mia scelta dello strumento.
Poi ho iniziato a usare HTMX. Il cambiamento è stato più silenzioso di quanto mi aspettassi, ma ha cambiato il modo in cui scelgo il mio stack.
Cosa fa realmente HTMX
La maggior parte delle discussioni online sbaglia questo punto. Le persone lo inquadrano come una battaglia tra Vue contro React contro HTMX. Questo confronto manca completamente il punto. HTMX non è un framework SPA. Non vuole sostituire Vue. È una libreria che permette all'HTML di fare più di quanto il browser offra di default.
Invece di scrivere un componente che viene montato, recupera dati JSON, li analizza in uno stato locale e ri-renderizza una lista, aggiungi un attributo a un pulsante. Il server restituisce frammenti HTML, non payload di dati. Il browser sostituisce il contenuto al suo posto. Stai ancora lavorando con pagine renderizzate sul server, ma ottieni l'interattività che le persone solitamente associano ai pesanti front end in JavaScript.
Questo non è un declassamento. È un modello diverso. Vue ti chiede di costruire un'applicazione client-side e gestire lo stato nel browser. HTMX ti chiede di mantenere lo stato sul server e inviare HTML sulla rete. Poiché risolvono tipi diversi di problemi, entrambi possono coesistere nello stesso progetto senza conflitti.
Quando Vue è ancora la scelta giusta
Le interfacce complesse hanno bisogno di Vue. Se stai costruendo una dashboard di analisi in tempo reale con widget drag-and-drop, filtri annidati e grafici live che condividono dati tra più viste, hai bisogno di un framework reattivo. Il browser deve gestire quello stato. Non vuoi fare un'andata e ritorno al server ogni volta che un utente trascina un grafico o attiva un gruppo di filtri. Il modello a componenti di Vue, il sistema di reattività e il suo ecosistema sono costruiti esattamente per questo.
Lo stesso vale per le applicazioni consumer altamente interattive. Pensa a uno strumento di design, una lavagna collaborativa o un sequencer musicale. Questi non sono documenti con dei pulsanti. Sono applicazioni che vivono nel browser. Per quel tipo di lavoro, Vue è ancora la mia prima scelta.
Dove HTMX prende il sopravvento
La vittoria più evidente è arrivata quando ho guardato le parti noiose dei miei progetti. I pannelli di amministrazione sono stati i primi a cambiare. Un backend amministrativo solitamente richiede una tabella di record, alcuni pulsanti di azione, filtri paginati e uno o due moduli. Nulla di tutto ciò ha bisogno di un virtual DOM. Ciò di cui ha bisogno sono aggiornamenti parziali rapidi.
Con HTMX, un pulsante di eliminazione diventa un tag con gli attributi hx-delete e hx-target. Cliccandolo, il browser invia la richiesta e il server risponde con una riga di tabella aggiornata.