HTMX，一种对后端开发人员友好的前端开发方式

1. 简介

原始的HTTP协议是传输HTML为主，HTML是格式化之后的文本（包括内容和格式信息）。HTML中的A标签当用户点击时候就会从服务器去获取一份新的HTML文件并且在浏览器中展示。

HTMX扩展了这个思想，可以给HTML标签多一些属性，使其在某些事件发生时候，能够和服务器通过HTTP交互（通过AJAX，Asynchronous JavaScript and XML，调用），获取HTML片段，并且将当前网页上的指定DOM用获取到的HTML替换。从而实现动态网页效果。

使用HTMX时候，

服务器端处理客户端的HTTP请求，并且用HTML文本做响应。
客户端不需要写javascript，引入htmx库之后，直接可以配置各个html标签的属性来发起对服务端的调用。

2. 例子

https://htmx.org/examples/click-to-load/

<tr id="replaceMe">
  <td colspan="3">
    <button class='btn' hx-get="/contacts/?page=2"
                        hx-target="#replaceMe"
                        hx-swap="outerHTML">
         Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
    </button>
  </td>
</tr>

上面HTML代码中，当按钮被点击时候，会调用 GET /contacts/?page=2, 将获取到的字符串替代整个tr块。

获取到的字符串中，如果不是最后一个page，就会包含另外一个tr块，用来调用 GET /contacts/?page=3

3. hx-boost

这个功能，可以快速让传统页面增加ajax特性。比如给html的body标签启用hx-boost，则body内部的a标签和form都会用ajax方式发出请求。不会全页面刷新网页。这个功能还有一个好处，就是如果浏览器不支持javascript，仍然可以以传统页面刷新的方式完成功能。

这个 HTML 页面在 <body> 标签上使用了几个 HTMX 扩展配置，让我们来分析它们：

hx-ext="head-support, morph":
hx-boost="true":
hx-swap="morph:innerHTML":
hx-target="this":

在hwy 生成的脚手架项目中，看到对html body有上面的配置。带来的结构是，body内部的a标签和form都会在点击或者提交时候触发局部更新（使用了idiomorph算法）。

4. SSG/SSR + htmx

4.1. Vitepress

可以用htmx实现vitepress的前端内容动态展示。示例如下，点击Fetch Users会去服务器调用API。

实际使用时候，可以用后端服务器输出HTML格式响应。

注意：需要在网页的header区域加入htmx和tailwind的引入.

可以在vitepress的config中全局引入。

        ['script', {src: 'https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js'}],
        ['script', {src: 'https://cdn.tailwindcss.com'}],

也可以在当前文档的frontmatter中引入。

yaml

head:
  - - script
    - src: https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js
  - - script
    - src: https://cdn.tailwindcss.com

4.2. Astro

Astro有一个和htmx的集成。用astro的SSR集成htmx会是一个很简洁的方案。

5. 参考

https://htmx.org/
https://github.com/bradtraversy/htmx-crash-course
有很多CRUD实现的示例 https://htmx.org/examples/
https://hwy.dev/docs 一个使用htmx技术的后端框架
https://htmx.org/extensions/ 一些特性的extension，例如发起JSON调用
https://github.com/bigskysoftware/idiomorph DOM树的合并算法
https://hypermedia.systems/htmx-in-action/
https://hypermedia.systems/more-htmx-patterns/
https://github.com/ngshiheng/spaceflight-news htmx和RESTFUL API结合
https://docs.astro.build/zh-cn/guides/integrations-guide/node/ Astro SSR方式运行

HTMX，一种对后端开发人员友好的前端开发方式

1. 简介 ​

2. 例子 ​

3. hx-boost ​

4. SSG/SSR + htmx ​

4.1. Vitepress ​

4.2. Astro ​

5. 参考 ​