htmx 4.0: tutte le novità di "The Fetch()ening"

Quando Carson Gross, Senior Software Engineer del progetto, aveva dichiarato che "non ci sarebbe mai stata una versione 3 di htmx", molti avevano pensato che esso avesse raggiunto la sua piena maturità. Eppure, come spesso accade nel mondo dello sviluppo, niente è veramente "definitivo". Nasce così htmx 4.0, ribattezzato ironicamente The Fetch()ening. Più che una semplice major release, questa versione rappresenta una ristrutturazione interna radicale che punta a sfruttare nel miglior modo possibile le API asincrone di JavaScript.

Addio ad XMLHttpRequest, htmx 4.0 sceglie fetch()

Il cambiamento più importante di htmx 4.0 è di certo l'abbandono definitivo di XMLHttpRequest, considerato ormai un residuo dei tempi di Internet Explorer. Tutta la logica AJAX viene ora costruita su fetch() e offre un'architettura asincrona più chiara e, soprattutto, nativa.

<button hx-post="/api/vote" hx-target="#result" hx-swap="innerHTML">
  Vota
</button>
<div id="result">In attesa...</div>

Per la maggior parte degli sviluppatori, questo cambiamento, anche se a suo modo radicale, sarà del tutto trasparente. Il modello di eventi subirà però alcune modifiche a causa delle differenze, comunque esistenti, tra fetch() e XMLHttpRequest. In cambio, si ottiene un sistema più coerente e lineare, con eventi asincroni ordinati e persino più facili da debuggare.

Fine dell'eredità implicita. Tutto in htmx diventa esplicito con :inherited

Uno dei punti più controversi delle versioni precedenti era l'eredità implicita degli attributi. Una scelta spirato al modello di CSS che nel tempo si sarebbe rivelata sì potente ma, per stessa ammissione di Carson, frustrante. Con htmx 4.0 l'eredità diventa invece esplicita tramite il modificatore :inherited:

<div hx-target:inherited="#output">
  <button hx-post="/up">Like</button>
  <button hx-post="/down">Dislike</button>
</div>
<output id="output">Scegli un'opzione...</output>

In assenza del modificatore gli elementi interni non erediteranno automaticamente il target. Si tratta di una piccola modifica sintattica che introduce una maggiore chiarezza livello semantico e riduce gli errori che derivano dai comportamento inattesi.

Cronologia e cache

Un altro tema controverso riguardava la gestione della cronologia. Le versioni precedenti di htmx mantenevano infatti delle copie del DOM nella cache locale, con tutti i rischi di sincronizzazione, stato e sicurezza che ciò poteva comportare. Con htmx 4.0, invece, ogni volta che l'utente naviga nella cronologia viene emessa una nuova richiesta di rete.

Chi preferisce il comportamento precedente potrà riattivarlo tramite un'estensione opzionale ma, per impostazione predefinita, htmx privilegerà la stabilità rispetto alla velocità "percepita" (non quella effettiva).

Stream, morph e partials

La migrazione a fetch() apre ora la strada all'implementazione di alcune nuove feature. Vediamo quali.

Streaming e Server-Sent Events

Grazie al supporto per i Readable Streams è ora possibile effettuare lo streaming di contenuti incrementali nel DOM. Ciò semplifica le sessioni di lavoro in cui si desidera aggiornare progressivamente la pagina mentre il server elabora i dati integrando nativamente anche gli Streaming e Server-Sent Events. O, per brevità, SSE:

<div hx-get="/stream" hx-trigger="load" hx-swap="outerHTML">
  Caricamento in corso...
</div>

Morphing Swap in Core

Il motore di morphing del DOM basato su idiomorph entra ufficialmente nel core. Questa funzionalità consente di aggiornare in modo più intelligente solo le porzioni modificate del DOM stesso. Si ha quindi un miglioramento nelle performance e aumenta la fluidità delle transizioni rispetto ad un semplice replace.

Il nuovo tag partial

Una delle novità più "eleganti" di htmx 4.0 è l'introduzione del tag <partial> che è stato pensato per sostituire i vecchi e complessi swaps out-of-band con cui aggiornare più parti di una pagina senza doverla ricaricare ogni volta..

<partial hx-swap="innerHTML" hx-target="#sidebar">
  <ul>
    <li>Elemento aggiornato</li>
  </ul>
</partial>

Il nuovo elemento semplifica notevolmente la gestione dei frammenti parziali di HTML e si integra in modo molto naturale con il modello di streaming adottato.

Transizioni, eventi e API

Data l'adozione sempre più diffusa delle API View Transitions, htmx 4 prevede ora un sistema di coda per garantire delle transizioni sequenziali più fluide ed evitare i glitch o le interruzioni improvvise.

Gli eventi asincroni diventano poi più chiari. Infatti l'uso estensivo di async/await consente una gestione prevedibile degli eventi, con una nuova convenzione di naming strutturata in questo modo:

htmx:<fase>:<sistema>[:<azione>]

Ad esempio:

htmx:before:request o htmx:after:swap.

Gli eventi inline diventano infine più coerenti grazie a una sintassi unificata e al miglior supporto per gli attributi hx-on con cui embeddare script inline per rispondere direttamente agli eventi su un elemento:

<button hx-post="/like"
        hx-on:htmx:after:swap="await timeout('3s'); ctx.newContent[0].remove()">
  Like temporaneo
</button>

In questo modo si possono inserire dei piccoli script asincroni direttamente nel markup eval()

Da segnalare anche che il nuovo runtime asincrono offre delle API più aperte agli sviluppatori di estensioni. Si potranno intercettare e persino sostituire le chiamate fetch() interne. Ciò a favore dei preload asincroni e della gestione personalizzata delle risposte.

Compatibilità, migrazione, roadmap e disponibilità di htmx 4

Nonostante la portata dei cambiamenti apportati in questo rilascio, htmx 4 è stato sviluppato per garantire continuità con le release precedenti. La maggior parte dei progetti basati sul ramo 2.x potrà funzionare quasi senza modifiche, salvo l'aggiunta del modificatore :inherited. Per chi preferisce continuare ad utilizzare htmx 2.0 esso sarà supportato a tempo indefinito, come le release precedenti.

htmx 4.0.0-alpha1 è già disponibile mentre il rilascio sotto forma di stabile è previsto per tra l'inizio e la metà del 2026. La versione 4.0 diventerà poi latest solo nel 2027. Chi desidera seguirne lo sviluppo può farlo sul ramo "four" del repository GitHub o sul nuovo sito web dedicato.

Conclusione

Con il rilascio di The Fetch()ening htmx entra in una nuova fase caratterizzata da meno "magie", più trasparenza, un core più snello e un'apertura maggiore agli sviluppatori di estensioni.
Il progetto, come sottolineato dallo stesso Gross, rimarrà in ogni caso dichiarativo, accessibile e progressivamente migliorabile indipendentemente dalle versioni rilasciate.