Surcharger WordPress avec HTMX : comment améliorer la plateforme sans utiliser de frameworks complexes

Bien qu’il existe de nombreux langages acceptables pour coder, le développement web se stabilise autour de quelques technologies fiables. C’est particulièrement vrai pour WordPress.

JavaScript est encore en train de mûrir pour la plateforme, bien que les attentes des utilisateurs en matière de sites web dynamiques et interactifs soient toujours d’actualité. Les frameworks peuvent combler cette lacune, mais la complexité de certains des plus populaires d’entre eux peut entraver votre développement. Entrez dans HTMX. Cette bibliothèque légère promet d’offrir convivialité et simplification lors de la création d’expériences web modernes.

Dans cet article, nous allons explorer comment HTMX peut s’intégrer dans votre propre flux de développement WordPress. Vous apprendrez à utiliser cette méthode puissante et accessible pour créer du contenu dynamique et de l’interactivité.

Nous verrons ce qu’est HTMX, pourquoi il gagne du terrain et comment il se connecte à WordPress. Vous obtiendrez également un guide pratique sur l’intégration et l’utilisation de HTMX avec WordPress.

Ce qu’est HTMX

En résumé, HTMX est une bibliothèque JavaScript qui étend le langage de balisage hypertexte (HTML) standard sans qu’il soit nécessaire d’écrire du JavaScript vanilla ou framework. Ces extensions vous permettent également d’accéder à d’autres technologies :

• Asynchronous JavaScript and XML (AJAX). HTMX utilise AJAX pour effectuer des requêtes « asynchrones » au serveur. Cela vous permet d’effectuer des mises à jour partielles de la page sans avoir à la recharger entièrement.
• WebSockets. Vous pouvez établir des connexions WebSocket et permettre une communication bidirectionnelle en temps réel entre le navigateur et le serveur.
• Évènements envoyés par le serveur Server-Sent-Transition ou (SSE). Cette technologie permet au serveur de transmettre des données au navigateur. À partir de là, vous pouvez utiliser HTMX pour effectuer des mises à jour de page en temps réel.
• Transitions CSS. Vous pouvez intégrer les transitions CSS, qui vous permettent de mettre en œuvre des mises à jour fluides et animées sur votre site.

À la base, HTMX vise à simplifier la création d’applications web dynamiques et interactives. Sa principale fonctionnalité réside dans sa capacité à effectuer des requêtes HTTP GET, POST, PUT, PATCH, et DELETE à partir d’éléments HTML. Cela signifie que vous pouvez traiter des mises à jour partielles de pages en douceur comme une application mobile. Dans l’ensemble, HTMX est une boîte à outils puissante qui vous aide à créer une expérience web dynamique sans avoir besoin de quantités de code JavaScript.

Pourquoi nous parlons tous de HTMX

La bibliothèque HTMX a récemment fait l’objet d’un véritable engouement, les recherches la concernant ayant explosé au cours des cinq dernières années.

Ce regain de popularité est en partie dû à la visibilité des médias sociaux et des forums de développeurs. Cependant, HTMX présente plusieurs facteurs qui en font une option de développement attrayante.

• Simplicité. Comme HTMX utilise la syntaxe HTML familière pour vous aider à créer des applications web dynamiques et interactives, il est très simple à mettre en œuvre et ne présente pratiquement aucune des complexités des frameworks JavaScript typiques.
• Performance. En minimisant la quantité de JavaScript nécessaire, HTMX peut offrir des temps de chargement plus rapides et de meilleures performances que d’autres frameworks, en particulier pour les appareils mobiles.
• Rendu côté serveur. Le rendu côté serveur est idéal si vous souhaitez améliorer les temps de chargement initiaux des pages et l’optimisation pour les moteurs de recherche (SEO). HTMX l’intègre dans son ensemble de fonctionnalités.
• Amélioration progressive. Il s’agit d’ajouter de l’interactivité aux sites web sans interrompre les fonctionnalités pour ceux qui désactivent JavaScript. HTMX fonctionne selon ces principes, ce qui vous permet de bénéficier d’un avantage en termes d’accessibilité.

