htmx 在前后端开发中的应用：告别 json，拥抱高效的 html 交互
最近我一直在开发一个 SaaS 网站，前端使用 HTMX 和 Tailwind CSS，后端则使用 Python 和 Flask。HTMX 是我新尝试的工具，本文将分享我在 Web 应用中集成 HTMX 的经验。
JSON 架构的局限性
在深入 HTMX 之前，我们需要了解 HTMX 试图解决的问题。许多全栈应用都采用面向 JSON 的架构：后端发送 JSON 数据，前端根据响应渲染数据。
这种方式虽然提升了网站的交互性，但也存在问题：JSON 数据量可能比渲染 HTML 的成本高出十倍，增加了客户端和服务器之间的数据传输量，从而影响速度和用户体验。
HTMX 的优势
HTMX 认为，服务器返回 JSON 的成本过高，会造成糟糕的用户体验。因此，HTMX 提出让服务器返回 HTML，并通过 HTML 属性处理所有交互，从而使服务器端和客户端更紧密地协同工作，实现更高效、更快速的交互。
需要注意的是，HTMX 并不替代 JavaScript。您仍然需要通过 CDN 或本地文件引入 HTMX 的 JavaScript 文件。
与其他 JavaScript 框架相比，HTMX 的一大优势是您可以直接通过 HTML 与 API 交互，无需编写 JavaScript 代码。
示例
以下代码展示了如何使用 HTMX、客户端模板和 Nunjucks 模板引擎从 API 获取数据并渲染到页面：
<code class="html">
<title>nibodhdaware news blog</title><meta charset="utf-8"></meta><meta content="width=device-width, initial-scale=1" name="viewport"></meta></code>
这段代码通过 CDN 引入 HTMX 和其他必要文件。client-side-templates 是 HTMX 的一个扩展，允许我们以 JSON 形式获取数据并直接用 HTML 呈现，而无需编写 JavaScript。Nunjucks 则是一个模板引擎，方便我们在 HTML 中编写循环和条件语句。
主体代码如下：
<code class="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 id="blogs-template">
{% if not previous %}
<i>found {{count}} articles.</i>
{% endif %}
{% for blog in results %}
<div>
<hr></hr><h2>
<a href="{{blog.url}}" target="_blank">
{{blog.title}}
</a>
</h2>
<h4>
published by {{blog.news_site}}, {{blog.published_at | truncate(10, true, "")}}
</h4>
<p>{{blog.summary}}</p>
</div>
{% endfor %}
</template></div>
</div></code>
我们创建了一个带有 hx-ext='client-side-templates' 属性的 div，告诉 HTMX 使用该扩展。代码使用 Spaceflight News API 获取博客数据。hx-get 属性发送 GET 请求，hx-trigger="load" 表示在页面加载时发送请求，nunjucks-template 指定 blogs-template 为模板。
API 响应结构如下：
<code class="json">{
"count": 123,
"next": "http://api.example.org/accounts/?offset=400&limit=100",
"previous": "http://api.example.org/accounts/?offset=200&limit=100",
"results": [
{
"id": 0,
"title": "string",
"url": "string",
"image_url": "string",
"news_site": "string",
"summary": "string",
"published_at": "2023-09-12T23:51:31.675Z",
"updated_at": "2023-09-12T23:51:31.675Z",
"featured": true,
"launches": [
{
"launch_id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
"provider": "string"
}
],
"events": [
{
"event_id": 2147483647,
"provider": "string"
}
]
}
]
}</code>
Nunjucks 模板引擎的语法与 Jinja 类似：{% %} 表示代码块，{{ }} 表示变量。
通过 {% if previous %} 和 {% for blog in results %}，我们可以根据 API 响应动态渲染博客文章信息。
无需使用 fetch 或 axios 等方法，我们就可以直接使用 API 数据，大大简化了前端代码。
结论
虽然您仍然可以选择返回 JSON 的 API，但 HTMX 允许您直接渲染 HTML，简化开发流程，并提升用户体验。
