🎙️我们开发HMPL是为了帮助开发者缩小Web应用程序的体积🔥

如今，网站创建的趋势正在发生变化。随着 Next.js 的出现，大多数开发者开始使用 SSR（服务器端渲染）的概念，它允许直接在后端生成动态标记。但由于这种做法是基于框架的架构，因此你无法像通常那样将其与其他技术结合使用，例如，如果你的网站已经是用 Vue 编写的。

微前端概念在这方面有所帮助，但对于预算有限的开发来说，这又是一个过于昂贵的方案，因此为了轻松实现 SSR（无需机器人），开发了这种模板语言。

🐜 HMPL

HTML是一种模板语言，它在常规 HTML 的基础上增加了请求对象。也就是说，你可以在标记中直接描述你想通过哪个 API 路径获取组件。

import hmpl from "hmpl-js";
// We create a constructor function
// that will generate instances to receive our elements.
const templateFn = hmpl.compile(
  `<div>
    <h1>
      {
        {
          src: "http://localhost:8000/api/getTitle"
        }
      }
    </h1>
  </div>`
);
// Generate an instance and get an element from it
const content = templateFn().response;
// Mounting our element into the DOM
document.querySelector("#app").append(content);

🌷 示例应用

利用该模块，创建了一个图库应用程序，实现了服务器上的动态内容交付。

示例本身位于此处的GitHub 存储库中。

另外，如果您能用星星支持一下这个项目就太好了！谢谢❤️！

💎 星级 HMPL ★

📊 尺寸对比

让我们比较一下两个具有相同用户界面的应用程序的代码，并看看它们的大小：

我们可以看到，HMPL 点击器的文件大小比相同的 Vue 点击器界面要小。

此外，本文还与其他流行的 UI 创建工具和纯 JS 进行了比较：

结果基于对本存储库中应用程序大小的比较。

⚙️ 安装

• Node 包管理器：您可以使用以下命令通过 npm 下载它。npm i hmpl-js

• 内容分发网络：您可以使用以下代码通过 CDN 包含依赖文件：
  

<script src="https://unpkg.com/json5/dist/index.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>

• 本地下载：或者，第二个选项也有类似的选择，只需将文件下载到您的本地计算机即可。

💬 反馈

你可以在评论区写下你对这个模块的想法，我很想看看！或者，你也可以加入一个专门用于提问和建议的Discord频道，我和其他成员会在那里尽力解答！

✅ 本项目是开源的

所以你也可以参与其中！这也意味着你可以将其用于商业用途：

代码仓库：https://github.com/hmpl-language/hmpl
网站：https://hmpl-lang.dev

感谢阅读！