云计算、AI、云原生、大数据等一站式技术学习平台

网站首页 > 教程文章 正文

让 React 代码行数减少78%的 htmlx 有这么神?

jxf315 2025-06-18 21:58:38 教程文章 11 ℃

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

前言

htmx 使开发者可以使Attribute直接在 HTML 中访问 AJAX、CSS Transitions、WebSocket 和SSE等前端常用事件，从而使得构建强大功能的现代用户界面更加简单。

htmx 库的代码体积很小，启动Gzip压缩后大约~12k，而且无其他依赖，可扩展，兼容 IE11 。更加出彩的是，与React 相比，代码库大小减少了 67%。

1.什么是 HTMX，为什么它很重要？

1.1 HTMLX的起源

Carson Gross 创建了一个前端库 intercooler.js，Slogan是“Ajax With Attributes”，intercooler.js的目标很简单，目的在于简化前端 Web 开发的复杂性。 intercooler.js 的新版本在2021年更新到了 2.0 版，作者正式命名为 htmx，也就是本文的主角。

1.2 HTMLX的目标

HTMX 试图通过使用网络的原始模型来创建应用程序，从而利用 HTML 的强大力量。 使用HTMX的时候，开发人员无需编写复杂的JS代码来实现类似的功能，借助于HTMLX属性即可实现动态内容和更新。比如：进度条、延迟加载、无限滚动、内联验证等。

HTMX 不同于 Vue.js 、 React、Angular 等前端框架，需要通过客户端请求服务端的数据并动态渲染页面。 使用 HTMX的时候，客户端发出请求，服务端将返回完整的 Html 并更新页面。 同时，可以将 HTMX 与任何服务器端技术集成，因为应用程序逻辑主要由后端处理。

2.HTMX典型示例

2.1 建立Websocket

如果想在 htmx 中建立一个 WebSocket 连接，可以使用 hx-ws 属性来完成：

<div hx-ws="connect:wss:/chatroom">
    <div id="chat_room">
        ...
    </div>
    <form hx-ws="send:submit">
        <input name="chat_message">
    </form>
</div>

connect 声明建立了连接，而 send 声明告诉表单在提交时将值提交到套接字socket。

2.2 建立服务端发送事件SSE

服务器发送事件是服务器向浏览器发送事件的一种方式。 它为服务器和浏览器之间的通信提供了比 websockets 更高级别的机制。

如果想让一个元素通过 htmx 响应服务器发送的事件，需要做两件事：

  • 定义 SSE 源。 为此，请在父元素上添加一个 hx-sse 属性，其中包含一个连接 <url> 声明，该声明指定将从中接收服务器发送事件的 URL。
  • 使用 hx-trigger="sse:<event_name>" 语法定义由服务器发送的事件触发的此元素的后代元素
<body hx-sse="connect:/news_updates">
    <div hx-trigger="sse:new_news" hx-get="/news"></div>
</body>

2.3 HTMX 同步请求

假设希望一个元素的请求替代另一个元素的请求，或者想要等到另一个元素的请求完成后再发送另外一个请求，可以使用 hx-sync 属性。 比如下面的代码：

<form hx-post="/article">
    <input id="title" name="title" type="text" 
        hx-post="/validate" 
        hx-trigger="change"
    >
    <button type="submit">提交</button>
</form>

在不使用 hx-sync 的情况下，当填写并提交表单时，它会同时触发对 /change 和 /validate 的两个并行请求。使用 hx-sync="closest form:abort" 后，将监视表单上的请求并在存在表单请求时停止输入请求，或者在输入请求运行时启动：

// 同步请求示例
<form hx-post="/article">
    <input id="title" name="title" type="text" 
        hx-post="/validate" 
        hx-trigger="change"
        hx-sync="closest form:abort"
    >
    <button type="submit">提交</button>
</form>

2.4 轮询

如果想让一个元素轮询给定的 URL 而不是等待一个事件，可以使用带有 hx-trigger 属性的 every 语法：

<div hx-get="/news" hx-trigger="every 2s"></div>


这相当于告诉 htmx 每 2 秒，向 /news 发出 GET 请求并将响应加载到 div。 如果想停止从服务器响应中进行轮询，可以使用 HTTP 响应码 286 进行响应，该元素将取消轮询。

2.5 负载轮询

另一种可用于在 htmx 中实现轮询的技术是“负载轮询”，其中元素指定加载触发器和延迟，并用响应替换自身：

<div hx-get="/messages"
    hx-trigger="load delay:1s"
    hx-swap="outerHTML"
>
</div>

负载轮询在轮询有终点的情况下很有用，在该点轮询终止，例如当您向用户显示进度条时。

3.HTMX vs. React对比

从Github数据来看，目前React的star已经达到了202k，而htmlx只有10.7k，这个差距确实还很大，但是考虑到React项目创建已经11年，而htmlx只有3年，能达到10.7k已经确实不易。

接下来看看NPM的周下载量数据。

React的周下载量达到了惊人的16,759,035，而htmlx只有17,679，这个差距就像上面star的差距一样明显。当然，正如上文所说，htmlx项目的创建时间相对较短，所以在知名度、生态方面肯定还没法和React同日而语，但是17,679的周下载量确实也表明已经囊括了很大一部分用户群。

然后回到大家可能都比较关心的代码体积上，bundlephobia的官方数据表明htmlx压缩后达到了37.8k（远大于React@18.2.0的6.4k），即使启动Gzip压缩后也达到了13.2k（远大于React@18.2.0的2.5k）。所以，可以从侧面反应出，htmlx通过属性的方式确实使得代码行数减少了，但是库本身的代码体积却在悄悄增大。

4.本文总结

从总体来看，HTMX 确实比较有意思，特别是已经习惯了jQuery用法的开发者，可以在下一个项目中尝试使用HTMX。 本文介绍了如何使用HTMLX建立Websocket 、建立服务端发送事件SSE 、HTMX 同步请求 、轮询 、负载轮询等示例。同时对比了React和htmlx的开发者相关数据。

因为笔者也没有在生产项目中使用、部署过HTMLX项目，所以很多探索也就点到为止，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。


参考资料

https://www.infoq.cn/article/veskosrskc9xgiyygyku

https://github.com/bigskysoftware/htmx

https://thenewstack.io/htmx-html-approach-to-interactivity-in-a-javascript-world/

https://htmx.org/docs/

Tags：

猜你喜欢

最近发表
标签列表