Cos’\u00e8 HTMX<\/h2>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-logo.png\")
Il logo di HTMX.<\/figcaption><\/figure>\nIn poche parole, HTMX<\/a> \u00e8 una libreria JavaScript che estende il linguaggio HTML (HyperText Markup Language)<\/a> standard senza dover scrivere JavaScript<\/a> vanilla o framework. Queste estensioni permettono di accedere anche ad altre tecnologie:<\/p>\n\n- JavaScript asincrono e XML (AJAX).<\/strong> HTMX utilizza AJAX per effettuare richieste “asincrone” al server. Ci\u00f2 permette di effettuare aggiornamenti parziali della pagina senza dover ricaricare l’intera pagina.<\/li>\n
- WebSockets.<\/strong> \u00c8 possibile stabilire connessioni WebSocket e abilitare la comunicazione bidirezionale in tempo reale tra il browser e il server.<\/li>\n
- Eventi inviati dal server (SSE).<\/strong> Questa tecnologia permette al server di inviare dati al browser. Da l\u00ec, \u00e8 possibile usare HTMX per aggiornare la pagina in tempo reale.<\/li>\n
- Transizioni CSS.<\/strong> \u00c8 possibile integrare le transizioni CSS<\/a>, che permettono di implementare aggiornamenti fluidi e animati al sito.<\/li>\n<\/ul>\n
In sostanza, HTMX mira a semplificare la creazione di applicazioni web dinamiche e interattive. La sua funzionalit\u00e0 chiave \u00e8 la possibilit\u00e0 di effettuare richieste HTTP<\/a> a GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code> e DELETE<\/code> da elementi HTML. Ci\u00f2 significa che potrete elaborare aggiornamenti parziali della pagina in modo fluido e veloce come un’app mobile. Complessivamente, HTMX \u00e8 un potente toolkit che ti aiuta a creare un’esperienza web dinamica senza dover ricorrere a una marea di codice JavaScript.<\/p>\nPerch\u00e9 si parla di HTMX<\/h2>\n
Negli ultimi tempi c’\u00e8 stato un gran fermento intorno a HTMX e le ricerche di questa libreria sono esplose negli ultimi cinque anni<\/a>.<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-trends.png\")
Il grafico di Google Trends mostra l’aumento delle ricerche di HTMX in un periodo di cinque anni.<\/figcaption><\/figure>\nQuesto aumento di popolarit\u00e0 \u00e8 in parte dovuto alla visibilit\u00e0 sui social media e sui forum di sviluppatori. Tuttavia, HTMX presenta diversi fattori che lo rendono un’opzione di sviluppo interessante.<\/p>\n
\n- Semplicit\u00e0.<\/strong> Poich\u00e9 HTMX utilizza la familiare sintassi HTML per aiutare a creare applicazioni web dinamiche e interattive, \u00e8 semplicissimo da implementare e non presenta quasi nessuna delle complessit\u00e0 tipiche dei framework JavaScript<\/a>.<\/li>\n
- Prestazioni.<\/strong> Riducendo al minimo la quantit\u00e0 di JavaScript necessaria, HTMX \u00e8 in grado di garantire tempi di caricamento pi\u00f9 rapidi<\/a> e prestazioni migliori rispetto ad altri framework, soprattutto per i dispositivi mobili.<\/li>\n
- Rendering lato server.<\/strong> Il rendering lato server \u00e8 ottimo se si vogliono migliorare i tempi di caricamento iniziale delle pagine e l’ottimizzazione per i motori di ricerca (SEO)<\/a>. HTMX incorpora questo aspetto nel suo set di funzionalit\u00e0.<\/li>\n
- Miglioramento progressivo.<\/strong> Questo significa aggiungere interattivit\u00e0 ai siti web senza interrompere le funzionalit\u00e0 per coloro che disabilitano JavaScript. HTMX si basa su questi principi, per cui offre un vantaggio in termini di accessibilit\u00e0.<\/li>\n<\/ul>\n
Inoltre, a differenza di alcuni framework pi\u00f9 grandi, HTMX non richiede un processo di creazione o una catena di strumenti complessi. Grazie a una curva di apprendimento molto pi\u00f9 breve, l’integrazione della libreria nei propri progetti \u00e8 pi\u00f9 semplice.<\/p>\n
Questi vantaggi, a loro volta, portano a una maggiore discussione e adozione di HTMX. Se state cercando una soluzione pi\u00f9 semplice per creare esperienze web interattive, questa libreria potrebbe fare al caso vostro.<\/p>\n
L’architettura di WordPress in relazione a JavaScript<\/h2>\n
La relazione tra WordPress \u00e8 JavaScript \u00e8 diventata sempre pi\u00f9 stretta a partire dallo State of the Word 2015<\/a>, quando Matt Mullenweg ha chiuso con la frase: “Studiate bene JavaScript”.<\/p>\nIl percorso tipico degli sviluppatori di WordPress \u00e8 stato quello di ricercare la necessit\u00e0 di componenti interattivi e dinamici in un sito web. Nella maggior parte dei casi, jQuery<\/a> \u00e8 stato il framework JavaScript di riferimento per WordPress. Anche il popolarissimo sito web Harvard Gazette<\/a> si basa su jQuery:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/harvard-gazette.png\")
Il sito web della Harvard Gazette, che utilizza WordPress e jQuery per funzionare.<\/figcaption><\/figure>\nPer questo motivo, WordPress richiede jQuery<\/a> per impostazione predefinita. Inoltre, molte funzioni principali, plugin e temi ne fanno largo uso. Questo approccio \u00e8 coerente e gode di un ampio supporto.<\/p>\n![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/block-editor.png\")
La barra laterale dei blocchi nell’editor a blocchi di WordPress.<\/figcaption><\/figure>\nTuttavia, con l’evoluzione dello sviluppo web, si \u00e8 evoluto anche l’approccio di WordPress a JavaScript. L’introduzione dell’Editor a blocchi<\/a> ha comportato un cambiamento verso l’utilizzo del framework React<\/a> per la creazione di interfacce utente, soprattutto all’interno della bacheca di WordPress.<\/p>\nI pro e i contro dell’attuale implementazione JavaScript di WordPress<\/h3>\n
Ci\u00f2 significa che c’\u00e8 un mix di framework con supporto nel codice principale di WordPress. Questo comporta alcuni vantaggi e svantaggi. Innanzitutto, gli aspetti positivi:<\/p>\n
\n- C’\u00e8 un’ampia compatibilit\u00e0 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.<\/li>\n
- Molti sviluppatori conoscono questi framework perch\u00e9 React e jQuery sono molto popolari. Inoltre, \u00e8 possibile trovare pi\u00f9 risorse per imparare e risolvere i problemi di entrambi.<\/li>\n
- WordPress offre un supporto integrato per AJAX attraverso
wp_ajax<\/code>.<\/li>\n<\/ul>\nTuttavia, questi vantaggi hanno una serie di aspetti negativi che li bilanciano:<\/p>\n
\n- Affidarsi a jQuery<\/a> comporta una riduzione delle prestazioni del sito e per alcune applicazioni potrebbe non essere necessario il framework.<\/li>\n
- Non tutte le caratteristiche e le funzionalit\u00e0 “moderne” di JavaScript sono implementate in WordPress per motivi di compatibilit\u00e0 e sicurezza. Questo potrebbe essere un problema se si desidera creare qualcosa di particolare.<\/li>\n
- Con l’aggiunta di React ad alcune aree di WordPress (come gli editor dei blocchi e dei siti), la curva di apprendimento \u00e8 ancora pi\u00f9 lunga che in passato.<\/li>\n<\/ul>\n
L’attuale architettura JavaScript di WordPress \u00e8 adatta se avete le conoscenze di sviluppo dei framework consigliati o il tempo per impararli. In caso contrario, \u00e8 probabile che vogliate una soluzione che non abbia la complessit\u00e0 dei framework tipici, ma che fornisca comunque un’esperienza interattiva moderna sul front-end. \u00c8 qui che HTMX dovrebbe essere preso in considerazione.<\/p>\n
Perch\u00e9 HTMX potrebbe essere pi\u00f9 adatto per alcune attivit\u00e0 di sviluppo di WordPress<\/h2>\n
HTMX offre alcuni vantaggi interessanti per quanto riguarda lo sviluppo di WordPress. Potrebbe rappresentare una via di mezzo tra la semplicit\u00e0 di jQuery e il moderno e performante React.<\/p>\n
Abbiamo gi\u00e0 parlato di alcuni di questi aspetti, ma riassumiamoli in breve:<\/p>\n
\n- Il “peso” di HTMX pu\u00f2 avere un grande impatto sulle prestazioni rispetto a jQuery e React.<\/li>\n
- La maggior parte degli sviluppatori di WordPress si considera pi\u00f9 esperta in HTML e PHP che in JavaScript. HTMX presenta una barriera d’ingresso pi\u00f9 semplice quando si lavora con esso, proprio come un linguaggio di markup.<\/li>\n
- PHP e HTMX funzionano bene insieme anche grazie al rendering lato server, che potrebbe avere un impatto positivo sulle prestazioni.<\/li>\n
- Nonostante si tratti di una libreria pi\u00f9 recente, sar\u00e0 possibile integrare HTMX con maggiore facilit\u00e0 e familiarizzare con il suo funzionamento. Questo giover\u00e0 al vostro flusso di lavoro.<\/li>\n<\/ul>\n
Per lo sviluppo di WordPress, ci piace anche la facilit\u00e0 con cui \u00e8 possibile prototipare nuove funzionalit\u00e0 per un sito. Potrete creare rapidamente nuove funzionalit\u00e0 complesse scrivendo codice all’interno dell’HTML esistente. Da l\u00ec, avete la flessibilit\u00e0 di aggiungere componenti React o un po’ di jQuery, se necessario.<\/p>\n
Anche i principi di miglioramento progressivo di HTMX sono interessanti. L’accessibilit\u00e0 deve essere al centro della vostra strategia di progettazione e HTMX permette di creare interattivit\u00e0 senza interromperla per coloro che scelgono di disabilitare JavaScript nel browser.<\/p>\n
Infine, un vantaggio significativo di HTMX \u00e8 che non richiede alcuna configurazione personalizzata o speciale sul lato server. Potete utilizzare il vostro markup HTMX con qualsiasi host, incluso Kinsta<\/a>.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/kinsta-website.png\")
La home page di Kinsta mostra la dashboard di MyKinsta.<\/figcaption><\/figure>\nGrazie alle prestazioni di qualit\u00e0 dei nostri servizi di hosting, un sito che utilizza HTMX dovrebbe essere velocissimo. Questo avr\u00e0 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.<\/p>\n
Casi d’uso tipici di HTMX<\/h2>\n
Lo abbiamo accennato nell’ultima sezione, ma HTMX non sar\u00e0 una libreria da utilizzare come sostituto diretto di uno dei framework JavaScript pi\u00f9 conosciuti. Al contrario, lavorer\u00e0 al meglio accanto a ci\u00f2 che gi\u00e0 esiste, per aiutare a sostenere il carico di lavoro laddove necessario.<\/p>\n
Ci\u00f2 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.<\/p>\n
Ricarica parziale della pagina<\/h3>\n
Il grande caso d’uso di HTMX \u00e8 la possibilit\u00e0 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\u00e0 per la produzione.<\/p>\n
Ad esempio, potrebbe aiutarvi a implementare la funzionalit\u00e0 di ricerca live sul vostro sito:<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/live-search.gif\")
Un’interfaccia di ricerca dinamica in tempo reale con HTMX.<\/figcaption><\/figure>\nLa libreria di esempi<\/a> HTMX approfondisce anche la metodologia per realizzare aggiornamenti in tempo reale su altre aree di contenuto all’interno della pagina. Questo esempio<\/a> 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:<\/p>\n<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nIl modulo utilizza gli attributi hx-post<\/code> e hx-target<\/code> per espandere il suo obiettivo. Potreste anche utilizzare gli attributi HTMX per preservare gli input del modulo<\/a> dopo un errore o un altro tentativo di validazione che utilizza il refresh:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nIn questo caso, posizionerete l’input per il file binario al di fuori dell’elemento primario del modulo e utilizzerete gli attributi hx-swap<\/code> e hx-target<\/code>.<\/p>\nCaricamento dinamico<\/h3>\n
Questo approccio all’aggiornamento e al caricamento dinamico pu\u00f2 essere adatto anche a compiti pi\u00f9 comuni. Prendiamo ad esempio lo scorrimento infinito<\/a>:<\/p>\n<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nL’attributo hx-swap<\/code> funge da “ascoltatore” per l’attributo hx-trigger<\/code>. Una volta che l’utente raggiunge la fine dell’elenco, HTMX caricher\u00e0 la seconda pagina di contatti in modo infinito.<\/p>\n\u00c8 possibile applicare lo stesso metodo anche alla funzionalit\u00e0 di lazy loading<\/a>:<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/lazy-loading-gif.gif\")
Usare HTMX per implementare il caricamento pigro.<\/figcaption><\/figure>\nAnche in questo caso si utilizzano gli attributi hx-get<\/code> e hx-trigger<\/code> per avviare una transizione htmx per caricare il grafico con una dissolvenza lenta.<\/p>\nPresentazione dei dati<\/h3>\n
Non deve sorprendere che HTMX sia eccellente per presentare informazioni sullo schermo utilizzando elementi interattivi o comunque dinamici.<\/p>\n
Ad esempio, \u00e8 possibile implementare tutti i tipi di filtraggio dei contenuti, come le selezioni di valori<\/a>. In questo caso, le opzioni di un elenco si popolano in base a quelle di un altro:<\/p>\n![\"GIF](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/value-select-gif.gif\")
Utilizzo di HTMX per assegnare selezioni di valore agli elementi del sito.<\/figcaption><\/figure>\nPotreste anche creare finestre di dialogo modali<\/a> o schede di interfaccia con la stessa facilit\u00e0. Questo mostra anche come HTMX lavora insieme ad altre librerie e framework, come Bootstrap:<\/p>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/modal-box-gif.gif\")
Aprire una finestra di dialogo modale utilizzando HTMX.<\/figcaption><\/figure>\nQuesta flessibilit\u00e0 si estende anche all’implementazione delle schede. Ci sono due modi per farlo: combinando JavaScript vanilla<\/a> e HTMX o utilizzando i principi di Hypertext As The Engine Of Application State (HATEOAS)<\/a>:<\/p>\n![](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/content-tabs.gif\")
Una GIF di un’interfaccia a schede che utilizza HTMX.<\/figcaption><\/figure>\nCi 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.<\/p>\n
Come integrare HTMX in WordPress<\/h2>\n
Se volete aggiungere HTMX al vostro sito web WordPress, la buona notizia \u00e8 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\u00e0 di WordPress, ma ci soffermeremo su tutti i punti chiave che dovrete seguire.<\/p>\n
Inoltre, gran parte del processo, soprattutto la prima fase, dovrebbe essere tipica se avete gi\u00e0 sviluppato per WordPress.<\/p>\n
1. Eseguire l’enqueue HTMX nel codice PHP<\/h3>\n
Come per tutti gli script aggiuntivi per WordPress, dovete includere la libreria HTMX nel codice del vostro tema o plugin.<\/p>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n
In poche parole, HTMX<\/a> \u00e8 una libreria JavaScript che estende il linguaggio HTML (HyperText Markup Language)<\/a> standard senza dover scrivere JavaScript<\/a> vanilla o framework. Queste estensioni permettono di accedere anche ad altre tecnologie:<\/p>\n In sostanza, HTMX mira a semplificare la creazione di applicazioni web dinamiche e interattive. La sua funzionalit\u00e0 chiave \u00e8 la possibilit\u00e0 di effettuare richieste HTTP<\/a> a Negli ultimi tempi c’\u00e8 stato un gran fermento intorno a HTMX e le ricerche di questa libreria sono esplose negli ultimi cinque anni<\/a>.<\/p>\n Questo aumento di popolarit\u00e0 \u00e8 in parte dovuto alla visibilit\u00e0 sui social media e sui forum di sviluppatori. Tuttavia, HTMX presenta diversi fattori che lo rendono un’opzione di sviluppo interessante.<\/p>\n Inoltre, a differenza di alcuni framework pi\u00f9 grandi, HTMX non richiede un processo di creazione o una catena di strumenti complessi. Grazie a una curva di apprendimento molto pi\u00f9 breve, l’integrazione della libreria nei propri progetti \u00e8 pi\u00f9 semplice.<\/p>\n Questi vantaggi, a loro volta, portano a una maggiore discussione e adozione di HTMX. Se state cercando una soluzione pi\u00f9 semplice per creare esperienze web interattive, questa libreria potrebbe fare al caso vostro.<\/p>\n La relazione tra WordPress \u00e8 JavaScript \u00e8 diventata sempre pi\u00f9 stretta a partire dallo State of the Word 2015<\/a>, quando Matt Mullenweg ha chiuso con la frase: “Studiate bene JavaScript”.<\/p>\n Il percorso tipico degli sviluppatori di WordPress \u00e8 stato quello di ricercare la necessit\u00e0 di componenti interattivi e dinamici in un sito web. Nella maggior parte dei casi, jQuery<\/a> \u00e8 stato il framework JavaScript di riferimento per WordPress. Anche il popolarissimo sito web Harvard Gazette<\/a> si basa su jQuery:<\/p>\n Per questo motivo, WordPress richiede jQuery<\/a> per impostazione predefinita. Inoltre, molte funzioni principali, plugin e temi ne fanno largo uso. Questo approccio \u00e8 coerente e gode di un ampio supporto.<\/p>\n Tuttavia, con l’evoluzione dello sviluppo web, si \u00e8 evoluto anche l’approccio di WordPress a JavaScript. L’introduzione dell’Editor a blocchi<\/a> ha comportato un cambiamento verso l’utilizzo del framework React<\/a> per la creazione di interfacce utente, soprattutto all’interno della bacheca di WordPress.<\/p>\n Ci\u00f2 significa che c’\u00e8 un mix di framework con supporto nel codice principale di WordPress. Questo comporta alcuni vantaggi e svantaggi. Innanzitutto, gli aspetti positivi:<\/p>\n Tuttavia, questi vantaggi hanno una serie di aspetti negativi che li bilanciano:<\/p>\n L’attuale architettura JavaScript di WordPress \u00e8 adatta se avete le conoscenze di sviluppo dei framework consigliati o il tempo per impararli. In caso contrario, \u00e8 probabile che vogliate una soluzione che non abbia la complessit\u00e0 dei framework tipici, ma che fornisca comunque un’esperienza interattiva moderna sul front-end. \u00c8 qui che HTMX dovrebbe essere preso in considerazione.<\/p>\n HTMX offre alcuni vantaggi interessanti per quanto riguarda lo sviluppo di WordPress. Potrebbe rappresentare una via di mezzo tra la semplicit\u00e0 di jQuery e il moderno e performante React.<\/p>\n Abbiamo gi\u00e0 parlato di alcuni di questi aspetti, ma riassumiamoli in breve:<\/p>\n Per lo sviluppo di WordPress, ci piace anche la facilit\u00e0 con cui \u00e8 possibile prototipare nuove funzionalit\u00e0 per un sito. Potrete creare rapidamente nuove funzionalit\u00e0 complesse scrivendo codice all’interno dell’HTML esistente. Da l\u00ec, avete la flessibilit\u00e0 di aggiungere componenti React o un po’ di jQuery, se necessario.<\/p>\n Anche i principi di miglioramento progressivo di HTMX sono interessanti. L’accessibilit\u00e0 deve essere al centro della vostra strategia di progettazione e HTMX permette di creare interattivit\u00e0 senza interromperla per coloro che scelgono di disabilitare JavaScript nel browser.<\/p>\n Infine, un vantaggio significativo di HTMX \u00e8 che non richiede alcuna configurazione personalizzata o speciale sul lato server. Potete utilizzare il vostro markup HTMX con qualsiasi host, incluso Kinsta<\/a>.<\/p>\n Grazie alle prestazioni di qualit\u00e0 dei nostri servizi di hosting, un sito che utilizza HTMX dovrebbe essere velocissimo. Questo avr\u00e0 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.<\/p>\n Lo abbiamo accennato nell’ultima sezione, ma HTMX non sar\u00e0 una libreria da utilizzare come sostituto diretto di uno dei framework JavaScript pi\u00f9 conosciuti. Al contrario, lavorer\u00e0 al meglio accanto a ci\u00f2 che gi\u00e0 esiste, per aiutare a sostenere il carico di lavoro laddove necessario.<\/p>\n Ci\u00f2 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.<\/p>\n Il grande caso d’uso di HTMX \u00e8 la possibilit\u00e0 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\u00e0 per la produzione.<\/p>\n Ad esempio, potrebbe aiutarvi a implementare la funzionalit\u00e0 di ricerca live sul vostro sito:<\/p>\n La libreria di esempi<\/a> HTMX approfondisce anche la metodologia per realizzare aggiornamenti in tempo reale su altre aree di contenuto all’interno della pagina. Questo esempio<\/a> 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:<\/p>\n Il modulo utilizza gli attributi In questo caso, posizionerete l’input per il file binario al di fuori dell’elemento primario del modulo e utilizzerete gli attributi Questo approccio all’aggiornamento e al caricamento dinamico pu\u00f2 essere adatto anche a compiti pi\u00f9 comuni. Prendiamo ad esempio lo scorrimento infinito<\/a>:<\/p>\n L’attributo \u00c8 possibile applicare lo stesso metodo anche alla funzionalit\u00e0 di lazy loading<\/a>:<\/p>\n Anche in questo caso si utilizzano gli attributi Non deve sorprendere che HTMX sia eccellente per presentare informazioni sullo schermo utilizzando elementi interattivi o comunque dinamici.<\/p>\n Ad esempio, \u00e8 possibile implementare tutti i tipi di filtraggio dei contenuti, come le selezioni di valori<\/a>. In questo caso, le opzioni di un elenco si popolano in base a quelle di un altro:<\/p>\n Potreste anche creare finestre di dialogo modali<\/a> o schede di interfaccia con la stessa facilit\u00e0. Questo mostra anche come HTMX lavora insieme ad altre librerie e framework, come Bootstrap:<\/p>\n Questa flessibilit\u00e0 si estende anche all’implementazione delle schede. Ci sono due modi per farlo: combinando JavaScript vanilla<\/a> e HTMX o utilizzando i principi di Hypertext As The Engine Of Application State (HATEOAS)<\/a>:<\/p>\n 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.<\/p>\n Se volete aggiungere HTMX al vostro sito web WordPress, la buona notizia \u00e8 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\u00e0 di WordPress, ma ci soffermeremo su tutti i punti chiave che dovrete seguire.<\/p>\n Inoltre, gran parte del processo, soprattutto la prima fase, dovrebbe essere tipica se avete gi\u00e0 sviluppato per WordPress.<\/p>\n Come per tutti gli script aggiuntivi per WordPress, dovete includere la libreria HTMX nel codice del vostro tema o plugin.<\/p>\n\n
GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code> e DELETE<\/code> da elementi HTML. Ci\u00f2 significa che potrete elaborare aggiornamenti parziali della pagina in modo fluido e veloce come un’app mobile. Complessivamente, HTMX \u00e8 un potente toolkit che ti aiuta a creare un’esperienza web dinamica senza dover ricorrere a una marea di codice JavaScript.<\/p>\nPerch\u00e9 si parla di HTMX<\/h2>\n
\n
L’architettura di WordPress in relazione a JavaScript<\/h2>\n
I pro e i contro dell’attuale implementazione JavaScript di WordPress<\/h3>\n
\n
wp_ajax<\/code>.<\/li>\n<\/ul>\n\n
Perch\u00e9 HTMX potrebbe essere pi\u00f9 adatto per alcune attivit\u00e0 di sviluppo di WordPress<\/h2>\n
\n
Casi d’uso tipici di HTMX<\/h2>\n
Ricarica parziale della pagina<\/h3>\n
<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nhx-post<\/code> e hx-target<\/code> per espandere il suo obiettivo. Potreste anche utilizzare gli attributi HTMX per preservare gli input del modulo<\/a> dopo un errore o un altro tentativo di validazione che utilizza il refresh:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nhx-swap<\/code> e hx-target<\/code>.<\/p>\nCaricamento dinamico<\/h3>\n
<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nhx-swap<\/code> funge da “ascoltatore” per l’attributo hx-trigger<\/code>. Una volta che l’utente raggiunge la fine dell’elenco, HTMX caricher\u00e0 la seconda pagina di contatti in modo infinito.<\/p>\nhx-get<\/code> e hx-trigger<\/code> per avviare una transizione htmx per caricare il grafico con una dissolvenza lenta.<\/p>\nPresentazione dei dati<\/h3>\n
Come integrare HTMX in WordPress<\/h2>\n
1. Eseguire l’enqueue HTMX nel codice PHP<\/h3>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n