🔥I have launched a project and think it help you, maybe :)

Hello everyone! In this article I would like to tell you about the start of the project, which I think may be of interest to you. The work on the code was carried out for a long time, I also received help from contributors, but now I think it is ready for the production version.

Okay, actually it would be really interesting to show a project called HMPL. It is a small template language for displaying UI from server to client. It is based on customizable requests sent to the server via fetch and processed into ready-made HTML.

In fact, it is really good as an alternative to modules like htmx and alpine.js, because it allows you to create dynamic interfaces with a minimum set of configurable parameters, as well as the size of the output files. This is achieved by working with the server, when we prepare the UI there, and we only transfer it to the client via API.

How does this work in code?

Let's take as an example a small email registration form, where there will simply be an input and a button:

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="email" name="email" id="email" required />
    </div>
    <div class="form-example">
      <input type="submit" value="Register!" />
    </div>
  </form>
  <p>
    {
      {
        "src":"/api/register",
        "after":"submit:#form",
        "repeat":false,
        "indicators": [
          {
            "trigger": "pending",
            "content": "<p>Loading...</p>"
          }
        ]
      }
    }
  </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);
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);

The result of the code:

Quite a few characters were spent on this form, and now if we imagine that we would do the same thing on frameworks like Vue, then we would have to connect pinia in conjunction with the server, create a bunch of components and this would take up a lot of disk space.

The Importance of a Server-side Approach

Now imagine that we have a site with dozens of pages and a bunch of forms, buttons, carousels, menus, submenus and everything. In this case, we get a huge number of files and modules, which will ultimately be loaded by the end user in the built version. This can last for several dozen seconds, and if a person visits the site for the first time, then the chance of closing the site will be high.

Thus, the conversion may fall and the sales funnel that the seller has built may be ineffective simply because of this. Therefore, this project can really help, because the pages will be able to load much faster (because the entire UI is on the server), and on the client the user will see the same thing that would have been done on the framework.

Advantages of the module compared to others:

First of all, if we take HTMX, then here of course it is worth pointing out that the module works on fetch and is fully customized. That is, you can send a request as you like, anywhere and create as many nodes in the DOM as you like. Compared to alpine.js, you can create dynamics, but in conjunction with the server, which will allow you not to include additional modules in your project.

You can also work with individual files with the .hmpl extension, but for now only for webpack.

A little bit about the results and development

I hope you are interested in the project. It would be cool to know your opinion about it in the comments. It took a long time to work on it, a cool website, repository and much more were built. I hope that if it is not too much trouble for you, you could participate in the development of the project! Every week I try to publish open issues where I would need help. It would be cool to work together :). Also, since I just started, there are not many stars on GitHub and it would be cool if you liked the project, so that you would rate it with a star. Thank you!

hmpl-language / hmpl

🐜 Server-oriented customizable templating for JavaScript

Website • Documentation • Demo Sandbox • Examples

hmpl is a small template language for displaying UI from server to client. It is based on customizable requests sent to the server via fetch and processed into ready-made HTML. Reduce the size of your javascript files and display the same UI as if it was written in a modern framework.

Usage

import hmpl from "hmpl-js";

const templateFn = hmpl.compile(
  `<div>
      <button data-action="increment" id="btn">Click!</button>
      <div>Clicks: {{ "src": "/api/clicks", "after": "click:#btn" }}</div>
  </div>`
);

const clicker = templateFn(({ request: { event } }) => ({
  body: event.target.getAttribute("data-action"),
})).response;

document.querySelector("#app").append(clicker);

Why HMPL?

Using HMPL, you can multiply reduce the size of the application bundle. Full customization of the…

View on GitHub