❄️Introducing the HMPL Template Language

Hello everyone! I once wrote a lot of articles, but in fact I never told what this HMPL is. Today I will correct myself and will show in full examples how it works and how it can be useful in your projects. Well then, let's go!

GIF

What is this?

How would I describe it? Probably the easiest way to describe it is: Server-side rendering (SSR) for any web application, but without robot viewing. That is, this tool will allow you to load components to the client directly from the server, and with full customization. And, most importantly, it is all like a template language, that is, everything is super convenient and practical.

GIF

????

Okay, that's what I tried to say in a few words, but in general it's worth looking at the example and then we can learn a little more.

eXaMpLe

As one example, let's take a simple clicker:

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: JSON.stringify({ action: event.target.getAttribute("data-action") }),
})).response;

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

The result will be as follows:

And, in fact, there can be a lot of examples of use. From a gallery to loading simple text.

How can HMPL help in your project?

In the project, in fact, you can come up with a huge number of situations when you might need this module. First of all, this is, of course, sharing components between sites.

If you have components like a sidebar that are repeated on several of your sites, it would be a good idea to move them to the server and get them from there via a request. By changing the template once, you will get the same result on dozens, if not hundreds of sites.

GIF

Also, such a practice of working with the server will allow to reduce the code on the client. Thus, users of the site will load the site for the first time much faster, because, in fact, the size of the bundle will be smaller.

Illusion

In this section, from a million similar articles, they write something like the summary of the article. I think that the article has one summary. We need to learn to program on paper and you can create a really cool application.

GIF

Comments

[Anthony Max]

In winter, the Ant simply has a vacation. He went for the New Year.

[Anthony Max]

Now he relaxes with a cup of hot tea, watching New Year's films.

[david duymelinck]

From all the information I have read about HMPL, I still can't figure out what is the benefit?

As I understand it, it fetches the output of an url and renders that where the application needs it. Is that correct?
If it is correct why not get all the html and javascript that is needed for the page from the server on the initial request?

I find it strange that the example you have in the post is a sidebar you want to show on multiple sites. The only sites that benefit from this are sites like wix, squarespace, shopify, and so on.
Most people don't build sites like that.

[Anthony Max]

Here. Perhaps I have said little, but I have published many articles on this subject, why it is needed:
dev.to/hmpljs/server-side-renderin...,
dev.to/anthonymax/hmpl-best-altern...

[david duymelinck]

Yeah i read those posts. Still clueless about the benefit.

For htmx I can see the benefit, but not for hmpl. I see htmx more as a turbo hotwire replacement.

If I have a backend server that generates html, and frontend code that fetches it. Why do I want a library that forces me to use their way of fetching and receiving?