Sebbene esistano molti linguaggi accettabili per la scrivere codice, lo sviluppo web si sta concentrando su poche tecnologie affidabili. Questo è particolarmente vero per WordPress.
JavaScript è ancora in fase di maturazione per la piattaforma, anche se le aspettative degli utenti per siti web dinamici e interattivi sono ancora molto alte. I framework possono colmare questo divario, ma la complessità di alcuni dei più popolari può ostacolare lo sviluppo. È qui che entra in gioco HTMX. Questa libreria leggera promette di offrire usabilità e semplificazione nella creazione di esperienze web moderne.
In questo articolo esploreremo come HTMX possa integrarsi nel vostro flusso di lavoro di sviluppo di WordPress. Imparerete a utilizzare questo metodo potente e accessibile per creare contenuti dinamici e interattività.
Parleremo di cos’è HTMX, del perché sta guadagnando terreno e di come si collega a WordPress. Inoltre, avrete una guida pratica sull’integrazione e l’utilizzo di HTMX con WordPress.
Cos’è HTMX
In poche parole, HTMX è una libreria JavaScript che estende il linguaggio HTML (HyperText Markup Language) standard senza dover scrivere JavaScript vanilla o framework. Queste estensioni permettono di accedere anche ad altre tecnologie:
- JavaScript asincrono e XML (AJAX). HTMX utilizza AJAX per effettuare richieste “asincrone” al server. Ciò permette di effettuare aggiornamenti parziali della pagina senza dover ricaricare l’intera pagina.
- WebSockets. È possibile stabilire connessioni WebSocket e abilitare la comunicazione bidirezionale in tempo reale tra il browser e il server.
- Eventi inviati dal server (SSE). Questa tecnologia permette al server di inviare dati al browser. Da lì, è possibile usare HTMX per aggiornare la pagina in tempo reale.
- Transizioni CSS. È possibile integrare le transizioni CSS, che permettono di implementare aggiornamenti fluidi e animati al sito.
In sostanza, HTMX mira a semplificare la creazione di applicazioni web dinamiche e interattive. La sua funzionalità chiave è la possibilità di effettuare richieste HTTP a GET, POST, PUT, PATCH e DELETE da elementi HTML. Ciò significa che potrete elaborare aggiornamenti parziali della pagina in modo fluido e veloce come un’app mobile. Complessivamente, HTMX è un potente toolkit che ti aiuta a creare un’esperienza web dinamica senza dover ricorrere a una marea di codice JavaScript.
Perché si parla di HTMX
Negli ultimi tempi c’è stato un gran fermento intorno a HTMX e le ricerche di questa libreria sono esplose negli ultimi cinque anni.
Questo aumento di popolarità è in parte dovuto alla visibilità sui social media e sui forum di sviluppatori. Tuttavia, HTMX presenta diversi fattori che lo rendono un’opzione di sviluppo interessante.
- Semplicità. Poiché HTMX utilizza la familiare sintassi HTML per aiutare a creare applicazioni web dinamiche e interattive, è semplicissimo da implementare e non presenta quasi nessuna delle complessità tipiche dei framework JavaScript.
- Prestazioni. Riducendo al minimo la quantità di JavaScript necessaria, HTMX è in grado di garantire tempi di caricamento più rapidi e prestazioni migliori rispetto ad altri framework, soprattutto per i dispositivi mobili.
- Rendering lato server. Il rendering lato server è ottimo se si vogliono migliorare i tempi di caricamento iniziale delle pagine e l’ottimizzazione per i motori di ricerca (SEO). HTMX incorpora questo aspetto nel suo set di funzionalità.
- Miglioramento progressivo. Questo significa aggiungere interattività ai siti web senza interrompere le funzionalità per coloro che disabilitano JavaScript. HTMX si basa su questi principi, per cui offre un vantaggio in termini di accessibilità.
Inoltre, a differenza di alcuni framework più grandi, HTMX non richiede un processo di creazione o una catena di strumenti complessi. Grazie a una curva di apprendimento molto più breve, l’integrazione della libreria nei propri progetti è più semplice.
Questi vantaggi, a loro volta, portano a una maggiore discussione e adozione di HTMX. Se state cercando una soluzione più semplice per creare esperienze web interattive, questa libreria potrebbe fare al caso vostro.
L’architettura di WordPress in relazione a JavaScript
La relazione tra WordPress è JavaScript è diventata sempre più stretta a partire dallo State of the Word 2015, quando Matt Mullenweg ha chiuso con la frase: “Studiate bene JavaScript”.
Il percorso tipico degli sviluppatori di WordPress è stato quello di ricercare la necessità di componenti interattivi e dinamici in un sito web. Nella maggior parte dei casi, jQuery è stato il framework JavaScript di riferimento per WordPress. Anche il popolarissimo sito web Harvard Gazette si basa su jQuery:
Per questo motivo, WordPress richiede jQuery per impostazione predefinita. Inoltre, molte funzioni principali, plugin e temi ne fanno largo uso. Questo approccio è coerente e gode di un ampio supporto.
Tuttavia, con l’evoluzione dello sviluppo web, si è evoluto anche l’approccio di WordPress a JavaScript. L’introduzione dell’Editor a blocchi ha comportato un cambiamento verso l’utilizzo del framework React per la creazione di interfacce utente, soprattutto all’interno della bacheca di WordPress.
I pro e i contro dell’attuale implementazione JavaScript di WordPress
Ciò significa che c’è un mix di framework con supporto nel codice principale di WordPress. Questo comporta alcuni vantaggi e svantaggi. Innanzitutto, gli aspetti positivi:
- C’è un’ampia compatibilità sia con React che con jQuery. Per quanto riguarda il primo, si tratta di un framework potente e popolare. Per quanto riguarda il secondo, ha un’associazione di lunga data con WordPress.
- Molti sviluppatori conoscono questi framework perché React e jQuery sono molto popolari. Inoltre, è possibile trovare più risorse per imparare e risolvere i problemi di entrambi.
- WordPress offre un supporto integrato per AJAX attraverso
wp_ajax.
Tuttavia, questi vantaggi hanno una serie di aspetti negativi che li bilanciano:
- Affidarsi a jQuery comporta una riduzione delle prestazioni del sito e per alcune applicazioni potrebbe non essere necessario il framework.
- Non tutte le caratteristiche e le funzionalità “moderne” di JavaScript sono implementate in WordPress per motivi di compatibilità e sicurezza. Questo potrebbe essere un problema se si desidera creare qualcosa di particolare.
- Con l’aggiunta di React ad alcune aree di WordPress (come gli editor dei blocchi e dei siti), la curva di apprendimento è ancora più lunga che in passato.
L’attuale architettura JavaScript di WordPress è adatta se avete le conoscenze di sviluppo dei framework consigliati o il tempo per impararli. In caso contrario, è probabile che vogliate una soluzione che non abbia la complessità dei framework tipici, ma che fornisca comunque un’esperienza interattiva moderna sul front-end. È qui che HTMX dovrebbe essere preso in considerazione.
Perché HTMX potrebbe essere più adatto per alcune attività di sviluppo di WordPress
HTMX offre alcuni vantaggi interessanti per quanto riguarda lo sviluppo di WordPress. Potrebbe rappresentare una via di mezzo tra la semplicità di jQuery e il moderno e performante React.
Abbiamo già parlato di alcuni di questi aspetti, ma riassumiamoli in breve:
- Il “peso” di HTMX può avere un grande impatto sulle prestazioni rispetto a jQuery e React.
- La maggior parte degli sviluppatori di WordPress si considera più esperta in HTML e PHP che in JavaScript. HTMX presenta una barriera d’ingresso più semplice quando si lavora con esso, proprio come un linguaggio di markup.
- PHP e HTMX funzionano bene insieme anche grazie al rendering lato server, che potrebbe avere un impatto positivo sulle prestazioni.
- Nonostante si tratti di una libreria più recente, sarà possibile integrare HTMX con maggiore facilità e familiarizzare con il suo funzionamento. Questo gioverà al vostro flusso di lavoro.
Per lo sviluppo di WordPress, ci piace anche la facilità con cui è possibile prototipare nuove funzionalità per un sito. Potrete creare rapidamente nuove funzionalità complesse scrivendo codice all’interno dell’HTML esistente. Da lì, avete la flessibilità di aggiungere componenti React o un po’ di jQuery, se necessario.
Anche i principi di miglioramento progressivo di HTMX sono interessanti. L’accessibilità deve essere al centro della vostra strategia di progettazione e HTMX permette di creare interattività senza interromperla per coloro che scelgono di disabilitare JavaScript nel browser.
Infine, un vantaggio significativo di HTMX è che non richiede alcuna configurazione personalizzata o speciale sul lato server. Potete utilizzare il vostro markup HTMX con qualsiasi host, incluso Kinsta.
Grazie alle prestazioni di qualità dei nostri servizi di hosting, un sito che utilizza HTMX dovrebbe essere velocissimo. Questo avrà un impatto sulle metriche SEO, sui numeri del traffico, sui tempi di sviluppo, sul flusso di risoluzione dei problemi e sull’intera catena di sviluppo.
Casi d’uso tipici di HTMX
Lo abbiamo accennato nell’ultima sezione, ma HTMX non sarà una libreria da utilizzare come sostituto diretto di uno dei framework JavaScript più conosciuti. Al contrario, lavorerà al meglio accanto a ciò che già esiste, per aiutare a sostenere il carico di lavoro laddove necessario.
Ciò significa che utilizzerete HTMX per alcuni compiti per i quali jQuery e React potrebbero non essere ottimali. Prima di immergerci nell’implementazione di HTMX in WordPress, vediamo tre scenari comuni in cui la libreria potrebbe ottimizzare WordPress.
Ricarica parziale della pagina
Il grande caso d’uso di HTMX è la possibilità di implementare il refresh parziale delle pagine con il minimo sforzo. Questo potrebbe essere un grosso problema per molti sviluppatori, soprattutto per i mockup e i prototipi veloci. Tuttavia, HTMX potrebbe fornire risultati di qualità per la produzione.
Ad esempio, potrebbe aiutarvi a implementare la funzionalità di ricerca live sul vostro sito:
La libreria di esempi HTMX approfondisce anche la metodologia per realizzare aggiornamenti in tempo reale su altre aree di contenuto all’interno della pagina. Questo esempio utilizza un modulo di contatto con una tabella di contatti disponibili che si aggiorna quando l’utente invia una nuova aggiunta. HTMX offre una serie di modi eleganti per raggiungere questo obiettivo:
<div id="table-and-form">
<h2>Contacts</h2>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody id="contacts-table">
...
</tbody>
</table>
<h2>Add A Contact</h2>
<form hx-post="/contacts" hx-target="#table-and-form">
<label>
Name
<input name="name" type="text">
</label>
<label>
Email
<input name="email" type="email">
</label>
</form>
</div>
Il modulo utilizza gli attributi hx-post e hx-target per espandere il suo obiettivo. Potreste anche utilizzare gli attributi HTMX per preservare gli input del modulo dopo un errore o un altro tentativo di validazione che utilizza il refresh:
<input form="binaryForm" type="file" name="binaryFile">
<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
<button type="submit">Submit</button>
</form>
In questo caso, posizionerete l’input per il file binario al di fuori dell’elemento primario del modulo e utilizzerete gli attributi hx-swap e hx-target.
Caricamento dinamico
Questo approccio all’aggiornamento e al caricamento dinamico può essere adatto anche a compiti più comuni. Prendiamo ad esempio lo scorrimento infinito:
<tr hx-get="/contacts/?page=2"
hx-trigger="revealed"
hx-swap="afterend">
<td>Agent Smith</td>
<td>[email protected]</td>
<td>55F49448C0</td>
</tr>
L’attributo hx-swap funge da “ascoltatore” per l’attributo hx-trigger. Una volta che l’utente raggiunge la fine dell’elenco, HTMX caricherà la seconda pagina di contatti in modo infinito.
È possibile applicare lo stesso metodo anche alla funzionalità di lazy loading:
Anche in questo caso si utilizzano gli attributi hx-get e hx-trigger per avviare una transizione htmx per caricare il grafico con una dissolvenza lenta.
Presentazione dei dati
Non deve sorprendere che HTMX sia eccellente per presentare informazioni sullo schermo utilizzando elementi interattivi o comunque dinamici.
Ad esempio, è possibile implementare tutti i tipi di filtraggio dei contenuti, come le selezioni di valori. In questo caso, le opzioni di un elenco si popolano in base a quelle di un altro:
Potreste anche creare finestre di dialogo modali o schede di interfaccia con la stessa facilità. Questo mostra anche come HTMX lavora insieme ad altre librerie e framework, come Bootstrap:
Questa flessibilità si estende anche all’implementazione delle schede. Ci sono due modi per farlo: combinando JavaScript vanilla e HTMX o utilizzando i principi di Hypertext As The Engine Of Application State (HATEOAS):
Ci sono molti altri modi per utilizzare HTMX per gli elementi di un sito front-end con il suo nucleo sul lato server. Nella prossima sezione vi forniremo gli strumenti per creare la vostra visione personale all’interno di WordPress.
Come integrare HTMX in WordPress
Se volete aggiungere HTMX al vostro sito web WordPress, la buona notizia è che si tratta di un’operazione rapida e indolore. Di seguito vedremo un approccio in tre fasi per questo lavoro. Non tratteremo l’intero processo e il codice per sviluppare le funzionalità di WordPress, ma ci soffermeremo su tutti i punti chiave che dovrete seguire.
Inoltre, gran parte del processo, soprattutto la prima fase, dovrebbe essere tipica se avete già sviluppato per WordPress.
1. Eseguire l’enqueue HTMX nel codice PHP
Come per tutti gli script aggiuntivi per WordPress, dovete includere la libreria HTMX nel codice del vostro tema o plugin.
wp_enqueue_script('htmx-script', 'https://unpkg.com/[email protected]/dist/htmx.min.js', array(), '2.0.0', true);
Tuttavia, un’idea oggettivamente buona è quella di racchiudere questo enqueue all’interno di una funzione che inserisca e registri anche un blocco all’interno di WordPress. Naturalmente, questo dipende dal fatto che il vostro progetto richieda di lavorare con l’editor a blocchi.
La parte finale dell’enqueue HTMX consiste nell’invocare l’intera funzione utilizzando add_action. Dovrai tornare a utilizzare gli hook e i filtri più avanti, quando lavorerete con le richieste AJAX.
2. Aggiungere elementi HTMX ai file del template di WordPress
Dai nostri casi d’uso, vedrete che HTMX richiede il markup appropriato all’interno dell’HTML per gestire e attivare le richieste AJAX. La libreria utilizza gli attributi tipici delle richieste HTTP per creare i propri – GET, POST, PUSH, PATCH e DELETE – con un prefisso hx-:
hx-post
Le richieste AJAX di WordPress utilizzano l’endpoint admin-ajax.php, che dovete ricordare! I tipici elementi che creerete con HTMX effettueranno una richiesta AJAX, la invieranno a un elemento di destinazione e potenzialmente elaboreranno un trigger.
L’attributo hx-target permette di specificare dove andrà il risultato della richiesta. Potrebbe essere un’altra pagina, uno specifico div o qualcos’altro. Pensate a questo come ai tag di ancoraggio dell’HTML:
<input type="search"
name="search" placeholder="Search..."
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
…HTMX utilizza “naturale” e “non naturale” per definire un’azione. Ad esempio, submit attiverà un modulo e questo è un evento naturale. Per gli eventi di elementi non naturali, utilizzerete l’attributo hx-trigger. Questi trigger possono essere una delle parti più complesse di HTMX, ma sono comunque semplici da capire.
Ad esempio, si può utilizzare un trigger per monitorare un campo di input:
…
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
hx-trigger="input changed delay:500ms, search"
hx-indicator=".htmx-indicator">
…La modifica di un campo di input innescherà un aggiornamento in un altro punto della pagina. Un altro esempio è che potreste voler attivare un evento una sola volta in base a un’azione non tipica, come l’inserimento del cursore in una parte dello schermo:
<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
[Here Mouse, Mouse!]
</div>
Questo potrebbe ispirarvi a creare applicazioni come i pop-up o altri box modali. Tuttavia, prima di poterli vedere in azione, dovete elaborare la richiesta AJAX.
3. Gestire le richieste AJAX
Infine, dovete gestire la richiesta AJAX sul lato server. Per WordPress, è una pratica vantaggiosa memorizzare tutto questo in un file separato. Potete chiamarlo come volete, ma ajax-functions.php è sufficientemente descrittivo e chiaro.
Questa parte dell’utilizzo di HTMX vi richiederà di mettere a frutto le vostre conoscenze di PHP. L’elaborazione delle richieste AJAX sarà unica per il vostro progetto specifico. È il punto in cui collegate gli attributi che avete nominato nei vostri file modello all’elaborazione sul lato server.
Ovviamente, lo fareste in ogni caso, indipendentemente dal fatto che scriviate codice con HTMX, JavaScript puro o qualcos’altro. Ecco un po’ di pseudocodice per mostrare come potrebbe essere:
function my_search_action() {
$search_term = sanitize_text_field( $_POST['search'] );
$args = array(
's' => $search_term,
'post_type' => 'post',
'posts_per_page' => 5
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
echo '<h2>' . get_the_title() . '</h2>';
echo '<p>' . get_the_excerpt() . '</p>';
endwhile;
else:
echo 'No results found.';
endif;
wp_reset_postdata();
wp_die();
}
Tuttavia, questo potrebbe non essere rilevante o non assomigliare alla gestione AJAX del vostro progetto. Le stesse competenze che utilizzerete per costruire i template dei blocchi, estendere i plugin con PHP e altro ancora, vi aiuteranno a creare i vostri gestori di richieste AJAX e le vostre funzioni.
Suggerimenti per l’utilizzo di HTMX con WordPress
Sebbene l’utilizzo di HTMX sia uno dei modi più semplici per implementare contenuti dinamici con WordPress, richiede comunque un’attenta gestione e considerazione. Ci sono anche alcuni modi per migliorare la vostra esperienza di sviluppo.
Il primo consiglio riguarda la “maturità” di HTMX. Al momento è una libreria nuova per la piattaforma, quindi non ha lo stesso livello di integrazione di jQuery, per esempio.
HTMX ha un’ottima documentazione, ma non ci sono molte risorse per combinare la libreria con WordPress. Ciò significa che dovrete impegnarvi a fondo per far funzionare le cose senza la rete di sicurezza di una comunità già pronta.
Uno dei consigli più importanti che possiamo darvi è quello di creare le vostre funzionalità in un plugin per il momento. In questo modo potrete avere una struttura e una gestione più semplice mentre verificate la presenza di bug e altri errori di integrazione.
A proposito di WordPress, cercate di capire come il file admin-ajax.php si collega al resto dell’ecosistema, poiché molte interazioni lo coinvolgeranno.
Sebbene HTMX offra ottime prestazioni, dovete assicurarvi che l’utilizzo di AJAX sia sufficientemente basso da non influire sulla velocità di caricamento del vostro sito o sulla SEO. Anche il debug delle richieste dovrebbe essere un punto fermo del vostro flusso di lavoro, in particolare le metriche XMLHttpRequest (XHR) all’interno degli strumenti di sviluppo del browser.
Si tratta del registro dei dati di richiesta e risposta, che utilizzerete per eseguire il debug delle richieste AJAX e delle chiamate API (Application Programming Interface). Dato che HTMX non ha ancora una stretta integrazione con WordPress, il debugging potrebbe essere un compito più pertinente rispetto a quello che sarebbe con altri framework JavaScript.
Riepilogo
Per gli sviluppatori di WordPress che desiderano creare elementi dinamici e interattivi per il sito senza che complessi framework JavaScript si prendano tutto il vostro tempo, HTMX rappresenta un’interessante opportunità. Permette di costruire all’interno dell’HTML e offre un’alternativa snella a jQuery e React, pur garantendo un’interattività moderna.
In pratica, utilizzerete HTMX insieme agli altri framework, perché non è adatto a tutti i compiti. Tuttavia, è semplice da implementare e offre un modo rapido per prototipare gli elementi interattivi del vostro sito – e potrebbe anche diventare la vostra versione di produzione.
HTMX e WordPress vi sembrano un’accoppiata allettante? Fateci sapere cosa ne pensate nella sezione commenti qui sotto!
Lascia un commento