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

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.

// Detect dark theme var iframe = document.getElementById('tweet-1881332519859319143-645'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1881332519859319143&theme=dark" }

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!