前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载导读本文以 htmx 官方博客《Alternatives to htmx》为基础系统梳理超媒体驱动应用HDA路线下除 htmx 之外的十余个代表性库与框架——从成熟的 Unpoly、Hotwire Turbo到极简的 htmz、Nomini、fixi.js再到 SSE 取向的 Datastar 与 Alpine 生态的 Alpine-ajax。读完本文你将理解这些方案的定位差异、核心机制、体积与适用场景并能在 htmx 之外为你的服务端渲染应用找到合适的超媒体搭档。htmx 官方多次强调一个核心观点超媒体hypermedia的思想比 htmx 这个具体实现更重要。在 hypermedia-driven-applications.md 一文中作者 Carson Gross 将 HDA 架构定义为 MPA多页应用与 SPA单页应用的合题用声明式、内嵌在 HTML 中的语法取代命令式脚本并让服务器以 HTML 超媒体而非 JSON 数据的形式与应用交互——即坚持 HATEOAS超媒体作为应用状态引擎 的 REST 架构约束。围绕这一思想生态中涌现了大量与 htmx 殊途同归的实现。本文逐一介绍这些值得纳入选型视野的方案并结合本仓库中的源码与文章说明它们与 htmx 的异同、各自的定位以及什么时候应该放下 htmx。一、先看 htmx 自己的定位与能力边界在展开替代方案之前有必要先明确 htmx 本身完成了什么。根据仓库 README.md 的说明htmx 允许你在 HTML 中直接使用 AJAX、CSS 过渡、WebSocket 与 Server-Sent Events通过hx-*属性构建现代用户界面它体积小约 14k min.gzd、无依赖、可扩展是 intercooler.js 的后继者。README 中提出的四个为什么构成了 htmx 的动机为什么只有a和form能发起 HTTP 请求为什么只有click与submit事件能触发它们为什么只有 GET 与 POST 可用为什么只能替换整个屏幕通过移除这些任意限制htmx 补全了 HTML 作为超文本的缺失能力。这些能力直接体现在 src/htmx.js 的实现中例如hx-get、hx-post、hx-target、hx-swap等属性本仓库源码中即有多处对应实现。与之呼应的是htmx 的声明式写法还体现了 Locality of Behaviour行为局部性LoB 原则button hx-get/clickedClick Me/button的行为一眼可见不像 jQuery 那样需要跨文件才能拼出完整行为。理解了这条能力边界就更容易理解下面这些替代方案各自补全了哪一块。二、UnpolyRuby 社区十年打磨的渐进增强框架Unpoly 是一个成熟的前端框架尤其在 Ruby 社区被重度使用了超过十年。它提供同类最佳best-in-class的渐进增强Progressive Enhancement能力并拥有许多实用概念例如layers层级与精细的表单校验form validation。Unpoly 的作者 Henning Koch 曾接受 Carson Gross 的专访访谈全文收录在 interviews/henning_koch.md 中。访谈中有几个值得留意的细节恰好解释了 Unpoly 的设计取向它源于 makandra一家 Rails 咨询公司在大量客户项目中的模式提炼本质上是HTML6 幻想规范的落地如果 HTML6 专为服务端渲染应用而设计它会包含哪些特性与 Rails 一样Unpoly 崇尚为一切提供强默认值偏好不显眼的约定优于显式配置——你甚至可以在完全不改动 HTML 的前提下让 Unpoly 接管所有链接和表单。Koch 认为对大多数中等规模应用而言超媒体路线往往比 SPA 模型交付更好的结果浏览器原生处理焦点管理、并发输入、网络不稳定等大量边界情况而用 JavaScript 模拟页面过渡很难达到同等正确性。如果你看重渐进增强、成熟度和 Rails 生态Unpoly 是与 htmx 气质最接近的重武器之一。三、Triptych把超媒体控制权写进 HTML 规范的提案Triptych 是一组三份提案目标是让更通用的超媒体控制能力直接进入 HTML 规范允许在 HTML 中直接使用更多HTTP 方法不止 GET/POST允许按钮作为独立的超媒体控件而不只是表单的一部分允许超媒体控件将页面上任意元素作为替换目标。该项目正在被引入 WHATWG以争取进入 HTML 规范同时它附带了一个polyfill今天就可以用来按提案实现应用。不难发现Triptych 的三点主张与 htmx 在 README.md 中提出的四个为什么高度重合——它们本质上是把 htmx 已经在实践中赋予 HTML 的能力尝试以标准化的方式追认进规范。从通用化超媒体控件generalized hypermedia controls这一研究脉络看htmx 团队自己的极简实现 fixi.js 正是这一思想的另一条路线。四、fixi.jshtmx 团队自己的极简实现fixi.js 是htmx 团队对通用化超媒体控件的极简实现重点放在尽可能小上刻意省略了 htmx 中的许多功能。它的目标数据按原文档所述约 3.5k未压缩、未 minify压缩后约 1.3k同时保持可读、可调试因此可以直接包含进项目而无需任何构建转换。fixi.js 的价值在于它证明了超媒体控件的核心可以收敛到极小体积把 htmx 中那些锦上添花的功能如扩展、历史管理、指标等全部剥掉之后剩下的本质仍然成立。如果你只需要最基础的 AJAX 式交互、且极度在意包体积fixi.js 是一个值得关注的极简选项。五、Datastar从htmx 的 TypeScript 重写独立出来的 SSE 取向方案Datastar 最初是作为 htmx 的TypeScript 重写 现代工具链提案而诞生的后来发展成独立项目并采取了一种SSEServer-Sent Events取向的超媒体路线。它的特色在于把 htmx 与 Alpine.js 的功能合并进一个干净的小包而且体积比 htmx 更小。换句话说如果你既想要超媒体驱动的服务端交互又想要 Alpine 风格的响应式前端能力Datastar 尝试用单一依赖同时满足两者并借助 SSE 实现服务器到浏览器的推送式更新。六、Nomini最小的响应式变量 局部页面替换实现Nomini 是一个拥抱以 JavaScript 作为简单增强手段这一原始理念的超媒体实现它只希望在静态为主的页面之上添加一层极薄的 LoB行为局部性层从而以最小的客户端代码实现强大的服务端驱动 Web 应用。按原文档所述它目前是同时提供**响应式变量reactive variables与局部页面替换partial page swaps**的库中体积最小者约 2.8kminified约 1.4kminzipped。本质上看Nomini 可以理解为 Datastar 的微型重实现或Fixi Alpine.js的组合体——它是面向响应式服务端驱动 UI 的极简、务实积木。这一描述与 htmx-sucks.md 中对极微库的调侃形成了有趣对照Nomini 恰恰选择在最小化与正确性之间做出自己的权衡。七、µJS自带预取、SSE 与 morphing 的无依赖小库µJS 是一个约5k、无依赖的小型库实现了大量超媒体思想特性包括预取pre-fetchingSSEServer-Sent Events基于 idiomorph 的 DOM morphingmorphing 即把新旧 DOM 做最小差异合并而不是整体替换其中 idiomorph 正是 htmx 生态中用于平滑 DOM 过渡的 morphing 方案µJS 直接将其纳入核心说明它在如何优雅地应用服务端返回的 HTML上与 htmx 共享同一套技术路线。八、Alpine-ajax把 htmx 式概念内嵌进 Alpine 生态如果你已经是 Alpine.js 的用户Alpine 也是常与 htmx 搭配使用的脚本库那么值得关注Alpine AJAX它是一个 Alpine 插件把类似 htmx 的概念直接集成进 Alpine。它的定位非常清晰不引入第二套心智模型而是让 Alpine 的表达式体系直接获得 AJAX/超媒体交互能力。对于已经在用 Alpine 管理前端状态、只想补上服务端 HTML 片段交换这一块的项目Alpine-ajax 是侵入性最小的选择。九、Hotwire Turbo37Signals 出品的成熟前端框架Turbo 是Hotwire技术套件的组成部分出自以 Ruby on Rails 闻名于世的37Signals。它是一个打磨精良的前端框架在 Rails 社区被广泛使用但同样可以搭配其他后端技术。值得注意的一点原文档提到一些与 htmx 相处不愉快的人转而喜欢上了 Turbo。这暗示两者的体验差异可能集中在约定convention与配置configuration的取向上——Turbo 更强调开箱即用的框架化约定而 htmx 更强调你说了算的属性化声明。结合 hypermedia-driven-applications.md 的HDA 风格库清单其中同时列出 htmx、Unpoly、TwinSpark、Hotwire可以看到 Turbo 在作者眼中与 htmx 属于同一超媒体谱系。十、htmz用 iframe location.hash 实现广义转嵌的天才小库htmz 是一个令人拍案叫绝的极简库它利用了 HTML 的一个既有事实锚点与表单本来就有target属性可以指向一个iframe。将这一点与location.hash组合起来就能实现广义转嵌generalized transclusion——即把另一个文档的片段动态嵌入当前文档。原文档强调这就是该库的全部源码作者声明我不是在开玩笑iframe hidden namehtmz onloadsetTimeout(()document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))/iframe这行代码的机制可以拆解为隐藏的iframe namehtmz作为所有链接/表单的target让响应在 iframe 内加载而不跳转页面iframe 的onload触发后读取 iframe 的location.hash即服务端返回内容中约定的目标选择器用document.querySelector(hash)找到页面上的目标元素再以replaceWith(...contentDocument.body.childNodes)将 iframe 文档体替换进去。把页面局部更新压缩到一行 HTML这正是超媒体思想以最小的代价复用浏览器原生能力的极致示范。它也与 htmx 在 src/htmx.js 中通过属性系统完成的局部替换目标一致只是选择了完全不同的实现杠杆。十一、TwinSpark带 morphing 能力、已在生产环境验证的同类库TwinSpark 由 Alexander Solovyov 创建与 htmx 类似特性包括morphingDOM 变形合并等。原文档指出它正在被日活 10 万以上的站点在生产环境使用。对于担心超媒体库只适合玩具项目的开发者TwinSpark 提供了一个生产级佐证同时它也被 hypermedia-driven-applications.md 的 HDA 风格库清单明确收录说明在作者看来它与 htmx、Unpoly、Turbo 处于同一技术阵营。十二、jQuery一切的开端——load()与 intercooler.js 的血脉最后是元老jQuery。它的load()方法可以把一个 URL 加载进指定元素$(#result).load(ajax/test.html);这个方法正是intercooler.jshtmx 的前身的灵感来源之一。如果你已经在使用 jQueryload()也许就够用了。这一点在仓库的另一篇文章 htmx-sucks.md 中甚至被拿来作为批评 htmx 的论据——作者刻意扮演批评者展示了 2008 年的 jQuery 写法$( #result ).load( ajax/test.html );与 htmx 的写法button hx-get/ajax/test.html hx-target#result Load /button两相对照恰好呈现了超媒体演进的两端jQuery 用命令式脚本表达加载到元素htmx 用声明式属性表达同一件事。而从 locality-of-behaviour.md 的视角看后者把行为收拢到了元素本身这正是两者在软件设计层面的根本分野。十三、横向对比一张表看懂各方案定位方案体积/规模原文档所述核心机制与取向生态/背景最适合的场景htmx约 14k min.gzd无依赖声明式hx-*属性AJAX/WS/SSE本仓库intercooler.js 后继想用 HTML 属性直接获得 AJAX 能力Unpoly成熟大型框架渐进增强、layers、表单校验Ruby/Rails 社区十年以上看重渐进增强与成熟约定Triptych规范提案 polyfill把通用超媒体控制写进 HTML 规范WHATWG 提案关注 HTML 标准演进fixi.js约 3.5k 未压缩 / 约 1.3k 压缩极简通用超媒体控件htmx 团队极致追求小体积Datastar比 htmx 更小SSE 取向htmx Alpine 合一源自 htmx TS 重写提案想要 SSE 推送 响应式前端Nomini约 2.8k minified / 约 1.4k minzipped响应式变量 局部页面替换LoB 薄层新兴项目最小化的响应式服务端 UIµJS约 5k无依赖预取、SSE、idiomorph morphing新兴项目需要预取与 DOM morphingAlpine-ajaxAlpine 插件把 htmx 式概念集成进 AlpineAlpine 生态已是 Alpine 用户Hotwire Turbo成熟框架约定优先的页面替换37Signals / Rails想要开箱即用的框架化体验htmz单行 HTMLiframe location.hash 转嵌新兴项目极简页面局部更新TwinSpark同类成熟库morphing生产验证独立作者需要 morphing 与生产背书jQuery经典库load()方法全行业历史已在用 jQuery十四、结论与选型建议原文档的结论值得反复咀嚼如果 htmx 不适合你的应用上面这些库中的某一个可能恰好能让你继续享受超媒体模型的收益。超媒体世界正在发生大量令人兴奋的事情而每个库都以自己的方式贡献其中。结合仓库中的整体论述可以提炼出几条务实的选型建议先确认路线再挑工具HDA 路线的共同前提是服务器返回 HTML 超媒体、客户端以声明式方式消费它见 hypermedia-driven-applications.md。在这个前提下htmx、Unpoly、Turbo、TwinSpark 属于同一条主线选谁更多取决于生态与约定偏好。体积敏感的项目fixi.js、Nomini、htmz、µJS 都把小当作第一公民其中 htmz 甚至只有一行源码适合作为学习材料或极致精简场景的参考。已有 Alpine/jQuery 存量Alpine-ajax 与 jQueryload()可以以最小侵入融入现有代码不必推翻重来。关注标准演进Triptych 正在把通用化超媒体控件推向 HTML 规范相关学术脉络可参见 essays/_index.md 中收录的《Hypermedia Controls: Feral to Formal》研究条目其方向性意义对理解整个生态的走向很有帮助。最后正如原文档作者所说如果这些项目尤其是较新的那些对你有帮助不妨为它们点亮 GitHub Star——对开源开发者而言那是最有效的精神鼓励之一。而作为技术选型者你的收获则是超媒体不是某一家库的专利而是一条持续演进、百花齐放的架构路线。赞分享前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载相关推荐ESP-IDF Partitions API 完全指南分区表枚举、读写擦除、MMAP 映射与分区烧录ESP IDF Partitions API 完全指南分区表枚举、读写擦除、MMAP 映射与分区烧录 导读 本文以 ESP IDFEspressif IoT前端astryx BaseTypeahead 无障碍与属性透传审计修复详解从 changeset 到源码实现astryx BaseTypeahead 无障碍与属性透传审计修复详解从 changeset 到源码实现 导读 本文围绕 astryx 设计系统核心包 as前端Vime媒体播放器现代化Video.js替代方案的完整指南Vime媒体播放器现代化Video.js替代方案的完整指南 在当今多媒体内容爆炸的时代一个强大、灵活且易于使用的媒体播放器对于任何网站都至关重要。Vime媒音视频UI库/组件上一篇gitstatus 架构设计深入理解守护进程与 Shell 的通信机制下一篇告别色彩偏差Shotcut中用色卡打造电影级LUT预设全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
