🔥HTMX 的最佳替代品

GenAI LIVE! | 2025年6月4日

大家好！本文将探讨HMPL这样的 JavaScript 模块，以及它如何在项目中替代HTMX。此外，我们还会探讨它们的区别、优缺点。

进一步比较这两个模块时，值得考虑的是，一个是模板语言，而另一个是一组用于处理 HTML 的工具，通过属性等实现。

让我们从这两个模块的一般概念开始。

🌐 关于服务器端渲染和客户端渲染

HMPL 模块的概念与 HTMX 类似。我们也可以通过 API 从服务器获取 HTML，从而取代现代的 UI 创建框架和库。让我们举一个小例子来说明 HMPL 和 HTMX 以及 Vue.js 等框架的工作原理：

Vue.js 示例：

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `<div>
        <button @click="count++">Click!</button>
        <div>Clicks: {{ count }}</div>
    </div>`,
}).mount("#app");

大小：226 字节（磁盘上 4KB）

HMPL示例：

document.querySelector("#app").append(
  hmpl.compile(
    `<div>
        <button>Click!</button>
        <div>Clicks: {{ src: "/api/clicks", after: "click:button" }}</div>
    </div>`
  )().response
);

大小：209 字节（磁盘上 4KB）

HTMX示例：

<div>
  <button hx-post="/api/increment" hx-target="#counter" hx-swap="outerHTML">Click!</button>
  <div id="counter">Clicks: 0</div>
</div>

140 字节（磁盘上 4 KB）

以一个简单的点击器为例，我们可以看到（需要注意一些关于服务器端和客户端数据以及 HTML 和 JavaScript 标记的注意事项，但这不是主要思想），尽管客户端上的文件大小完全不同，但我们获得的界面是相同的。这正是在服务器端创建现成的或模板 UI 组件的主要优势，这样网站用户可以更快地加载它，同时保留结果。

现在，让我们回想一下，如今，或者至少在更早的时候（服务器端渲染还不那么流行的时候），使用框架和库可以构建多么大型的应用程序。同样的 SPA（单页应用程序）通过 JavaScript 生成所有内容，而 HTML 中实际上只有一行代码。但有趣的是，10 KB 的 HTML 代码却能生成几十兆的 JavaScript 文件。这样的网站，用户首次访问时，可能需要很长时间才能加载。

例如，如果潜在客户想要快速订购鲜花，他不会等待 10-15 秒来加载送货店网站，而是会转到另一个加载速度更快的网站。

关于网站如何运作并影响销售漏斗，还有很多实际的例子。但关键在于界面的速度和便捷性，而这方面的方法已经存在差异。但最好另写一篇文章来探讨这个问题。本文还将比较 HMPL 和 HTMX。

👀 为什么要使用 HMPL 以及它与 HTMX 相比有哪些优势？

在本节中，我将尝试解释在某些情况下选择 HMPL 而不是 HTMX 的几个主要原因。此外，如果您想支持这两个模块，请给它们都点个星！谢谢 ❤️！

💎 明星 HMPL ★

💎 明星 HTMX ★

1. 这两个模块都秉承着类似的精简代码的理念，但在概念上有所不同。就 HTMX 而言，一方面，我们获得了一个便捷的工具来处理现有的 DOM，但另一方面，所有这些都是通过 HTML 实现的，并且几乎是实时更新的。而通过非标准解决方案，我们或多或少地需要通过 JavaScript 进行工作，这非常困难，事实上，我们几乎完全不需要 JavaScript 来工作。就 HMPL 而言，一方面，我们可以轻松地使用 JavaScript；生成自定义的 RequestInit，创建数千个独立的 DOM 节点，并提供与 HTMX 相同的服务器 UI 支持；但另一方面，所有工作都是通过代码完成的，这在您想要更快地创建项目时并不总是很方便。让我们来看一个代码示例：

HMPL示例：

import { compile ) from "hmpl-js";

const templateFn = compile(
  `<div>
  <form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form">
    <div class="form-example">
      <label for="name">Enter your email: </label>
      <input type="text" name="email" id="email" required />
    </div>
    <div class="form-example">
      <input type="submit" value="Register!" />
    </div>
  </form>
  <p>Email {
    {
      src:"/api/register",
      after:"submit:#form",
    }
  } successfully registered!</p>
</div>`
);
const initFn = (ctx) => {
  const event = ctx.request.event;

  return {
    body: new FormData(event.target, event.submitter),
    credentials: "same-origin"
  };
};
const obj = templateFn(initFn);
wrapper.appendChild(obj.response);

HTMX示例：

<script src="/path/to/htmx.min.js"></script>
<div>
  <form hx-post="/api/register" hx-target="#notification" hx-swap="outerHTML">
    <div class="form-row">
      <label for="name">Enter your email: </label>
      <input type="text" name="email" id="email" required />
    </div>
    <div class="form-row">
      <input type="submit" value="Register!" />
    </div>
  </form>
  <p id="notification"></p>
</div>

这个例子清楚地表明，HTMX 更注重最大化速度和代码精简，而 HMPL 则是将 HTMX 与现代 UI 框架或库相结合。我们可以说，两者的结果大致相同，但 HMPL 可以自定义对服务器的请求。这一点非常重要，因为自定义请求与 fetch 和 JavaScript 结合使用，可以让你更好地使用微前端，或者与其他框架，甚至测试进行协同工作。

2. HMPL 语法本身也具有优势，因为请求对象不与任何标签绑定。渲染时，它们会被替换为注释，从而避免不必要的标签扰乱 DOM。示例语法：

HMPL语法：

<div>some text {{ src: "/api/getSomeText" }} some text</div>

HTMX语法：

<div>some text <span hx-put="/api/getSomeText" hx-swap="outerHTML"></span> some text</div>

在某些情况下，仅使用 p 或 s 等短标签无法分配属性以达到最小化文件大小。有时，您必须在同一表中使用模板标签，而这会占用文件中的大量字符。在 hmpl 语法中，始终包含单个花括号，然后是一个对象。

3. HMPL 完全基于请求构建fetch，请求于 2015 年作为标准引入。为了支持 IE13，HTMXXMLHTTPRequest默认使用请求，该请求于 1999 年在 IE 中引入，并于 2000 年在 Mozilla Gecko 和 Netscape Navigator 中引入。该fetch函数允许您在浏览器中使用现代 JavaScript 功能，例如AbortController、信号等。

而且，它仍然有相当多的优点，比如在使用 webpack 和其他工具时可以使用单独的 .hmpl 文件扩展名，但在我看来，我强调的那些是最重要的。Webpack 配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.hmpl$/i,
        use: ["hmpl-loader"],
      },
    ],
  },
};

HMPL 的缺点

另外，hmpl 还有一些缺点，我想谈谈：

1. HMPL 尚不支持 WebSockets，这可能会使代码在项目中的实现变得复杂。HTMX 已提供此支持。

2.由于使用了fetch，部分老版本的浏览器将不支持该布局。

3. HMPL 是一个新模块，有时会出现 bug。而 HTMX 则由于其广泛使用而经过了测试。

结论

在需要灵活定制请求以及通过 JavaScript 直接操作节点的情况下，HMPL 模板语言可以替代 HTMX；例如，如果您想要创建一个包含 1000 个相同节点的循环，同时又能兼顾面向服务器的 UI 的优势，那么 HMPL 也非常适合。如果您的目标是完全减少 JavaScript 的使用，或者希望使用成熟且经过测试的模块，并通过最少的 HTML 代码轻松连接到服务器，那么 HTMX 就是一个不错的选择。

感谢大家阅读这篇文章！