❄️Introducing the HMPL Template Language

#webdev #programming #opensource #javascript

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!

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.

????

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.

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.