htmx: ridurre la complessità dello sviluppo di applicazioni Web

Se siete sviluppatori Web, un prodotto come htmx può rappresentare una vera e propria rivelazione. Abbracciando questo strumento, infatti, molto spesso si scopre come lo sviluppo diventi significativamente più semplice, produttivo, vantaggioso e divertente nella stragrande maggioranza dei casi.

htmx è una libreria JavaScript leggera e semplice da utilizzare che consente di arricchire le pagine Web esistenti con funzionalità di aggiornamento dinamico e interattività. La denominazione completa del progetto è “HTML over the wire“: essa riflette l’obiettivo principale della libreria: consentire agli sviluppatori di creare esperienze utente interattive senza dover scrivere molto codice JavaScript.

L’innovativo paradigma introdotto da htmx

htmx (vi invitiamo a consultare il sito Web di riferimento) utilizza infatti attributi HTML personalizzati per definire il comportamento desiderato degli elementi che compongono ciascuna pagina Web: ad esempio, l’attributo hx-get viene utilizzato per specificare l’URL di una richiesta HTTP GET, mentre l’attributo hx-post per gestire una richiesta HTTP POST. Questi attributi vengono collegati agli elementi HTML, come i pulsanti o i link, per definire le azioni da eseguire quando viene rilevata una qualche interazione da parte dell’utente.

Una delle caratteristiche principali di htmx è la sua capacità di aggiornare parti specifiche della pagina in modo selettivo invece di effettuare un reload completo. Questo viene fatto utilizzando chiamate AJAX per inviare richieste al server e ottenere dati o contenuti aggiornati. L’HTML ottenuto viene utilizzato per aggiornare dinamicamente gli elementi della pagina, fornendo un’esperienza utente più fluida e reattiva.

Una valida alternativa all’utilizzo di chiamate JSON RPC nello sviluppo delle applicazioni Web

Le applicazioni Web fanno ormai prevalentemente e prepotentemente uso di uno schema client-server che mette al centro le chiamate JSON RPC (Remote Procedure Call). Invece di JSON, formato di interscambio dei dati tra il client e il server, htmx utilizza un approccio diverso, più semplicistico che mira a creare esperienze utente in tempo reale, moderne e ricche senza trasferire enormi moli di dati JavaScript al browser. Sfida quindi lo status quo e in particolare le Single Page Application (SPA) offrendo un’alternativa semplice e completa.

htmx consente, come accennato in precedenza, di accedere ad AJAX, transizioni CSS, WebSocket ed agli eventi inviati dal server direttamente in HTML, utilizzando gli attributi, in modo da poter creare interfacce utente moderne con la semplicità e la potenza dell’ipertesto. Supporta inoltre anche il caching delle risposte e la gestione degli errori. La libreria è leggera, priva di dipendenza, estendibile e compatibile con tutti i browser Web, anche i più vecchi e ormai non più supportati (addirittura Internet Explor 11, il che è tutto dire…).

Il fine ultimo di htmx è quello di semplificare lo sviluppo di applicazioni Web interattive, consentendo agli sviluppatori di sfruttare le tecnologie web esistenti, come HTML, CSS e JavaScript, senza la necessità di apprendere complessi framework o librerie. htmx può comunque essere utilizzato in combinazione con altre librerie e framework JavaScript, quali jQuery o Vue.js, per estendere ulteriormente le funzionalità e la flessibilità. Si tratta inoltre di uno strumento semplice da usare, ben documentato, che gode di una robusta comunità.

Un’ulteriore testimonianza del valore di htmx è arrivata con l’inclusione del progetto nell’iniziativa GitHub Open Source Accelerator: la piattaforma parte integrante del portafoglio Microsoft si occupa di finanziare il progetto e di mettere a disposizione degli amministratori risorse per far crescere l’idea e sviluppare flussi di finanziamento durevoli.

Come usare htmx: ecco alcuni esempi pratici

Nell’esempio seguente abbiamo un div che contiene un pulsante. Quando viene cliccato il pulsante, si attiva la richiesta GET all’URL /api/content. Il risultato viene inserito nel div con id contentDiv. La richiesta viene effettuata nel momento in cui l’utente fa clic sul primo div, grazie alla presenza dell’attributo hx-trigger=”click”.

<div hx-trigger="click" hx-get="/api/content" hx-target="#contentDiv">
<button>Carica Contenuto</button>
</div>

<div id="contentDiv" hx-swap="outerHTML">
<!-- Contenuto dinamico -->
</div>

Il codice HTML seguente definisce un form che trasmette una richiesta POST all’URL /api/update. I dati del form vengono inviati al server e il contenuto del div con resultDiv viene aggiornato con i risultati della richiesta POST, grazie all’attributo hx-swap=”innerHTML”.

<form hx-post="/api/update" hx-target="#resultDiv" hx-swap="innerHTML">
<input type="text" name="name" placeholder="Nome" required>
<input type="email" name="email" placeholder="Email" required>
<button type="submit">Aggiorna</button>
</form>

<div id="resultDiv">
<!-- Risultati richiesta -->
</div>

Nella sezione esempi del sito di htmx sono pubblicati una serie di interessanti e utili “casi pratici” per approfondire il funzionamento di htmx: sono disponibili dimostrazioni per la modifica in linea dei dati, la gestione di tabelle, la convalida del contenuto dei campi, lo scrolling infinito di una pagina, la visualizzazione di una barra di avanzamento, la correlazione tra valori in un form, la visualizzazione di finestre di dialogo, il riordino dei dati, la gestione di schede e molto altro ancora.