En outre, contrairement à d’autres frameworks plus importants, HTMX ne nécessite pas de processus de construction ou de chaîne d’outils complexes. Grâce à une courbe d’apprentissage beaucoup moins prononcée, l’intégration de la bibliothèque dans vos projets est plus facile.

Ces avantages, à leur tour, conduisent à une plus grande discussion et à l’adoption de HTMX. Si vous recherchez une solution plus simple pour créer des expériences web interactives, cette bibliothèque pourrait être votre choix.

L’architecture de WordPress en relation avec JavaScript

L’histoire de WordPress avec JavaScript s’est accélérée depuis le State of the Word 2015, lorsque Matt Mullenweg a conclu en disant : « Apprenez JavaScript en profondeur. »

Le chemin typique pour les développeurs de WordPress était de rechercher le besoin de composants interactifs et dynamiques sur un site web. Dans la plupart des cas, jQuery a été le framework JavaScript de WordPress. Même le très populaire site web de la Harvard Gazette repose sur jQuery :

Ainsi, WordPress met en file d’attente jQuery par défaut. En outre, de nombreuses fonctionnalités de base, des extensions et des thèmes sont largement utilisés. Cette approche est cohérente et bénéficie d’un large soutien.

Cependant, à mesure que le développement web évolue, l’approche de WordPress en matière de JavaScript évolue également. L’introduction de l’éditeur de blocs s’est accompagnée d’une évolution vers l’utilisation du framework React pour la construction d’interfaces utilisateur, en particulier dans le tableau de bord de WordPress.

Les avantages et les inconvénients de l’utilisation de l’implémentation JavaScript actuelle de WordPress

Cela signifie qu’il y a un mélange de frameworks avec un support dans le code de base de WordPress. Il y a des avantages et des inconvénients à cela. Tout d’abord, les points positifs :

• Il y a une compatibilité étendue pour React et jQuery. Pour le premier, il s’agit d’un framework puissant et populaire. Quant à jQuery, il est associé depuis longtemps à WordPress.
• De nombreux développeurs connaissent les frameworks parce que React et jQuery sont populaires. De plus, vous pouvez trouver plus de ressources pour apprendre et dépanner les deux.
• WordPress offre un support intégré pour AJAX à travers wp_ajax.

Cependant, ces avantages sont contrebalancés par une série d’inconvénients :

• L’utilisation de jQuery nuit aux performances de votre site, et vous n’aurez peut-être pas besoin de ce framework pour certaines applications.
• Toutes les caractéristiques et fonctionnalités « modernes » de JavaScript ne sont pas implémentées dans WordPress pour des raisons de compatibilité et de sécurité. Cela peut constituer un problème si vous souhaitez créer quelque chose de particulier.
• Avec l’ajout de React dans certaines parties de WordPress (comme les éditeurs de blocs et de sites), vous avez une courbe d’apprentissage encore plus grande qu’auparavant.

L’architecture JavaScript actuelle de WordPress convient si vous avez les connaissances en développement des frameworks recommandés 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érience interactive moderne sur le frontend. C’est là que HTMX doit être envisagé.

Pourquoi HTMX pourrait être mieux adapté à certaines tâches de développement WordPress ?

HTMX offre quelques avantages convaincants pour le développement de WordPress. Il pourrait constituer une solution intermédiaire entre la simplicité de jQuery et la modernité et la performance de React.

Nous avons déjà évoqué certains de ces aspects, mais récapitulons-les brièvement :

• Le « poids » de HTMX peut avoir un impact important sur les performances par rapport à jQuery et React.
• La plupart des développeurs WordPress se considèrent plus compétents en HTML et PHP qu’en JavaScript. HTMX présente une barrière d’entrée plus facile à franchir au fur et à mesure que vous travaillez avec lui, un peu comme un langage de balisage.
• PHP et HTMX fonctionneront également bien ensemble, grâce au rendu côté serveur, ce qui pourrait avoir un impact positif sur les performances.
• Bien qu’il s’agisse d’une bibliothèque plus « récente », vous pouvez intégrer HTMX plus facilement et vous familiariser avec son fonctionnement. Votre flux de travail en bénéficiera.

