HMPL - HTMX 的最佳替代品

大家好，我们又见面了啊~本文《HMPL - HTMX 的最佳替代品》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

大家好！在本文中，我们将考虑像 hmpl 这样的 javascript 模块以及它如何在项目中替换 htmx。还要考虑它们的差异、优点和缺点。

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

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

通过将用户界面组件移至服务器来减少 javascript 代码的概念

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
);

大小：206 字节（磁盘上 4kb）

htmx 示例：

<div>
  <button hx-post="/api/increment" hx-swap="outerhtml">click!</button>
  <div hx-get="/api/clicks">clicks: 0</div>
</div>

128 字节（磁盘上 4 kb）

以一个简单的点击器为例，我们可以看到（有一些关于服务器端和客户端数据的警告，以及 html 和 js 标记，但这不是主要思想）我们得到了相同的界面，尽管客户端上的文件大小将完全不同。这正是在服务器端创建现成的或模板 ui 组件的方法的主要优点，以便站点用户可以更快地加载它，同时保留结果。

现在，让我们记住使用框架和库可以获得多大的应用程序，或者至少在早期（当服务器端渲染还没有那么流行时）。相同的 spa（单页应用程序）通过 javascript 生成所有内容，而在 html 中，我们实际上只有一行，但笑话是，使用 10 kb 的 html，我们会得到一个几十兆字节的 javascript 文件。这样的网站，用户第一次访问它时，可能需要很长时间才能加载。

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

还有很多关于网站如何影响销售渠道的实际例子。但重点是，最主要的是界面的速度和便利性，这里已经存在方法上的差异。但最好在单独的文章中进行此操作。在这里我们还考虑了 hmpl 和 htmx 的比较。

为什么使用 hmpl 以及它相对于 htmx 的优势是什么？

在本节中，我将尝试告诉您在某些情况下可能选择 hmpl 而不是 htmx 的几个主要原因：

1.两个模块有着类似的减少代码的思想，但概念上有所不同。就 htmx 而言，一方面，我们获得了一个方便的工具来处理现有的 dom，但另一方面，所有这一切都是通过 html 发生的，并且是实时更新的。非常困难的是，通过非标准解决方案，我们或多或少可以通过 javascript 进行工作，而事实上，使用 javascript 的工作几乎完全不存在。就 hmpl 而言，一方面，我们可以轻松地使用 javascript；另一方面，我们可以轻松地使用 javascript。生成自定义 requestinit，使用与 htmx 相同的服务器 ui 支持创建数千个单独的 dom 节点，但另一方面 - 所有工作都是通过代码完成的，当您想要更快地创建项目时，这并不总是很方便。我们来看一个代码示例：

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>
      &lt;input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; required /&gt;
    </div>
    <div class="form-example">
      &lt;input type=&quot;submit&quot; value=&quot;register!&quot; /&gt;
    </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" onsubmit="function prevent(e){e.preventdefault();};return prevent(event);" id="form">
    <div class="form-example">
      <label for="name">enter your email: </label>
      &lt;input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; required /&gt;
    </div>
    <div class="form-example">
      &lt;input type=&quot;submit&quot; value=&quot;register!&quot; /&gt;
    </div>
  </form>
  <p>email <span hx-get="/api/registeredemail" hx-swap="outerhtml"></span> successfully registered!</p>
</div>

这个例子清楚地表明，htmx 更多的是关于最大化速度和缩短代码，而 hmpl 是 htmx 和用于创建 ui 的现代框架或库的结合。我们可以说我们得到了一些类似的结果，但考虑到我们可以自定义对服务器的请求。

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 年作为标准引入。htmx​​ 用于 ie13 支持，默认使用 xmlhttprequest，该请求于 2000 年引入。fetch 函数允许您在浏览器，例如 abortcontroller、信号等等。

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

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

hmpl 的缺点

此外，hmpl 有一些我想谈谈的缺点：

1. hmpl 尚不支持 websockets，这可能会使项目中的代码实现变得复杂。在 htmx 中，存在这种支持。

2. 由于使用了 fetch，因此在某些较旧的浏览器版本中将不支持该布局。

3. hmpl 是一个新模块，它有时会存在错误。相反，htmx 由于其广泛使用而经过测试。

结论
在需要灵活的请求定制以及通过javascript直接与节点合作的情况下，hmpl模板语言可以替代htmx；例如，如果您想要创建一个包含 1000 个相同节点的循环，同时具有面向服务器的 ui 的优势，那么它也适合该任务。如果目标是完全减少使用 javascript 的工作，或者使用已建立的经过测试的模块以及通过最少量的 html 代码与服务器进行简单的连接，那么 htmx 就很适合。

感谢大家阅读这篇文章！

链接：

https://hmpl-lang.github.io

https://htmx.org

理论要掌握，实操不能落！以上关于《HMPL - HTMX 的最佳替代品》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！