HTMX是什么?
HTMX 最初以 intercooler.js 的形式诞生的,是一个用于构建动态网页的 JavaScript 库,它允许开发者通过简单的 HTML 属性来实现 AJAX 、CSS 动画、客户端事件等功能,而无需编写大量的 JavaScript 代码。 HTMX 的主要目的是简化动态网页的开发,使其更容易构建交互式 用户界面。 通过在 HTML 元素上添加自定义属性,开发者可以轻松地实现各种交互行为,例如请求数据、更新部分页面、错误处理等。 HTMX 支持 GET、POST、PUT、DELETE 等多种 HTTP 请求方式,方便与服务器进行交互。 通过指定目标元素,HTMX 可以更新页面的特定部分,而不是整个页面,提升用户体验。htmx 的目标不是成为构建 Web 应用和服务的全能解决方案。它的核心功能是泛化超媒体控件,仅此而已。
和传统前端框架相比,HTMX 是一股清流。没有状态管理、虚拟 DOM 的复杂性,也不需要构建工具,真正实现了'所见即所得'的开发体验。
HTMX 一经推出就深受 Django 社区的追捧,因为基于 Python 语言的 Django 框架是一个高度集成的开发框架,可以快速地开发出一个带后台管理的平台或网站。但是随着前端技术的发展,VUE 及 React 等前端框架的流行,不少人认为 Django 成了一个 Json 生成器,失去了其高度集成快速开发的优势。因为目前流行的前端框架基本都是以 Json 的形式与后台进行交互的,这与 Django 框架本身的开发理念有点不太一致。
HTMX 可以使用更少的代码与后台进行交互,可以更新页面特定部分的特性与 Django 框架结合得很好,而且不仅仅是与 Django 结合得好,与 Flask、gin 等框架也能结合得很好。
HTMX 与后台交互最便捷的方式取得一段 html 代码片段并把该代码片段更新到页面特定位置的形式进行页面更新。可能会有人觉得这种方式似乎倒退到了 JSP 的年代,但其实在特定场景下使用这种方式开发能大大提高开发效率,代码量少且比 JSP 灵活。目前流行的很多开发语言都支持 HTML 模板渲染,就使得后台与前端页面结合得很好。
HTMX 官网公布了一个数字,就是 HTMX 库的代码量比 React 库的代码量少了67%,两者在功能上有没有可比性我们不讨论,但光看代码量少这么多确实有点诱人。在一些视频网站上也有人分享了他们公司的项目,使用 HTMX 重构后项目代码减少了70%,这个数字所带来的开发效率的提高不是一点半点了。
习惯了使用Vue 或 React 的朋友,在试用 HTMX 的过程中可能会因为开发习惯等原因觉得 HTMX 不好用。这是一个很正常的情况,一个是因为新的事物会与之前的思维有所不同;另外一个就是 HTMX 也不是万能的。
HTMX 非常适合以下场景:
- 动态表单:根据用户输入动态更新表单内容。
- 实时搜索:快速实现无刷新的搜索功能。
- 单页面小型应用:构建快速、轻量的应用无需庞大框架。
尤其适合中小型项目和后台管理系统!