HTMX：Web 的未来

HTMX：通过以 HTML 为中心的交互简化 Web 开发

这篇文章探讨了我将 HTMX 集成到使用 Tailwind CSS（前端）、Python 和 Flask（后端）构建的 SaaS 平台中的经验。虽然我熟悉其他技术，但 HTMX 是我工具包中的新成员。 这篇文章详细介绍了它的实现。

面向 JSON 的架构：挑战

在深入研究 HTMX 之前，了解其目标至关重要。 传统的全栈应用程序通常依赖于面向 JSON 的架构。后端发送JSON数据，前端渲染它。这种方法虽然增强了交互性，但会带来大量的数据开销。 JSON 有效负载可能比同等 HTML 大 10 倍，从而导致性能下降。

HTMX：范式转变

HTMX 通过提倡服务器直接返回 HTML 来解决这种低效率问题。 这可以最大限度地减少数据传输，从而改善用户体验。 HTMX 不仅仅是简单的 JSON 替换；它紧密集成了服务器端和客户端逻辑，从而实现更快、响应更灵敏的交互。

至关重要的是，HTMX 不会取代 JavaScript。 它需要包含 JavaScript（通过 CDN 或本地文件）。

与其他 JavaScript 框架相比，HTMX 的一个关键优势是它能够通过 HTML 属性直接与 API 交互，从而最大限度地减少 JavaScript 代码。

示例：获取和渲染数据

以下代码演示了如何使用 HTMX、客户端模板和 Nunjucks 模板引擎从 API 获取和渲染数据：

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

这会设置 HTML，包括 HTMX 及其客户端模板扩展（稍后解释）。 Nunjucks 用于模板。

主要渲染逻辑：

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

结论

虽然您可能仍需要创建 JSON API，但 HTMX 通过允许直接 HTML 渲染来简化前端，降低开发复杂性并提高性能。

以上是HTMX：Web 的未来的详细内容。更多信息请关注PHP中文网其他相关文章！