Show HN：我做了一个 100% 在浏览器中的 HTMX Playground

原文 ↗ Hacker News 讨论 ↗

一个在浏览器中运行的 HTMX playground 促使网页开发者分享他们如何将 HTMX 与 Django、Rust 等框架结合，用更少的 JavaScript 前端构建交互式、由服务器驱动的 UI。评论者讨论了这种以超媒体为中心的方法能扩展到什么程度、它与 SPA、LiveView 以及 Unpoly 等工具的比较，以及它在哪些场景会失效（例如离线优先应用或仅支持 GraphQL 的后端）。HTMX 的创建者也就设计理念、适用场景发表了看法，并向怀疑者保证：这个库很容易上手，而且在需要时可以与传统 JavaScript 共存。

HTMX 概念与对比

  • HTMX 被描述为对 HTML 超媒体控制的一种泛化：任何元素都可以触发 HTTP 请求，并将返回的 HTML 片段转入 DOM。
  • 有人将它与 DHTML、Turbolinks/Hotwire、Phoenix LiveView 和 Unpoly 作比较：
    • DHTML 依赖大量 JS，而且早于 XHR；HTMX 则更聚焦于超媒体。
    • Turbolinks/Hotwire 和 Unpoly 被认为更高层、更“魔法”，而 HTMX 更底层、也更不透明程度更低。
    • LiveView 和 HTMX 解决的是相似的问题，但处于不同的技术栈。
  • 如果后端是纯 JSON/GraphQL API，而不是返回超媒体，HTMX 通常被认为并不适合。

使用场景与集成体验

  • 多位用户表示在 Django、SQLAlchemy、Rust、Go 和 Node 中成功使用过 HTMX；常常用它替代依赖大量 JS 的 SPA 方案。
  • 常见模式是：用 HTMX 覆盖 90–99% 的 UI，再在高度交互的部分少量引入自定义 JS/Vue/Alpine。
  • 许多人称赞 HTMX 的上手简单，尤其适合偏后端的开发者。

渐进增强与局部更新

  • 讨论如何增强传统表单提交：同一个端点在非 JS 用户下返回完整页面，而 HTMX 只替换特定片段。
  • 提到的技巧包括：hx-target、hx-select、hx-boost，以及仅更新响应部分的 multi-swap 扩展。
  • Unpoly 也被提到是另一种特别擅长这一模式的工具。

离线、类似 SPA 的行为，以及移动端表现

  • 有些人探讨或倡导面向离线优先应用的 HTMX 类架构：
    • 使用 service worker 的“虚拟服务器”或本地伴随后端。
    • 有人声称用这种方式构建了优雅的离线优先应用；也有人认为这过度设计，并且与 HTMX 的精神相悖。
  • 讨论还涉及把超媒体/HATEOAS 用到 Web 之外（桌面/移动端），对于其真实世界的 UX 价值看法不一。

团队采用、招聘与复杂度

  • 一个担忧是：HTMX 的人才池比主流 JS 框架更小。
  • 反驳意见包括：
    • 如果你懂 HTML/JS，HTMX 学起来很快。
    • 它鼓励全栈负责和以后端为中心的结构。
    • 代码变成意大利面式的风险存在于任何范式中；SPA 并不能天然防止这一点。
  • 有人表示 HTMX 正在变得越来越流行，但它只是众多工具之一，并非万能方案。

Playground 相关反馈

  • 整体来说，大家对这个 HTMX playground 的评价非常正面。
  • 建议包括：更好的移动端支持、改进错误输出、可以清空网络日志，以及一些编辑器选择上的争论（Ace vs Monaco）。