htmx的替代方案

Carson Gross

htmx 只是众多采用超媒体导向方法构建Web应用的库和框架之一。我曾多次表示,htmx的理念 / 超媒体系统比htmx作为具体实现更为重要。

以下是我认为值得您考虑的其他超媒体方案:

Unpoly

Unpoly 是一款优秀且成熟的前端框架,已在业界(尤其是Ruby社区)广泛应用超过十年。它提供顶级的渐进式增强支持,并包含许多实用概念,如分层系统和复杂的表单验证

我采访了作者Henning Koch,点击此处查看

您可访问此演示应用体验Unpoly。

Triptych

Triptych 是一套三项提案,旨在将通用化的超媒体控件直接引入HTML规范:

该项目正提交给WHATWG审议,争取纳入HTML规范。

项目包含一个可立即使用的polyfill

fixi.js

fixi.js 是htmx团队实现的通用超媒体控件极简方案,专注于最小体积并省略了htmx的许多功能。

其设计目标是在保持可读性和可调试性的前提下实现最小体积(约3.5KB未压缩/1.3KB压缩),可直接嵌入项目无需构建流程。

Datastar

Datastar 最初是htmx的TypeScript现代化重写提案,后发展为独立项目,采用SSE导向的超媒体方案。

Datastar将htmx和Alpine.js的功能整合为单一精炼包,体积小于htmx。

访问示例页面查看实际效果。

Alpine-ajax

提到Alpine(常与htmx搭配使用),值得关注Alpine AJAX这款直接将htmx理念集成到Alpine中的插件。

如果您已是Alpine爱好者,此插件可让您延续开发体验。

查看示例集合了解实际应用。

Hotwire Turbo

TurboHotwire技术栈的组成部分,由Ruby on Rails的缔造者37Signals开发。这款成熟的前端框架在Rails社区广泛使用,但也兼容其他后端技术。

部分曾对htmx体验不佳的用户转向Turbo后获得更好体验

h2 id="htmz">htmz

htmz 是款巧妙利用锚点和表单已有target属性(可定位iframe)的微型库。

结合location.hash技术,实现了通用化内容嵌入

这是该库的完整源码(绝非玩笑):

  <iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>

令人惊叹!

TwinSpark

TwinSpark 是由Alexander Solovyov创建的类htmx库,包含智能DOM替换等特性。

已在日活10万+的生产环境中应用。

jQuery

最后,经典的jQuery通过load()方法可将URL内容加载到元素中,该方法正是htmx前身intercooler.js的灵感来源。

其使用极其简单:

  $( "#result" ).load( "ajax/test.html" );

若您已在项目中引入jQuery,此法可能已满足需求。

结论

若htmx不适合您的项目,希望这些替代方案能帮助您采用超媒体开发模式。当前超媒体领域创新不断,这些库各自贡献着独特价值。

最后,如果您愿意,请在Github上为它们(尤其是新项目)点亮星标:作为开源开发者,我深知Github星标是持续开发的最佳精神动力。

</>