HTMX
的终极目标目标,就是让开发者在 HTML
中就能实现现代浏览器级的交互性,而无需使用 JavaScript
。这个前端库虽然起步晚,首次亮相是在 2020
年底,但却迅速吸引了开发者社区的眼球。
在 2023 年的 "JavaScript Rising Stars"
"前端框架” 类别里,HTMX
排名第二,仅次于 React
。
此外,HTMX
还在 GitHub 上收获了超过 20k 的 Star,它的受欢迎程度可见一斑。为什么人们对它那么热衷呢?它能否撼动 React
的前端霸主地位呢?让我们一起来做个对比吧!
简单对比
- | HTMX | React |
---|---|---|
开发者 | Big Sky Software | Meta |
开源 | ✅ | ✅ |
GitHub Star | 29k+ | 218k+ |
文件大小 | 2.9 kB | 6.4 kB |
语法 | 基于 HTML ,带有自定义属性 | 基于 JSX , Javascript 的扩展 |
目标 | 直接在 HTML 中增加现代交互性特性 | 提供一个基于组件的,功能全面的 JavaScript UI 库 |
学习曲线 | 平滑 | 陡峭 |
特性 | AJAX 请求以及一些其他次要特性 | 可组合性,单向数据绑定,状态管理,Hooks 等之外的多种特性 |
性能 | 极好 | 良好,尤其在大规模应用或者复杂的 Web 应用上 |
集成 | 可以嵌入到已存在的 HTML 页面中 | 可以嵌入到已存在的 HTML 页面中,但主要用于基于 Javascript 的项目上 |
社区 | 小而日益发展 | 市场上最大的 |
生态系统 | 小 | 极为丰富 |
如何从 jQuery 走向 React
:从 jQuery 到现代 Web 开发框架
在 Web 开发的早期阶段,开发者依赖 jQuery
来处理 AJAX
请求、DOM
操作以及事件处理。随着时间的推移,Web 应用发展越来越现代化、结构化,可扩展性要求也越来越高。就在这个时候,Angular
、React
和 Vue
等框架和库的出现改变了现状。
React
引入了基于组件的体系结构,这永久性地改变了 Web 开发的方式。其声明式 UI 和单向数据流简化了 Web 开发,可复用性和可维护性更强。这些方面使 React
成为构建动态、响应式和交互式 Web 应用的首选解决方案。
如何从 Web 框架转向 HTMX
:从 Web 框架到更现代的 HTML
尽管 React
、Vue
和 Angular
等 Web 框架在构建结构化的 Web 应用程序方面表现出色,但是它们的复杂性也给追求简单的开发者带来了巨大的负担。这就是 HTMX
的表现的舞台了!
HTMX
是一个轻量级的解决方案,它保有类似 React
的现代交互性,同时具备像 jQuery
那样的简单集成和无负担特性。它通过扩展 HTML
的自定义属性,使我们能够发起 AJAX
请求而无需编写 JavaScript
代码。HTMX
的理念是让事情变得简单,让开发者能在不丢弃熟悉的 HTML
的情况下,更深入多体验 Web
的魔力。
HTMX
作为一种流线型和灵活的选择,在由更复杂的前端框架主导的宇宙中,独树一帜。
HTMX
:一种全新的、现代的交互方法
HTMX
是一个轻量级的、无依赖的、可扩展的 JavaScript
前端库,它可以直接从 HTML
中访问到现代浏览器的特性。具体来说,它允许你在 HTML
代码中直接处理 AJAX
请求、CSS 动画、WebSockets
和服务端发送的事件。
通过设置特殊的 HTML
属性,这个库使你能够访问到以上大部分特性,而无需编写一行 JavaScript
代码。HTMX
提升了 HTML 的能力,使其变成了一个全功能的超文本。
我们接下来通过一些 HTMX
的示例,来看看这个库都提供了什么。
AJAX 请求触发器
HTMX
的主要概念是能够直接从 HTML
发送 AJAX
请求。这得益于以下属性:
-
hx-get
: 向给定的URL
发出一个 GET 请求。 -
hx-post
: 向给定的URL
发出一个 POST 请求。 -
hx-put
: 向给定的URL
发出一个 PUT 请求。 -
hx-patch
: 向给定的URL
发出一个 PATCH 请求。 -
hx-delete
: 向给定的URL
发出一个 DELETE 请求。
当带有这些 HTMX
属性中的一个的 HTML 元素被触发,将会向给定的URL发出指定类型的 AJAX 请求。默认情况下,元素会被 “自然” 事件触发(例如,<input>
, <textarea>
, 和 <select>
由 change
事件触发, <form>
由 submit
事件触发,其他情况由 click
事件触发)。你可以通过 hx-trigger
属性定制这种行为。
比如下面的 HTMX
示例:
<div hx-get="/users">
你好 code秘密花园
</div>
这会告诉浏览器:
“当用户点击
<div>
时,向/users
发送一个GET
请求并将响应呈现到<div>
中”
要使此机制发挥作用,/users
接口应返回原始的 HTML
。
查询参数和请求体数据
HTMX
设置查询参数和请求体数据的方式取决于 HTTP
请求的类型:
GET 请求:默认情况下,hx-get
不会自动在 AJAX
请求中包含任何查询参数。要设置查询参数,可以在传递给 hx-get
的 URL 中指定它们。或者也可以通过 hx-params
属性来覆盖 HTMX
的默认行为。
<div hx-get="/example" hx-params="*">你好 code秘密花园</div>
非 GET 请求:当元素是 <form>
时,AJAX
请求的请求体会包含它所有输入的值,使用它们的 name
属性作为参数名称。当元素不是 <form>
时,请求体将包含距离最近的 <form>
中所有输入的值。或者,如果元素有 value
属性,那么也会被添加到 Request Body
中。如果要将其他元素的值添加到请求体中,可以使用 hx-include
属性,然后通过 CSS
选择器选择出你想要在请求体中包含的所有元素的值。
<div>
<button hx-post="/register" hx-include="[name='email']">
注册!
</button>
输入 email: <input name="email" type="email"/>
</div>
然后可以使用 hx-params
属性来过滤掉一些请求体参数。也可以编写自定义的 htmx:configRequest
事件处理器,以编程方式修改请求体定义逻辑。
document.body.addEventListener('htmx:configRequest', function(evt) {
evt.detail.parameters['auth_token'] = getAuthToken(); // add a new parameter into the mix
});
AJAX 结果处理
如前所述,HTMX
会将触发 AJAX
请求的元素的内部 HTML
替换为服务器返回的 HTML
内容。你可以使用 hx-swap
和 hx-target
属性来定制这种行为:
hx-swap
定义了如何处理服务器返回的 HTML
,接受以下自解释的值之一:innerHTML
(默认)、outerHTML
、beforebegin
、afterbegin
、beforeend
、afterend
、delete
、none
。
hx-target
接受一个 CSS 选择器,并指示 HTMX
将交换逻辑应用于选定的元素。
我们看下面的示例:
<button
hx-post="/tasks"
hx-swap=".todo-list"
hx-target="afterend"
>
添加任务
</button>
这会告诉浏览器:
“当用户单击
<button>
节点时,向/tasks
端点发送POST
请求,并将服务器返回的HTML
附加到.todo-list
元素”
以上几个例子是 HTMX
的核心工作理念了 ...
HTMX 与 React 对比
前面我们已经知道了什么是 HTMX
以及它是大概是怎么工作的,下面我们让它与 React
大概做个比较。
语法
HTMX
:它扩展了 HTML
,提供了直接在 HTML
中与服务器交互的能力,它优先考虑简介性和可读性:
<div hx-get="/hello-world">
你好 code秘密花园
</div>
React
:一个功能齐全的 JavaScript
库,用基于 JSX
编写的可复用组件构建用户界面:
import React, { useState } from "react"
export default const HelloWorldComponent = () => {
const [responseData, setResponseData] = useState(null)
const handleClick = () => {
fetch("/hello-world")
.then(response => response.text())
.then(data => {
setResponseData(data)
})
}
return (
<div onClick={handleClick}>
{responseData ? <>{responseData}</> : "你好 code秘密花园"}
</div>
)
}
学习曲线
HTMX
:因为它基于 HTML
的语法和方法,所以学习曲线是很平滑的。已经熟悉传统 Web 开发的开发者可以在几天内快速掌握它,而新手可以从零开始使用它。
React
:由于其独特的 Web 开发方法,React
的学习曲线比较陡峭。在构建你的第一个 React
应用程序之前,你需要理解 SPA(单页应用)、虚拟 DOM、JSX、状态管理、props、重新渲染等概念。这可能让一些初学者感到困难。
功能特性
HTMX
:背后的核心概念可以概括为:实现在 HTML 中进行 AJAX 调用,无需 JavaScript
代码。虽然还有其他一些酷炫的特性可以提及,但这基本上就是 HTMX
所能提供的核心功能了。
React
:让 React
如此受欢迎的一些特性包括:可复用的组件化架构、便于 UI 开发的 JSX 语法、强大的状态管理、Hooks、同时支持客户端和服务端渲染、高效的虚拟 DOM、CSS-in-JS
支持等。
性能
HTMX
:由于其轻量级、无依赖的特性,依赖于 HTMX
的网页通常具有快速的首屏渲染性能。总的来说,对于具有简单交互的应用,HTMX
性能表现良好。
React
:用 React
构建的 SPA 应用通常包含大量的 JavaScript
。这就导致了更高的网络利用率和客户端渲染时间。但是,虚拟 DOM 和高效的 DIFF 算法使 React
能够高效更新 UI,使其适用于大规模的应用。
集成
HTMX
:可以嵌入到任何 HTML 网页中,与那些可以返回原始 HTML 内容的后端技术可以非常丝滑的集成,比如 Node.js、Django、Laravel、Spring Boot、Flask
等等。
React
:作为一个前端库,而不是框架,理论上可以将它集成到任何现有的站点中。但是,集成 React
可能需要额外的配置,特别是在并非围绕 JavaScript
构建的前端项目中。
需要注意的是,HTMX
和 React
可以在同一个项目中共存。这意味着你可以在一个网页上同时使用 React
和 HTMX
,它们在页面的不同部分起作用,甚至 React
组件也可以依赖 HTMX
属性。
社区
HTMX
:由于它在 2020 年底才首次发布,所以 HTMX
肯定不会像 React
那样受欢迎。所以,教程、操作视频并不会很多。尽管如此,该项目已经在 GitHub
上获得了超过 29k 的 star,各方面的讨论也非常热烈。
React
:凭借全球数百万开发者以及 GitHub 上超过 218k 的 star,React
无疑是 Web 开发库中的绝对霸主。据 Statista
的调查,React
是目前使用最广泛的前端 Web 库,市场份额超过 40%
。难怪会有数以十万计的 React
的教程、文章和视频。
生态系统
HTMX
:虽然该库是可扩展的,但项目相对较新, HTMX
的库和工具并不多。在撰写本文时,npm 上的 htmx
标签只有 35 个包。
React
:单单 npm 上的 react
标签就有超过 6000 个库。这只是一个 React
相关的标签,你还可以找到与它兼容的数以万计的其他库。
HTMX
和 React
,你应该选择哪一个?
当我们比较两种技术时,一般情况下是没有绝对的赢家的。HTMX
和 React
都是优秀的前端 Web 开发库,选择哪一个取决于大家的项目需求和目标。
如果你需要创建一个具备状态管理、提供复杂功能并需要可复用组件的 Web 应用程序时,React
可能是更合适的选择。而在构建具有简单交互性和没有特别高级功能的站点时,HTMX
可能是一个更好的解决方案。
HTMX
:优点和缺点
👍 优点:
-
简单直观的基于 HTML 的语法。
-
只需几个 HTML 属性就能发送 AJAX 请求和更新 DOM。
-
不需要 JavaScript,直接在 HTML 中实现动态交互。
-
整合到现有的 HTML 网页中非常简单。
-
轻量级库,仅有几 KB。
👎 缺点:
-
需要后端 UI 服务返回原始 HTML,因此更依赖于前端。
-
相对较新。
React
:优点和缺点
👍 优点:
-
用 JSX 编写可复用组件进行 UI 构建。
-
复杂的状态管理和支持许多其他有用的功能。
-
是全球最常用的前端 Web 库。
-
由 Meta 开发和维护。
-
对后端没有特定的选择。
👎 缺点:
-
学习曲线陡峭。
-
难以整合到非 JavaScript 项目中。
最后
所以,没有谁最好,只有谁最合适。
大家认为这两个库怎么样呢?欢迎在评论区留言。
参考:
-
https://htmx.org/
-
https://semaphoreci.com/blog/htmx-react
-
https://risingstars.js.org/2023/en#section-framework
-
https://react.dev/learn/writing-markup-with-jsx