Pour le développement de WordPress, nous apprécions également la facilité avec laquelle vous pouvez prototyper de nouvelles fonctionnalités pour un site. Vous pouvez rapidement développer de nouvelles fonctionnalités complexes en codant dans le code HTML existant. À partir de là, vous avez la possibilité d’ajouter des composants React ou un peu de jQuery si nécessaire.

Les principes d’amélioration progressive de HTMX sont également intéressants. L’accessibilité doit être au cœur de votre stratégie de conception, et HTMX peut vous permettre de développer l’interactivité sans la briser pour ceux qui choisissent de désactiver JavaScript dans le navigateur.

Enfin, l’un des principaux avantages du HTMX est qu’il ne nécessite aucune configuration personnalisée ou spéciale côté serveur. Vous pouvez utiliser votre balisage HTMX avec n’importe quel hébergeur, y compris Kinsta.

Compte tenu de la qualité de nos services d’hébergement, un site utilisant HTMX devrait se développer rapidement. Cela aura un impact sur les mesures de référencement, les chiffres du trafic, le temps de développement, le flux de travail de dépannage et l’ensemble de la chaîne de développement.

Cas d’utilisation typiques pour HTMX

Nous l’avons évoqué dans la dernière section, mais HTMX ne sera pas une bibliothèque que vous utiliserez pour remplacer directement l’un des frameworks JavaScript les plus connus. Au contraire, elle fonctionnera mieux en complément de ce qui existe déjà pour aider à supporter la charge si nécessaire.

Cela signifie que vous utiliserez HTMX pour certaines tâches pour lesquelles jQuery et React ne sont peut-être pas optimaux. Avant de plonger dans l’implémentation de HTMX dans WordPress, nous allons vous présenter trois scénarios courants dans lesquels la bibliothèque pourrait améliorer WordPress.

Rechargements partiels de pages

Le principal cas d’utilisation de HTMX est la façon dont vous pouvez mettre en œuvre des rafraîchissements partiels de page avec un minimum d’agitation. Cela pourrait être une grande affaire pour de nombreux développeurs, en particulier pour les maquettes et les prototypes rapides. Cependant, HTMX pourrait vous permettre d’obtenir des résultats dignes d’une production.

Par exemple, il pourrait vous aider à mettre en œuvre une fonctionnalité de recherche en direct sur votre site :

La bibliothèque d’exemples HTMX aborde également la méthodologie permettant d’effectuer des mises à jour en temps réel sur d’autres zones de contenu de la page. Par exemple, cet exemple utilise un formulaire de contact avec un tableau des contacts disponibles qui s’actualise dès qu’un utilisateur soumet un nouvel ajout. HTMX propose un certain nombre de méthodes élégantes pour y parvenir :

<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>

Le formulaire utilise les attributs hx-post et hx-target pour développer sa cible. Vous pouvez également utiliser les attributs HTMX pour préserver les entrées du formulaire après une erreur ou une autre tentative de validation qui utilise des rafraîchissements :

<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>

Ici, vous placez l’entrée du fichier binaire en dehors de l’élément principal du formulaire et vous utilisez les attributs hx-swap et hx-target.

Chargement dynamique

Cette approche du rafraîchissement et du chargement dynamiques peut également convenir à des tâches plus courantes. Prenez par exemple le défilement infini:

<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’attribut hx-swap agit comme un « auditeur » pour l’attribut hx-trigger. Lorsque l’utilisateur atteint la fin de la liste, HTMX charge la deuxième page de contacts à l’infini.

Vous pouvez également appliquer la même méthode à la fonctionnalité de chargement différé :

Cette méthode utilise à nouveau les attributs hx-get et hx-trigger pour lancer une transition htmx-settling afin de charger le graphique à l’aide d’un fondu enchaîné lent.

Présentation des données

Il n’est pas surprenant que HTMX soit excellent pour la présentation d’informations à l’écran à l’aide d’éléments interactifs ou dynamiques.

Par exemple, vous pouvez mettre en œuvre tous les types de filtrage de contenu, tels que les sélections de valeurs. Dans ce cas, les options d’une liste se remplissent en fonction de celles d’une autre liste :

