Rilasciato di recente, htmx 4.0.0 rappresenta un passaggio importante per la libreria JavaScript che ha fatto del paradigma HTML-first uno dei suoi punti di forza. Dopo parecchi mesi di sviluppo, la nuova versione porta con sé diversi cambiamenti a livello di architettura e nuove funzionalità. Mantiene però quasi del tutto invariato il modo in cui gli sviluppatori utilizzano htmx.
Forse, l'aspetto più rilevante dell'aggiornamento riguarda il fatto che quest'ultimo abbandona XMLHttpRequest in favore della moderna Fetch API. Per la maggior parte delle applicazioni di tratta di un cambiamento trasparente, del tutto indolore, ma la nuova architettura rende più semplice implementare delle funzionalità avanzate, in particolare quelle legate allo streaming e alle estensioni.
Ereditarietà degli attributi in htmx 4.0.0
La modifica che richiederà più attenzione nel corso di una migrazione dalla versione precedente di htmx riguarda l'ereditarietà degli attributi. In htmx 2 alcuni attributi applicati a un elemento padre venivano automaticamente ereditati dai figli. In htmx 4 questo comportamento non è più implicito, deve essere infatti dichiarato esplicitamente utilizzando :inherited.
Per esempio, il codice:
<div hx-confirm="Sei sicuro?">
<button hx-delete="/item/1">Elimina</button>
</div>con la nuova impostazione diventa:
<div hx-confirm:inherited="Sei sicuro?">
<button hx-delete="/item/1">Elimina</button>
</div>Questa particolare scelta rende il comportamento del DOM molto più prevedibile e riduce gli "effetti collaterali" nei progetti più complessi e articolati. Per facilitare il passaggio è disponibile anche un upgrade checker che individua automaticamente molte delle modifiche eventualmente necessarie.
Gestione degli eventi JavaScript
Anche il sistema degli eventi è stato ripulito. I nomi seguono ora una convenzione uniforme sul modello della seguente sintassi:
htmx:phase:action[:sub-action]Così, per esempio, htmx:beforeRequest diventa htmx:before:request e htmx:afterSwap diventa htmx:after:swap.
Sono stati poi rimossi gli eventi htmx:xhr:*, ormai del tutto privi di senso dopo il passaggio a fetch(). Nello stesso modo scopriamo che con l'ultimo aggiornamento sono stati semplificati diversi eventi di errore. Per chi utilizza molto di frequente gli eventi htmx da JavaScript si tratta quindi di un aspetto da verificare durante la fase di upgrade alla release più recente.
Supporto nativo ai morphing swap
Una delle funzionalità più interessanti di htmx 4 riguarda il supporto nativo ai morphing swap. Normalmente un aggiornamento di htmx sostituisce il contenuto di un elemento con quello che viene restituito dal server. Il morphing permette invece di confrontare vecchio e nuovo DOM e di aggiornare soltanto ciò che è necessario. Niente di più.
Il risultato è particolarmente utile per le interfacce dinamiche nelle quali è necessario preservare pere quanto possibile lo stato degli elementi già presenti nella pagina.
Il nuovo elemento hx-partial
Un'altra novità è il nuovo elemento hx-partial pensato per gestire in modo più leggibile le risposte che devono aggiornare più parti della pagina.
<hx-partial hx-target="#messages" hx-swap="beforeend">
<div>Nuovo messaggio</div>
</hx-partial>
<hx-partial hx-target="#count">
<span>5</span>
</hx-partial>Il concetto è simile a quello degli out-of-band swap, ma rende più esplicita la struttura della risposta e la destinazione dei diversi frammenti HTML.
Nuove estensioni e streaming
Il passaggio a fetch() ha dato spazio a un'importante cambiamento del sistema delle estensioni. Troviamo così hx-preload, per precaricare i contenuti prima della richiesta effettiva, hx-download per i download basati su Fetch e hx-history-cache, che permette di utilizzare sessionStorage per la cache della cronologia.
Particolarmente interessanti sono poi le funzionalità dedicate allo streaming HTML. hx-sse supporta Server-Sent Events, hx-ws WebSocket e hx-multipart le risposte multipart/mixed.
A queste si aggiunge hx-live, una soluzione per lo scripting frontend pensata per integrarsi con htmx e ispirata a strumenti come Alpine.js e hyperscript.
Cosa cambia durante l'upgrade
La gestione della cronologia è stata modificata. htmx 4 non utilizza più localStorage per memorizzare automaticamente gli snapshot delle pagine. Durante una navigazione indietro la pagina può essere recuperata nuovamente dal server in modo da evitare i problemi causati da modifiche al DOM effettuate da librerie JavaScript esterne.
Per chi desidera mantenere una cache locale è disponibile infine hx-history-cache.
htmx 4.0.0 non cambia la filosofia di htmx e ne modernizza l'implementazione. Per gli sviluppatori che arrivano da htmx 2, ereditarietà ed eventi rappresentano gli aspetti da controllare con maggiore attenzione. Per contro, morphing, hx-partial, streaming e il nuovo ecosistema di estensioni ampliano notevolmente le possibilità della libreria.
