DEV Community

Cover image for 🔥I have launched a project and think it help you, maybe :)
Anthony Max
Anthony Max Subscriber

Posted on • Edited on

🔥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.

Concealment

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);
Enter fullscreen mode Exit fullscreen mode

The result of the code:

result

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.

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.

uh

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!

Star HMPL

Top comments (13)

Collapse
 
ben profile image
Ben Halpern

Neat

Collapse
 
anthonymax profile image
Anthony Max • Edited

Hello! Ty!

Hello

Collapse
 
grenishrai profile image
Grenish rai

It's really great knowing that there is some alternative to HTMX and Alpine.js. But I've few question in my mind regarding performance and security.

What specific optimizations does HMPL implement to ensure faster page loads compared to client-side frameworks? And how does it manage server load when rendering UI components server-side?

What security measures are in place to prevent common vulnerabilities such as XSS or CSRF in HMPL applications? How does it handles data validation and sanitization?

If the question regarding security is not that relevant then it's okay but I'm really curious about performance.

Collapse
 
anthonymax profile image
Anthony Max • Edited

In terms of performance, there is a point in the documentation about memoization, this mechanism allows to significantly speed up interaction with the user interface, since the components will be taken from the cache. In terms of security, DOMParser is used by default in HMPL instead of innerHTML, and all script tags are removed when processing the UI. This allows for maximum, as far as possible, safe interaction with the server. In terms of the rest, since HMPL is completely customized, that is, almost everything depends on the programmer, unlike HTMX, then the issue of security lies more with the programmer himself.

Collapse
 
leob profile image
leob

What does it do better than HTMX ?

Collapse
 
anthonymax profile image
Anthony Max • Edited

In short, just try to customize the request to the server or use AbortController and other innovations added to ecmascript. (spoiler) you are unlikely to succeed, or will not succeed at all, because XMLHTTPRequest in 2024 will not allow this

Collapse
 
anthonymax profile image
Anthony Max

Hello! I wrote about this in detail on my old account, I need to duplicate it on the new one and add it to the blog. dev.to/antonmak1/hmpl-best-alterna...

Collapse
 
leob profile image
leob

Thanks, yes I see it:

"Why use HMPL and what are its advantages over HTMX?"

Collapse
 
sujaykundu777 profile image
Sujay Kundu

Nice one !

Collapse
 
anthonymax profile image
Anthony Max

Ty!
pepe

Collapse
 
campoto profile image
Cedrick F. Campoto

Hi, I also made this,
npmjs.com/package/kwikjs

Maybe we can help each other.

Collapse
 
riley320 profile image
Riley

Looks interesting, but I’m not sure if it really beats something like Alpine.js for simplicity.

Collapse
 
anthonymax profile image
Anthony Max

Yes, it's not a matter of simplicity anymore, but of customization.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.