Ce qu’est HTMX<\/h2>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-logo.png\")
Le logo HTMX.<\/figcaption><\/figure>\nEn r\u00e9sum\u00e9, HTMX<\/a> est une biblioth\u00e8que JavaScript qui \u00e9tend le langage de balisage hypertexte (HTML)<\/a> standard sans qu’il soit n\u00e9cessaire d’\u00e9crire du JavaScript<\/a> vanilla ou framework. Ces extensions vous permettent \u00e9galement d’acc\u00e9der \u00e0 d’autres technologies :<\/p>\n\n- Asynchronous JavaScript and XML (AJAX).<\/strong> HTMX utilise AJAX pour effectuer des requ\u00eates \u00ab asynchrones \u00bb au serveur. Cela vous permet d’effectuer des mises \u00e0 jour partielles de la page sans avoir \u00e0 la recharger enti\u00e8rement.<\/li>\n
- WebSockets.<\/strong> Vous pouvez \u00e9tablir des connexions WebSocket et permettre une communication bidirectionnelle en temps r\u00e9el entre le navigateur et le serveur.<\/li>\n
- \u00c9v\u00e8nements envoy\u00e9s par le serveur Server-Sent-Transition ou (SSE).<\/strong> Cette technologie permet au serveur de transmettre des donn\u00e9es au navigateur. \u00c0 partir de l\u00e0, vous pouvez utiliser HTMX pour effectuer des mises \u00e0 jour de page en temps r\u00e9el.<\/li>\n
- Transitions CSS.<\/strong> Vous pouvez int\u00e9grer les transitions CSS<\/a>, qui vous permettent de mettre en \u0153uvre des mises \u00e0 jour fluides et anim\u00e9es sur votre site.<\/li>\n<\/ul>\n
\u00c0 la base, HTMX vise \u00e0 simplifier la cr\u00e9ation d’applications web dynamiques et interactives. Sa principale fonctionnalit\u00e9 r\u00e9side dans sa capacit\u00e9 \u00e0 effectuer des requ\u00eates HTTP<\/a> GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code>, et DELETE<\/code> \u00e0 partir d’\u00e9l\u00e9ments HTML. Cela signifie que vous pouvez traiter des mises \u00e0 jour partielles de pages en douceur comme une application mobile. Dans l’ensemble, HTMX est une bo\u00eete \u00e0 outils puissante qui vous aide \u00e0 cr\u00e9er une exp\u00e9rience web dynamique sans avoir besoin de quantit\u00e9s de code JavaScript.<\/p>\nPourquoi nous parlons tous de HTMX<\/h2>\n
La biblioth\u00e8que HTMX a r\u00e9cemment fait l’objet d’un v\u00e9ritable engouement, les recherches la concernant ayant explos\u00e9 au cours des cinq derni\u00e8res ann\u00e9es<\/a>.<\/p>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-trends.png\")
Le graphique Google Trends montre une augmentation des recherches sur HTMX sur une p\u00e9riode de cinq ans.<\/figcaption><\/figure>\nCe regain de popularit\u00e9 est en partie d\u00fb \u00e0 la visibilit\u00e9 des m\u00e9dias sociaux et des forums de d\u00e9veloppeurs. Cependant, HTMX pr\u00e9sente plusieurs facteurs qui en font une option de d\u00e9veloppement attrayante.<\/p>\n
\n- Simplicit\u00e9.<\/strong> Comme HTMX utilise la syntaxe HTML famili\u00e8re pour vous aider \u00e0 cr\u00e9er des applications web dynamiques et interactives, il est tr\u00e8s simple \u00e0 mettre en \u0153uvre et ne pr\u00e9sente pratiquement aucune des complexit\u00e9s des frameworks JavaScript typiques<\/a>.<\/li>\n
- Performance.<\/strong> En minimisant la quantit\u00e9 de JavaScript n\u00e9cessaire, HTMX peut offrir des temps de chargement plus rapides<\/a> et de meilleures performances que d’autres frameworks, en particulier pour les appareils mobiles.<\/li>\n
- Rendu c\u00f4t\u00e9 serveur.<\/strong> Le rendu c\u00f4t\u00e9 serveur est id\u00e9al si vous souhaitez am\u00e9liorer les temps de chargement initiaux des pages et l’optimisation pour les moteurs de recherche (SEO)<\/a>. HTMX l’int\u00e8gre dans son ensemble de fonctionnalit\u00e9s.<\/li>\n
- Am\u00e9lioration progressive.<\/strong> Il s’agit d’ajouter de l’interactivit\u00e9 aux sites web sans interrompre les fonctionnalit\u00e9s pour ceux qui d\u00e9sactivent JavaScript. HTMX fonctionne selon ces principes, ce qui vous permet de b\u00e9n\u00e9ficier d’un avantage en termes d’accessibilit\u00e9.<\/li>\n<\/ul>\n
En outre, contrairement \u00e0 d’autres frameworks plus importants, HTMX ne n\u00e9cessite pas de processus de construction ou de cha\u00eene d’outils complexes. Gr\u00e2ce \u00e0 une courbe d’apprentissage beaucoup moins prononc\u00e9e, l’int\u00e9gration de la biblioth\u00e8que dans vos projets est plus facile.<\/p>\n
Ces avantages, \u00e0 leur tour, conduisent \u00e0 une plus grande discussion et \u00e0 l’adoption de HTMX. Si vous recherchez une solution plus simple pour cr\u00e9er des exp\u00e9riences web interactives, cette biblioth\u00e8que pourrait \u00eatre votre choix.<\/p>\n
L’architecture de WordPress en relation avec JavaScript<\/h2>\n
L’histoire de WordPress avec JavaScript s’est acc\u00e9l\u00e9r\u00e9e depuis le State of the Word 2015<\/a>, lorsque Matt Mullenweg a conclu en disant : \u00ab Apprenez JavaScript en profondeur. \u00bb<\/p>\nLe chemin typique pour les d\u00e9veloppeurs de WordPress \u00e9tait de rechercher le besoin de composants interactifs et dynamiques sur un site web. Dans la plupart des cas, jQuery<\/a> a \u00e9t\u00e9 le framework JavaScript de WordPress. M\u00eame le tr\u00e8s populaire site web de la Harvard Gazette<\/a> repose sur jQuery :<\/p>\n![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/harvard-gazette.png\")
Le site web de la Harvard Gazette, qui utilise WordPress et jQuery pour fonctionner.<\/figcaption><\/figure>\nAinsi, WordPress met en file d’attente jQuery<\/a> par d\u00e9faut. En outre, de nombreuses fonctionnalit\u00e9s de base, des extensions et des th\u00e8mes sont largement utilis\u00e9s. Cette approche est coh\u00e9rente et b\u00e9n\u00e9ficie d’un large soutien.<\/p>\n![\"Affichage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/block-editor.png\")
Affichage de la colonne lat\u00e9rale des blocs dans l’\u00e9diteur de blocs de WordPress.<\/figcaption><\/figure>\nCependant, \u00e0 mesure que le d\u00e9veloppement web \u00e9volue, l’approche de WordPress en mati\u00e8re de JavaScript \u00e9volue \u00e9galement. L’introduction de l’\u00e9diteur de blocs<\/a> s’est accompagn\u00e9e d’une \u00e9volution vers l’utilisation du framework React<\/a> pour la construction d’interfaces utilisateur, en particulier dans le tableau de bord de WordPress.<\/p>\nLes avantages et les inconv\u00e9nients de l’utilisation de l’impl\u00e9mentation JavaScript actuelle de WordPress<\/h3>\n
Cela signifie qu’il y a un m\u00e9lange de frameworks avec un support dans le code de base de WordPress. Il y a des avantages et des inconv\u00e9nients \u00e0 cela. Tout d’abord, les points positifs :<\/p>\n
\n- Il y a une compatibilit\u00e9 \u00e9tendue pour React et jQuery. Pour le premier, il s’agit d’un framework puissant et populaire. Quant \u00e0 jQuery, il est associ\u00e9 depuis longtemps \u00e0 WordPress.<\/li>\n
- De nombreux d\u00e9veloppeurs connaissent les frameworks parce que React et jQuery sont populaires. De plus, vous pouvez trouver plus de ressources pour apprendre et d\u00e9panner les deux.<\/li>\n
- WordPress offre un support int\u00e9gr\u00e9 pour AJAX \u00e0 travers
wp_ajax<\/code>.<\/li>\n<\/ul>\nCependant, ces avantages sont contrebalanc\u00e9s par une s\u00e9rie d’inconv\u00e9nients :<\/p>\n
\n- L’utilisation de jQuery<\/a> nuit aux performances de votre site, et vous n’aurez peut-\u00eatre pas besoin de ce framework pour certaines applications.<\/li>\n
- Toutes les caract\u00e9ristiques et fonctionnalit\u00e9s \u00ab modernes \u00bb de JavaScript ne sont pas impl\u00e9ment\u00e9es dans WordPress pour des raisons de compatibilit\u00e9 et de s\u00e9curit\u00e9. Cela peut constituer un probl\u00e8me si vous souhaitez cr\u00e9er quelque chose de particulier.<\/li>\n
- Avec l’ajout de React dans certaines parties de WordPress (comme les \u00e9diteurs de blocs et de sites), vous avez une courbe d’apprentissage encore plus grande qu’auparavant.<\/li>\n<\/ul>\n
L’architecture JavaScript actuelle de WordPress convient si vous avez les connaissances en d\u00e9veloppement des frameworks recommand\u00e9s ou le temps de les apprendre. Si ce n’est pas le cas, vous aurez probablement besoin d’une solution qui ne soit pas aussi complexe que les frameworks typiques, tout en offrant une exp\u00e9rience interactive moderne sur le frontend. C’est l\u00e0 que HTMX doit \u00eatre envisag\u00e9.<\/p>\n
Pourquoi HTMX pourrait \u00eatre mieux adapt\u00e9 \u00e0 certaines t\u00e2ches de d\u00e9veloppement WordPress ?<\/h2>\n
HTMX offre quelques avantages convaincants pour le d\u00e9veloppement de WordPress. Il pourrait constituer une solution interm\u00e9diaire entre la simplicit\u00e9 de jQuery et la modernit\u00e9 et la performance de React.<\/p>\n
Nous avons d\u00e9j\u00e0 \u00e9voqu\u00e9 certains de ces aspects, mais r\u00e9capitulons-les bri\u00e8vement :<\/p>\n
\n- Le \u00ab poids \u00bb de HTMX peut avoir un impact important sur les performances par rapport \u00e0 jQuery et React.<\/li>\n
- La plupart des d\u00e9veloppeurs WordPress se consid\u00e8rent plus comp\u00e9tents en HTML et PHP qu’en JavaScript. HTMX pr\u00e9sente une barri\u00e8re d’entr\u00e9e plus facile \u00e0 franchir au fur et \u00e0 mesure que vous travaillez avec lui, un peu comme un langage de balisage.<\/li>\n
- PHP et HTMX fonctionneront \u00e9galement bien ensemble, gr\u00e2ce au rendu c\u00f4t\u00e9 serveur, ce qui pourrait avoir un impact positif sur les performances.<\/li>\n
- Bien qu’il s’agisse d’une biblioth\u00e8que plus \u00ab r\u00e9cente \u00bb, vous pouvez int\u00e9grer HTMX plus facilement et vous familiariser avec son fonctionnement. Votre flux de travail en b\u00e9n\u00e9ficiera.<\/li>\n<\/ul>\n
Pour le d\u00e9veloppement de WordPress, nous appr\u00e9cions \u00e9galement la facilit\u00e9 avec laquelle vous pouvez prototyper de nouvelles fonctionnalit\u00e9s pour un site. Vous pouvez rapidement d\u00e9velopper de nouvelles fonctionnalit\u00e9s complexes en codant dans le code HTML existant. \u00c0 partir de l\u00e0, vous avez la possibilit\u00e9 d’ajouter des composants React ou un peu de jQuery si n\u00e9cessaire.<\/p>\n
Les principes d’am\u00e9lioration progressive de HTMX sont \u00e9galement int\u00e9ressants. L’accessibilit\u00e9 doit \u00eatre au c\u0153ur de votre strat\u00e9gie de conception, et HTMX peut vous permettre de d\u00e9velopper l’interactivit\u00e9 sans la briser pour ceux qui choisissent de d\u00e9sactiver JavaScript dans le navigateur.<\/p>\n
Enfin, l’un des principaux avantages du HTMX est qu’il ne n\u00e9cessite aucune configuration personnalis\u00e9e ou sp\u00e9ciale c\u00f4t\u00e9 serveur. Vous pouvez utiliser votre balisage HTMX avec n’importe quel h\u00e9bergeur, y compris Kinsta<\/a>.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/kinsta-website.png\")
La page d’accueil de Kinsta montre le tableau de bord MyKinsta.<\/figcaption><\/figure>\nCompte tenu de la qualit\u00e9 de nos services d’h\u00e9bergement, un site utilisant HTMX devrait se d\u00e9velopper rapidement. Cela aura un impact sur les mesures de r\u00e9f\u00e9rencement, les chiffres du trafic, le temps de d\u00e9veloppement, le flux de travail de d\u00e9pannage et l’ensemble de la cha\u00eene de d\u00e9veloppement.<\/p>\n
Cas d’utilisation typiques pour HTMX<\/h2>\n
Nous l’avons \u00e9voqu\u00e9 dans la derni\u00e8re section, mais HTMX ne sera pas une biblioth\u00e8que que vous utiliserez pour remplacer directement l’un des frameworks JavaScript les plus connus. Au contraire, elle fonctionnera mieux en compl\u00e9ment de ce qui existe d\u00e9j\u00e0 pour aider \u00e0 supporter la charge si n\u00e9cessaire.<\/p>\n
Cela signifie que vous utiliserez HTMX pour certaines t\u00e2ches pour lesquelles jQuery et React ne sont peut-\u00eatre pas optimaux. Avant de plonger dans l’impl\u00e9mentation de HTMX dans WordPress, nous allons vous pr\u00e9senter trois sc\u00e9narios courants dans lesquels la biblioth\u00e8que pourrait am\u00e9liorer WordPress.<\/p>\n
Rechargements partiels de pages<\/h3>\n
Le principal cas d’utilisation de HTMX est la fa\u00e7on dont vous pouvez mettre en \u0153uvre des rafra\u00eechissements partiels de page avec un minimum d’agitation. Cela pourrait \u00eatre une grande affaire pour de nombreux d\u00e9veloppeurs, en particulier pour les maquettes et les prototypes rapides. Cependant, HTMX pourrait vous permettre d’obtenir des r\u00e9sultats dignes d’une production.<\/p>\n
Par exemple, il pourrait vous aider \u00e0 mettre en \u0153uvre une fonctionnalit\u00e9 de recherche en direct sur votre site :<\/p>\n![\"Une](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/live-search.gif\")
Une interface de recherche dynamique en direct \u00e0 l’aide de HTMX.<\/figcaption><\/figure>\nLa biblioth\u00e8que d’exemples<\/a> HTMX aborde \u00e9galement la m\u00e9thodologie permettant d’effectuer des mises \u00e0 jour en temps r\u00e9el sur d’autres zones de contenu de la page. Par exemple, cet exemple<\/a> utilise un formulaire de contact avec un tableau des contacts disponibles qui s’actualise d\u00e8s qu’un utilisateur soumet un nouvel ajout. HTMX propose un certain nombre de m\u00e9thodes \u00e9l\u00e9gantes pour y parvenir :<\/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>\nLe formulaire utilise les attributs hx-post<\/code> et hx-target<\/code> pour d\u00e9velopper sa cible. Vous pouvez \u00e9galement utiliser les attributs HTMX pour pr\u00e9server les entr\u00e9es du formulaire<\/a> apr\u00e8s une erreur ou une autre tentative de validation qui utilise des rafra\u00eechissements :<\/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>\nIci, vous placez l’entr\u00e9e du fichier binaire en dehors de l’\u00e9l\u00e9ment principal du formulaire et vous utilisez les attributs hx-swap<\/code> et hx-target<\/code>.<\/p>\nChargement dynamique<\/h3>\n
Cette approche du rafra\u00eechissement et du chargement dynamiques peut \u00e9galement convenir \u00e0 des t\u00e2ches plus courantes. Prenez par exemple le d\u00e9filement infini<\/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’attribut hx-swap<\/code> agit comme un \u00ab\u00a0auditeur\u00a0\u00bb pour l’attribut hx-trigger<\/code>. Lorsque l’utilisateur atteint la fin de la liste, HTMX charge la deuxi\u00e8me page de contacts \u00e0 l’infini.<\/p>\nVous pouvez \u00e9galement appliquer la m\u00eame m\u00e9thode \u00e0 la fonctionnalit\u00e9 de chargement diff\u00e9r\u00e9<\/a> :<\/p>\n![\"Utiliser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/lazy-loading-gif.gif\")
Utiliser HTMX pour mettre en \u0153uvre le chargement diff\u00e9r\u00e9.<\/figcaption><\/figure>\nCette m\u00e9thode utilise \u00e0 nouveau les attributs hx-get<\/code> et hx-trigger<\/code> pour lancer une transition htmx-settling afin de charger le graphique \u00e0 l’aide d’un fondu encha\u00een\u00e9 lent.<\/p>\nPr\u00e9sentation des donn\u00e9es<\/h3>\n
Il n’est pas surprenant que HTMX soit excellent pour la pr\u00e9sentation d’informations \u00e0 l’\u00e9cran \u00e0 l’aide d’\u00e9l\u00e9ments interactifs ou dynamiques.<\/p>\n
Par exemple, vous pouvez mettre en \u0153uvre tous les types de filtrage de contenu, tels que les s\u00e9lections de valeurs<\/a>. Dans ce cas, les options d’une liste se remplissent en fonction de celles d’une autre liste :<\/p>\n![\"Utilisation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/value-select-gif.gif\")
Utilisation de HTMX pour attribuer des s\u00e9lections de valeurs aux \u00e9l\u00e9ments du site.<\/figcaption><\/figure>\nVous pouvez m\u00eame mettre en place des bo\u00eetes de dialogue modales<\/a> ou des onglets d’interface avec autant de facilit\u00e9. Cet exemple montre \u00e9galement comment HTMX fonctionne avec d’autres biblioth\u00e8ques et frameworks, tels que Bootstrap :<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/modal-box-gif.gif\")
Ouverture d’une bo\u00eete de dialogue modale \u00e0 l’aide de HTMX.<\/figcaption><\/figure>\nCette flexibilit\u00e9 s’\u00e9tend \u00e9galement \u00e0 la mise en \u0153uvre des onglets. Il y a deux fa\u00e7ons de le faire : soit en combinant le JavaScript vanilla<\/a> et le HTMX, soit en utilisant les principes de l’Hypertext As The Engine Of Application State (HATEOAS<\/a> ) :<\/p>\n![\"GIF](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/content-tabs.gif\")
GIF d’une interface \u00e0 onglets utilisant HTMX.<\/figcaption><\/figure>\nIl existe de nombreuses autres fa\u00e7ons d’utiliser HTMX pour des \u00e9l\u00e9ments de site frontaux, le c\u0153ur de l’application se trouvant du c\u00f4t\u00e9 serveur. Dans la section suivante, nous vous donnerons les outils n\u00e9cessaires pour cr\u00e9er votre propre vision au sein de WordPress.<\/p>\n
Comment int\u00e9grer HTMX dans WordPress<\/h2>\n
Si vous souhaitez ajouter HTMX \u00e0 votre site web WordPress, la bonne nouvelle est que c’est rapide et sans douleur. Nous allons maintenant vous pr\u00e9senter une approche en trois \u00e9tapes. Nous ne couvrirons pas l’ensemble du processus et du code pour d\u00e9velopper des fonctionnalit\u00e9s pour WordPress, mais nous aborderons tous les points cl\u00e9s que vous devez suivre.<\/p>\n
De plus, une grande partie du processus, en particulier la premi\u00e8re \u00e9tape, devrait \u00eatre typique si vous avez d\u00e9j\u00e0 d\u00e9velopp\u00e9 pour WordPress.<\/p>\n
1. Enqueue HTMX dans votre code PHP<\/h3>\n
Comme pour tout script suppl\u00e9mentaire pour WordPress, vous devez inclure la biblioth\u00e8que HTMX dans le code de votre th\u00e8me ou de votre 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
En r\u00e9sum\u00e9, HTMX<\/a> est une biblioth\u00e8que JavaScript qui \u00e9tend le langage de balisage hypertexte (HTML)<\/a> standard sans qu’il soit n\u00e9cessaire d’\u00e9crire du JavaScript<\/a> vanilla ou framework. Ces extensions vous permettent \u00e9galement d’acc\u00e9der \u00e0 d’autres technologies :<\/p>\n \u00c0 la base, HTMX vise \u00e0 simplifier la cr\u00e9ation d’applications web dynamiques et interactives. Sa principale fonctionnalit\u00e9 r\u00e9side dans sa capacit\u00e9 \u00e0 effectuer des requ\u00eates HTTP<\/a> La biblioth\u00e8que HTMX a r\u00e9cemment fait l’objet d’un v\u00e9ritable engouement, les recherches la concernant ayant explos\u00e9 au cours des cinq derni\u00e8res ann\u00e9es<\/a>.<\/p>\n Ce regain de popularit\u00e9 est en partie d\u00fb \u00e0 la visibilit\u00e9 des m\u00e9dias sociaux et des forums de d\u00e9veloppeurs. Cependant, HTMX pr\u00e9sente plusieurs facteurs qui en font une option de d\u00e9veloppement attrayante.<\/p>\n En outre, contrairement \u00e0 d’autres frameworks plus importants, HTMX ne n\u00e9cessite pas de processus de construction ou de cha\u00eene d’outils complexes. Gr\u00e2ce \u00e0 une courbe d’apprentissage beaucoup moins prononc\u00e9e, l’int\u00e9gration de la biblioth\u00e8que dans vos projets est plus facile.<\/p>\n Ces avantages, \u00e0 leur tour, conduisent \u00e0 une plus grande discussion et \u00e0 l’adoption de HTMX. Si vous recherchez une solution plus simple pour cr\u00e9er des exp\u00e9riences web interactives, cette biblioth\u00e8que pourrait \u00eatre votre choix.<\/p>\n L’histoire de WordPress avec JavaScript s’est acc\u00e9l\u00e9r\u00e9e depuis le State of the Word 2015<\/a>, lorsque Matt Mullenweg a conclu en disant : \u00ab Apprenez JavaScript en profondeur. \u00bb<\/p>\n Le chemin typique pour les d\u00e9veloppeurs de WordPress \u00e9tait de rechercher le besoin de composants interactifs et dynamiques sur un site web. Dans la plupart des cas, jQuery<\/a> a \u00e9t\u00e9 le framework JavaScript de WordPress. M\u00eame le tr\u00e8s populaire site web de la Harvard Gazette<\/a> repose sur jQuery :<\/p>\n Ainsi, WordPress met en file d’attente jQuery<\/a> par d\u00e9faut. En outre, de nombreuses fonctionnalit\u00e9s de base, des extensions et des th\u00e8mes sont largement utilis\u00e9s. Cette approche est coh\u00e9rente et b\u00e9n\u00e9ficie d’un large soutien.<\/p>\n Cependant, \u00e0 mesure que le d\u00e9veloppement web \u00e9volue, l’approche de WordPress en mati\u00e8re de JavaScript \u00e9volue \u00e9galement. L’introduction de l’\u00e9diteur de blocs<\/a> s’est accompagn\u00e9e d’une \u00e9volution vers l’utilisation du framework React<\/a> pour la construction d’interfaces utilisateur, en particulier dans le tableau de bord de WordPress.<\/p>\n Cela signifie qu’il y a un m\u00e9lange de frameworks avec un support dans le code de base de WordPress. Il y a des avantages et des inconv\u00e9nients \u00e0 cela. Tout d’abord, les points positifs :<\/p>\n Cependant, ces avantages sont contrebalanc\u00e9s par une s\u00e9rie d’inconv\u00e9nients :<\/p>\n L’architecture JavaScript actuelle de WordPress convient si vous avez les connaissances en d\u00e9veloppement des frameworks recommand\u00e9s ou le temps de les apprendre. Si ce n’est pas le cas, vous aurez probablement besoin d’une solution qui ne soit pas aussi complexe que les frameworks typiques, tout en offrant une exp\u00e9rience interactive moderne sur le frontend. C’est l\u00e0 que HTMX doit \u00eatre envisag\u00e9.<\/p>\n HTMX offre quelques avantages convaincants pour le d\u00e9veloppement de WordPress. Il pourrait constituer une solution interm\u00e9diaire entre la simplicit\u00e9 de jQuery et la modernit\u00e9 et la performance de React.<\/p>\n Nous avons d\u00e9j\u00e0 \u00e9voqu\u00e9 certains de ces aspects, mais r\u00e9capitulons-les bri\u00e8vement :<\/p>\n Pour le d\u00e9veloppement de WordPress, nous appr\u00e9cions \u00e9galement la facilit\u00e9 avec laquelle vous pouvez prototyper de nouvelles fonctionnalit\u00e9s pour un site. Vous pouvez rapidement d\u00e9velopper de nouvelles fonctionnalit\u00e9s complexes en codant dans le code HTML existant. \u00c0 partir de l\u00e0, vous avez la possibilit\u00e9 d’ajouter des composants React ou un peu de jQuery si n\u00e9cessaire.<\/p>\n Les principes d’am\u00e9lioration progressive de HTMX sont \u00e9galement int\u00e9ressants. L’accessibilit\u00e9 doit \u00eatre au c\u0153ur de votre strat\u00e9gie de conception, et HTMX peut vous permettre de d\u00e9velopper l’interactivit\u00e9 sans la briser pour ceux qui choisissent de d\u00e9sactiver JavaScript dans le navigateur.<\/p>\n Enfin, l’un des principaux avantages du HTMX est qu’il ne n\u00e9cessite aucune configuration personnalis\u00e9e ou sp\u00e9ciale c\u00f4t\u00e9 serveur. Vous pouvez utiliser votre balisage HTMX avec n’importe quel h\u00e9bergeur, y compris Kinsta<\/a>.<\/p>\n Compte tenu de la qualit\u00e9 de nos services d’h\u00e9bergement, un site utilisant HTMX devrait se d\u00e9velopper rapidement. Cela aura un impact sur les mesures de r\u00e9f\u00e9rencement, les chiffres du trafic, le temps de d\u00e9veloppement, le flux de travail de d\u00e9pannage et l’ensemble de la cha\u00eene de d\u00e9veloppement.<\/p>\n Nous l’avons \u00e9voqu\u00e9 dans la derni\u00e8re section, mais HTMX ne sera pas une biblioth\u00e8que que vous utiliserez pour remplacer directement l’un des frameworks JavaScript les plus connus. Au contraire, elle fonctionnera mieux en compl\u00e9ment de ce qui existe d\u00e9j\u00e0 pour aider \u00e0 supporter la charge si n\u00e9cessaire.<\/p>\n Cela signifie que vous utiliserez HTMX pour certaines t\u00e2ches pour lesquelles jQuery et React ne sont peut-\u00eatre pas optimaux. Avant de plonger dans l’impl\u00e9mentation de HTMX dans WordPress, nous allons vous pr\u00e9senter trois sc\u00e9narios courants dans lesquels la biblioth\u00e8que pourrait am\u00e9liorer WordPress.<\/p>\n Le principal cas d’utilisation de HTMX est la fa\u00e7on dont vous pouvez mettre en \u0153uvre des rafra\u00eechissements partiels de page avec un minimum d’agitation. Cela pourrait \u00eatre une grande affaire pour de nombreux d\u00e9veloppeurs, en particulier pour les maquettes et les prototypes rapides. Cependant, HTMX pourrait vous permettre d’obtenir des r\u00e9sultats dignes d’une production.<\/p>\n Par exemple, il pourrait vous aider \u00e0 mettre en \u0153uvre une fonctionnalit\u00e9 de recherche en direct sur votre site :<\/p>\n La biblioth\u00e8que d’exemples<\/a> HTMX aborde \u00e9galement la m\u00e9thodologie permettant d’effectuer des mises \u00e0 jour en temps r\u00e9el sur d’autres zones de contenu de la page. Par exemple, cet exemple<\/a> utilise un formulaire de contact avec un tableau des contacts disponibles qui s’actualise d\u00e8s qu’un utilisateur soumet un nouvel ajout. HTMX propose un certain nombre de m\u00e9thodes \u00e9l\u00e9gantes pour y parvenir :<\/p>\n Le formulaire utilise les attributs Ici, vous placez l’entr\u00e9e du fichier binaire en dehors de l’\u00e9l\u00e9ment principal du formulaire et vous utilisez les attributs Cette approche du rafra\u00eechissement et du chargement dynamiques peut \u00e9galement convenir \u00e0 des t\u00e2ches plus courantes. Prenez par exemple le d\u00e9filement infini<\/a>:<\/p>\n L’attribut Vous pouvez \u00e9galement appliquer la m\u00eame m\u00e9thode \u00e0 la fonctionnalit\u00e9 de chargement diff\u00e9r\u00e9<\/a> :<\/p>\n Cette m\u00e9thode utilise \u00e0 nouveau les attributs Il n’est pas surprenant que HTMX soit excellent pour la pr\u00e9sentation d’informations \u00e0 l’\u00e9cran \u00e0 l’aide d’\u00e9l\u00e9ments interactifs ou dynamiques.<\/p>\n Par exemple, vous pouvez mettre en \u0153uvre tous les types de filtrage de contenu, tels que les s\u00e9lections de valeurs<\/a>. Dans ce cas, les options d’une liste se remplissent en fonction de celles d’une autre liste :<\/p>\n Vous pouvez m\u00eame mettre en place des bo\u00eetes de dialogue modales<\/a> ou des onglets d’interface avec autant de facilit\u00e9. Cet exemple montre \u00e9galement comment HTMX fonctionne avec d’autres biblioth\u00e8ques et frameworks, tels que Bootstrap :<\/p>\n Cette flexibilit\u00e9 s’\u00e9tend \u00e9galement \u00e0 la mise en \u0153uvre des onglets. Il y a deux fa\u00e7ons de le faire : soit en combinant le JavaScript vanilla<\/a> et le HTMX, soit en utilisant les principes de l’Hypertext As The Engine Of Application State (HATEOAS<\/a> ) :<\/p>\n Il existe de nombreuses autres fa\u00e7ons d’utiliser HTMX pour des \u00e9l\u00e9ments de site frontaux, le c\u0153ur de l’application se trouvant du c\u00f4t\u00e9 serveur. Dans la section suivante, nous vous donnerons les outils n\u00e9cessaires pour cr\u00e9er votre propre vision au sein de WordPress.<\/p>\n Si vous souhaitez ajouter HTMX \u00e0 votre site web WordPress, la bonne nouvelle est que c’est rapide et sans douleur. Nous allons maintenant vous pr\u00e9senter une approche en trois \u00e9tapes. Nous ne couvrirons pas l’ensemble du processus et du code pour d\u00e9velopper des fonctionnalit\u00e9s pour WordPress, mais nous aborderons tous les points cl\u00e9s que vous devez suivre.<\/p>\n De plus, une grande partie du processus, en particulier la premi\u00e8re \u00e9tape, devrait \u00eatre typique si vous avez d\u00e9j\u00e0 d\u00e9velopp\u00e9 pour WordPress.<\/p>\n Comme pour tout script suppl\u00e9mentaire pour WordPress, vous devez inclure la biblioth\u00e8que HTMX dans le code de votre th\u00e8me ou de votre plugin.<\/p>\n\n
GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code>, et DELETE<\/code> \u00e0 partir d’\u00e9l\u00e9ments HTML. Cela signifie que vous pouvez traiter des mises \u00e0 jour partielles de pages en douceur comme une application mobile. Dans l’ensemble, HTMX est une bo\u00eete \u00e0 outils puissante qui vous aide \u00e0 cr\u00e9er une exp\u00e9rience web dynamique sans avoir besoin de quantit\u00e9s de code JavaScript.<\/p>\nPourquoi nous parlons tous de HTMX<\/h2>\n
\n
L’architecture de WordPress en relation avec JavaScript<\/h2>\n
Les avantages et les inconv\u00e9nients de l’utilisation de l’impl\u00e9mentation JavaScript actuelle de WordPress<\/h3>\n
\n
wp_ajax<\/code>.<\/li>\n<\/ul>\n\n
Pourquoi HTMX pourrait \u00eatre mieux adapt\u00e9 \u00e0 certaines t\u00e2ches de d\u00e9veloppement WordPress ?<\/h2>\n
\n
Cas d’utilisation typiques pour HTMX<\/h2>\n
Rechargements partiels de pages<\/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> et hx-target<\/code> pour d\u00e9velopper sa cible. Vous pouvez \u00e9galement utiliser les attributs HTMX pour pr\u00e9server les entr\u00e9es du formulaire<\/a> apr\u00e8s une erreur ou une autre tentative de validation qui utilise des rafra\u00eechissements :<\/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> et hx-target<\/code>.<\/p>\nChargement dynamique<\/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> agit comme un \u00ab\u00a0auditeur\u00a0\u00bb pour l’attribut hx-trigger<\/code>. Lorsque l’utilisateur atteint la fin de la liste, HTMX charge la deuxi\u00e8me page de contacts \u00e0 l’infini.<\/p>\nhx-get<\/code> et hx-trigger<\/code> pour lancer une transition htmx-settling afin de charger le graphique \u00e0 l’aide d’un fondu encha\u00een\u00e9 lent.<\/p>\nPr\u00e9sentation des donn\u00e9es<\/h3>\n
Comment int\u00e9grer HTMX dans WordPress<\/h2>\n
1. Enqueue HTMX dans votre code 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