Vous pouvez même mettre en place des boîtes de dialogue modales ou des onglets d’interface avec autant de facilité. Cet exemple montre également comment HTMX fonctionne avec d’autres bibliothèques et frameworks, tels que Bootstrap :

Cette flexibilité s’étend également à la mise en œuvre des onglets. Il y a deux façons de le faire : soit en combinant le JavaScript vanilla et le HTMX, soit en utilisant les principes de l’Hypertext As The Engine Of Application State (HATEOAS ) :

Il existe de nombreuses autres façons d’utiliser HTMX pour des éléments de site frontaux, le cœur de l’application se trouvant du côté serveur. Dans la section suivante, nous vous donnerons les outils nécessaires pour créer votre propre vision au sein de WordPress.

Comment intégrer HTMX dans WordPress

Si vous souhaitez ajouter HTMX à votre site web WordPress, la bonne nouvelle est que c’est rapide et sans douleur. Nous allons maintenant vous présenter une approche en trois étapes. Nous ne couvrirons pas l’ensemble du processus et du code pour développer des fonctionnalités pour WordPress, mais nous aborderons tous les points clés que vous devez suivre.

De plus, une grande partie du processus, en particulier la première étape, devrait être typique si vous avez déjà développé pour WordPress.

1. Enqueue HTMX dans votre code PHP

Comme pour tout script supplémentaire pour WordPress, vous devez inclure la bibliothèque HTMX dans le code de votre thème ou de votre plugin.

wp_enqueue_script('htmx-script', 'https://unpkg.com/[email protected]/dist/htmx.min.js', array(), '2.0.0', true);

Note : Le guide de démarrage rapide du HTMX appelle la bibliothèque à partir d’un réseau de diffusion de contenu (CDN). Vous devez décider si c’est une bonne idée pour votre projet.

Cependant, une bonne idée objective est d’envelopper cet enqueue dans une fonction qui enqueue et enregistre également un bloc dans WordPress. Bien sûr, cela dépend si votre projet nécessite que vous travailliez avec l’éditeur de blocs.

La dernière partie de l’enqueue HTMX consiste à invoquer la fonction entière à l’aide de add_action. Vous devrez revenir sur l’utilisation des crochets et des filtres plus tard lorsque vous travaillerez avec des requêtes AJAX.

2. Ajouter des éléments HTMX à vos modèles WordPress

D’après nos cas d’utilisation, vous verrez que HTMX a besoin d’un balisage approprié dans le HTML pour gérer et déclencher des requêtes AJAX. La bibliothèque utilise les attributs de requête HTTP typiques pour créer les siens – GET, POST, PUSH, PATCH, et DELETE – avec un préfixe hx-:

hx-post

Les requêtes AJAX de WordPress utilisent le point de terminaison admin-ajax.php, dont vous devez vous souvenir ! Les éléments typiques que vous créerez avec HTMX émettront une requête AJAX, l’enverront à un élément cible et traiteront éventuellement un déclencheur.

L’attribut hx-target vous permet de spécifier où ira le résultat de votre requête. Il peut s’agir d’une autre page, d’une page spécifique div, ou d’autre chose. Pensez-y comme aux balises d’ancrage 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 utilise les termes « naturel » et « non naturel » pour définir une action. Par exemple, submit déclenchera un formulaire, ce qui constitue un évènement d’élément naturel. Pour les évènements d’éléments non naturels, vous utiliserez l’attribut hx-trigger. Ces déclencheurs peuvent constituer l’une des parties les plus complexes de HTMX, tout en restant simples à comprendre.

Par exemple, vous pouvez utiliser un déclencheur pour surveiller un champ de saisie :

…
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 modification du contenu d’un champ de saisie déclenchera une mise à jour ailleurs sur la page. Autre exemple, vous pourriez vouloir déclencher un événement une seule fois en fonction d’une action atypique, telle que l’entrée du curseur dans une partie de l’écran :

<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
    [Here Mouse, Mouse!]
</div>

Cela pourrait vous inciter à créer des applications telles que des fenêtres popup ou d’autres boîtes modales. Toutefois, avant de pouvoir les voir à l’œuvre, vous devez traiter la requête AJAX.

3. Traiter les requêtes AJAX

