HTML : l'avenir du Web

HTMX : rationaliser le développement Web avec des interactions centrées sur HTML

Cet article explore mon expérience d'intégration de HTMX dans une plate-forme SaaS construite avec Tailwind CSS (frontend), Python et Flask (backend). Bien que je connaisse les autres technologies, HTMX est un nouvel ajout à ma boîte à outils. Cet article détaille sa mise en œuvre.

Architecture orientée JSON : le défi

Avant de se lancer dans le HTMX, il est crucial de comprendre sa cible. Les applications full-stack traditionnelles s'appuient souvent sur une architecture orientée JSON. Le backend envoie des données JSON et le frontend les restitue. Cette approche, tout en améliorant l'interactivité, souffre d'une surcharge de données importante. Les charges utiles JSON peuvent être 10 fois plus volumineuses que celles en HTML équivalent, ce qui entraîne un ralentissement des performances.

HTMX : un changement de paradigme

HTMX résout cette inefficacité en plaidant pour que le serveur renvoie directement le HTML. Cela minimise le transfert de données, améliorant ainsi l'expérience utilisateur. HTMX va au-delà du simple remplacement de JSON ; il intègre étroitement la logique côté serveur et côté client, ce qui se traduit par des interactions plus rapides et plus réactives.

Il est essentiel que HTMX ne remplace pas JavaScript. Il nécessite l'inclusion de JavaScript (via CDN ou fichier local).

Un avantage clé de HTMX par rapport aux autres frameworks JavaScript est sa capacité à interagir avec les API directement via les attributs HTML, minimisant ainsi le code JavaScript.

Exemple : Récupération et rendu des données

Le code suivant montre comment récupérer et restituer des données à partir d'une API à l'aide de HTMX, de modèles côté client et du moteur de création de modèles Nunjucks :

<code class="language-html"><title>Nibodhdaware News Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"></code>

Cela configure le HTML, y compris HTMX et son extension de modèles côté client (expliquée plus tard). Nunjucks est utilisé pour les modèles.

La logique principale de rendu :

<code class="language-html"><h1>Nibodhdaware</h1>
<p>HTMX JSON API Test</p>
<div hx-ext="client-side-templates">
  <div hx-get="https://api.spaceflightnewsapi.net/v4/blogs/" hx-trigger="load" nunjucks-template="blogs-template">
    <template>
      <p>The `hx-ext='client-side-templates'` attribute tells HTMX to utilize the extension.  We're using the Space Flight News API. `hx-trigger="load"` sends a GET request on page load.  `nunjucks-template` identifies the template.</p>

      <p>The API response schema is:</p>
      <code>
      {
        "count": 123,
        "next": "...",
        "previous": "...",
        "results": [ /* array of blog objects */ ]
      }
      </code>

      <p>Nunjucks (similar to Jinja) uses `{% %}` for code blocks and `{{ }}` for variables.  `{% if previous %}` checks for pagination. `{% for blog in results %}` iterates through blog posts, accessing properties like `{{ blog.url }}` and `{{ blog.title }}`.</p>

      <p>The blog posts are loaded directly from the API upon page load.</p>
      <img src="/uploads/20250116/17370305576788fb9d220a3.jpg" width="800" height="400" loading="lazy">

      <p>The remarkable aspect is the direct use of API data without explicit fetch calls or JavaScript manipulation of `innerHTML`.</p>
    </template>
  </div>
</div></code>

Conclusion

Bien que vous ayez peut-être encore besoin de créer des API JSON, HTMX simplifie l'interface en permettant le rendu HTML direct, réduisant ainsi la complexité du développement et améliorant les performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!