🔥 最佳 HTMX 替代方案：HMPL 使用指南

大家好！在这篇文章中，我们将探讨这个 JavaScript 模块 HMPL 并且看它如何可以取代 HTMX 在项目中的用法。我们还将探讨它们的区别和各自的优缺点。

在进一步比较这两个模块时，可以注意到一个模块是模板相关的语言，而另一个则是处理HTML的工具集，主要通过属性来实现。

GIF

让我们从这两个模块的基本概念开始讲起。

🌐 有关服务端渲染和客户端渲染

HMPL 模块的概念类似于 HTMX。我们也可以通过 API 从服务器获取 HTML 内容，更明确说明获取的内容形式。从而替代现代框架和库来创建用户界面。我们通过一个简单示例来展示 HMPL 和 HTMX 以及类似 Vue.js 框架的工作方式。

Vue.js 示例（示例代码）：

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

全屏 退出全屏

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

HMPL 示例：

document.querySelector("#app").append(
  hmpl.compile(
    `<div>
        <button>点击!</button>
        <div>点击数: {{ src: "/api/clicks", after: "click:button" }}</div>
    </div>`
  )().response
);
// 点击按钮并更新点击次数

可以进入全屏模式，也可以退出全屏模式

大小：209字节（大约4KB）

看来一个 HTMX 的例子（示例指例子或示例）：

    <div>
      <button hx-post="/api/increment" hx-target="#counter" hx-swap="outerHTML">点我！</button>
      <div id="counter">点击数：0</div>
    </div>

全屏模式，退出全屏

140字节（占用4KB磁盘空间）

以一个简单的单击按钮为例，我们可以看到（不过需要注意的是，这里有一些关于服务器端和客户端数据，以及 HTML 和 JS 标签的限制，但这不是主要观点），我们得到了相同的界面，尽管客户端的文件大小会有很大差异。这正是这种方法的主要优势，即在服务器端创建现成或模板化的 UI 组件的方法，这样一来，网站用户可以更快地加载这些组件，同时保持结果不变。

现在，让我们回忆一下，大型应用程序在过去（当服务端渲染还不像现在这么流行的时候）是如何通过框架和库来实现的。同样的单页面应用（SPA）实际上我们只有短短一行HTML，但有趣的是，我们用大约10千字节的HTML却得到了一个数十兆字节的JavaScript文件。对于首次访问这类网站的用户来说，加载时间可能很长。

GIF

例如，如果一个潜在顾客想要快速订花，他不会等待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">请输入你的邮箱: </label>
          <input type="text" name="email" id="email" required />
        </div>
        <div class="form-example">
          <input type="submit" value="注册!" />
        </div>
      </form>
      <p>邮箱 { { src:"/api/register", after:"submit:#form", } } 注册成功!</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="email">请输入您的邮箱：</label>
          <input type="text" name="email" id="email" required />
        </div>
        <div class="form-row">
          <input type="submit" value="注册" />
        </div>
      </form>
      <p id="notification"></p>
    </div>

进入全屏
退出全屏

这个例子清楚地表明，HTMX 更多的是关于最大化速度和简化代码，而 HMPL 是 HTMX 和现代框架或库来创建 UI 的结合体。可以说我们得到了一个类似的结果，但是在自定义服务器请求这一点上，这一点非常重要，因为通过 JavaScript 的 fetch API 进行请求自定义，这将使你能够在微前端中工作，与其他框架结合使用，甚至进行测试。

2. HMPL的语法也有其独特的优势，因为请求对象不受任何标签的限制。 在渲染时，它们会被替换为注释，不会让DOM变得杂乱。示例语法：

HMPL语法：

<div>某些文本 {{ src: "/api/getSomeText" }} 某些文本</div>

进入全屏模式 退出全屏模式

HTMX语法：

    <div>一些文本<span hx-put="/api/getSomeText" hx-swap="outerHTML"></span>其他文本</div>

进入全屏 退出全屏

在某些情况下，仅靠使用简短的标签如 p 或 s 并不能实现最小文件大小。有时候，你还需要在同一张表中使用模板标签，这会占用文件中的大量字符。在 hmpl 语法中，总是使用单个花括号来包裹对象。

3. HMPL完全是基于fetch请求构建的，而fetch请求是在2015年作为标准引入的。 HTMX为了支持IE13，默认使用的是XMLHTTPRequest，该请求最早是在1999年的IE和2000年的Mozilla（使用Gecko引擎的）Netscape Navigator中引入的。fetch函数让你可以在浏览器中使用现代JavaScript特性，例如AbortController、信号等更多功能。

这是一个GIF动图，展示XMLHTTPRequest:

此外，还有一些优点，比如使用 webpack 时有一个单独的 .hmpl 文件扩展名。但在我看来，我强调的那些是最关键的。Webpack 配置示例。

    module.exports = {
      module: {
        rules: [
          {
            test: /\.hmpl$/i,
            use: ["hmpl-loader"],
            // 该代码片段定义了一个webpack模块规则，用于匹配以.hmpl为扩展名的文件，并使用hmpl-loader进行处理。
          },
        ],
      },
    };

全屏 退出全屏

ℹ️ HMPL的一些缺点

另外，我还想谈谈hmpl这个项目存在的几个缺点。

1. HMPL目前还不支持WebSockets，这可能会让代码实现变得更复杂。而在HTMX中，这种支持已经存在。

2. 由于使用了 fetch API，因此在某些较旧的浏览器版本中可能无法正常工作。

3. HMPL 是一个新模块，有时可能有 bug。相比之下，HTMX 因其广泛应用，已经经过充分测试。

✅ 结语

HMPL 模板语言可以在需要灵活定制请求及通过 JavaScript 直接操作节点的情况下替代 HTMX；例如，你想创建 1000 个相同的节点，同时希望享受以服务器为中心的 UI 的优势，那么 HMPL 也非常适合这一任务。如果你的目标是尽可能减少 JavaScript 的使用，或者使用一个经过测试的模块并通过少量的 HTML 代码简便地连接到服务器，那么 HTMX 将会是更好的选择。

谢谢大家读这篇文章！

GIF 感谢

🔗 链接:

GitHub仓库地址：https://github.com/hmpl-language/hmpl

https://github.com/bigskysoftware/htmx
[OOP]：面向对象编程（OOP）
[CRUD]：增删查改
[JVM]：Java虚拟机
[SUT]：待测系统