We build HMPL to help developers make web apps smaller in size🔥

#webdev #javascript #programming #opensource

Today, trends in website creation are changing. With the advent of Next.js, most developers have started using the concept of SSR (Server-Sider Rendering), which allows generating dynamic markup directly on the backend. But since this practice is architectural due to the fact that it is a framework, you will not be able to combine it normally, for example, if your site is already written in Vue.

The microfrontend concept helps in this regard, but again, for budget development this is too expensive a scheme, so in order to painlessly implement SSR (without robots), this template language was developed.

HMPL

HMPL is a template language that complements regular HTML with request objects. That is, you can describe directly in the markup what API path you want to get the component.

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);

Example App

Using this module, a gallery application was created that implements dynamic content delivery on the server.

The example itself is located in the GitHub repository here.

Size comparison

Let's compare the code of two applications with the same UI and look at their size:

As we can see, the HMPL clicker has a smaller file size than the same Vue clicker interface.

Installation

Node Package Manager: You can download it via npm using the command npm i hmpl-js
Content Delivery Network: You can include a file with a dependency via CDN using the following code:

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

Locally: Or, there is a similar option with the second one, just download the file to your local machine.

Feedback

You can write your thoughts about the module in the comments, it will be interesting to read! Or, there is a thematic discord channel for questions and suggestions, there I or someone else will try to answer!

This project is Open Source

So you can take part in it too! This also means you can use it for commercial purposes:

Repo: https://github.com/hmpl-language/hmpl
Website: https://hmpl-lang.dev

It would be great if you supported the project with your star!

Thank you for your attention!

Top comments (4)

intermundos • Jan 22

Another HTMX?

What happens when you want to change color or other state related to button on click? Send request to the server?

Anthony Max • Jan 22 • Edited

No, it's not another HTMX for the sole reason that it's a separate template language, and HTMX is working with an existing DOM, not customizing requests, etc. I wrote an article where I described this in detail. I don't see the point in repeating myself.

Regarding the state change of elements - there are request status indicators:

{
  {
    src: "/api/text",
    indicators: [
       {
         "trigger": "pending",
         "content": "<p>Loading...</p>"
       },
       {
         "trigger": "rejected",
         "content": "<p>Error</p><button>reload</button>"
       }
    ]
  }
}

I understand what you mean, adding an attribute that will change depending on the query - you can do the same, even output it to a task, but if it's so necessary, then in any case it can be done via js like this:

const elementObj = templateFn({
  get: (prop, value, requestObject) => {
    switch (prop) {
      case "status":
         if(value === 200){
          yourEl.setAttribute(.....)
          ......
         }
        break;
    }
  }
});