Enfin, vous devez traiter la requête AJAX du côté du serveur. Pour WordPress, il est préférable de stocker tout cela dans un fichier séparé. Vous pouvez l’appeler comme vous le souhaitez, mais ajax-functions.php est suffisamment descriptif et clair.

Cette partie de l’utilisation de HTMX nécessitera que vous mettiez à profit vos compétences en PHP. Le traitement de vos requêtes AJAX sera propre à votre projet. C’est l’endroit où vous liez les attributs que vous nommez dans vos fichiers de modèle au traitement côté serveur.

Bien sûr, vous feriez cela de toute façon, que vous codiez avec HTMX, du JavaScript classique ou autre chose. Voici un peu de pseudo-code pour vous montrer à quoi cela peut ressembler :

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();
}

Malgré tout, il se peut que cela ne soit pas pertinent ou même que cela ne ressemble pas à la gestion AJAX de votre propre projet. Les mêmes compétences que vous utiliserez pour construire des modèles de blocs, étendre les extensions en utilisant PHP, et plus encore, vous aideront à créer vos propres fonctions et gestionnaires de requêtes AJAX.

Conseils pour l’utilisation de HTMX avec WordPress

Bien que l’utilisation de HTMX soit l’une des façons les plus simples de mettre en place un contenu dynamique avec WordPress, elle nécessite toujours une gestion et une attention particulières. Il existe également quelques moyens d’améliorer votre expérience de développement.

Le premier conseil concerne la « maturité » de HTMX. Pour l’instant, il s’agit d’une nouvelle bibliothèque pour la plateforme, qui n’a donc pas le même niveau d’intégration que jQuery, par exemple.

HTMX dispose d’une excellente documentation, mais il n’y a pas autant de ressources pour combiner la bibliothèque avec WordPress. Cela signifie que vous devrez faire le travail de base pour faire fonctionner les choses sans le filet de sécurité d’une communauté prête à l’emploi.

L’un des principaux conseils que nous pouvons vous donner est d’intégrer votre fonctionnalité dans une extension pour l’instant. Cela vous permettra d’avoir une structure et une gestion plus facile pendant que vous vérifiez les bogues et autres erreurs d’intégration.

Puisque nous parlons de WordPress, cherchez à comprendre comment le fichier admin-ajax.php se connecte au reste de l’écosystème, car de nombreuses interactions l’impliqueront.

Bien que HTMX soit très performant, vous devez vous assurer que l’utilisation d’AJAX est suffisamment faible pour ne pas avoir d’impact sur les vitesses de chargement de votre site ou sur le référencement. Le débogage des requêtes doit également faire partie de votre flux de travail, en particulier les mesures XMLHttpRequest (XHR) dans les outils de développement de votre navigateur.

Il s’agit de l’enregistrement des données de requête et de réponse, que vous utiliserez pour déboguer les requêtes AJAX et les appels à l’interface de programmation d’applications (API). Étant donné que HTMX ne dispose pas encore d’une intégration étroite avec WordPress, le débogage peut s’avérer une tâche plus pertinente qu’avec d’autres cadres JavaScript.

Résumé

Pour les développeurs WordPress qui souhaitent créer des éléments de site dynamiques et interactifs sans que des frameworks JavaScript complexes ne dominent leur temps, HTMX est une solution intéressante. Il vous permet de construire en HTML et offre une alternative mince à jQuery et React tout en vous offrant une interactivité moderne.

En pratique, vous utiliserez HTMX en même temps que ces autres frameworks, car il ne conviendra pas à toutes les tâches. Malgré cela, il est simple à mettre en œuvre et vous offre un moyen rapide de prototyper les éléments interactifs de votre site – et pourrait même devenir votre version de production.

HTMX et WordPress vous semblent-ils une combinaison alléchante ? Faites-nous part de vos commentaires dans la section ci-dessous !

Jeremy Holcombe Kinsta

Rédacteur en chef du contenu et du marketing chez Kinsta, développeur web WordPress et rédacteur de contenu. En dehors de WordPress, j'aime la plage, le golf et le cinéma. J'ai aussi des problèmes avec les personnes de grande taille ;).

• LinkedIn