🐜 HMPL.js: Small Template Language. Reduce the build size several times 📦

TL;DR

When you work with modern frameworks, the first question that comes up is the size of the bundle you generate.

Yes, of course not first and foremost, but the client doesn't care how the developers do the project. He wants the site to load quickly!

So, in this article I would like to look at a small template language that will help you make the same application, but with much less effort.

Well, let's see what this project is 🔎

👀 Is there an example of reducing the build size?

We'll take a specific application on Next.js and HMPL.js and see how much it will weigh in the end.

📦 Next.js build:

📦 HMPL.js build:

This build is 10x smaller than the Next.js build. Moreover, we keep the interface in its original form, without losing any advantages (except for indexing by robots).

This is just a regular landing page without any frills. Just a couple of animations in the banner and a countdown for a limited offer.

Also, it would be great if you supported the project with your star! Thanks ❤️!

💎 Star HMPL ★

📊 How does it compare to other modules?

Obviously, it's not entirely fair to take Next.js, since it's a bit different, but nevertheless it's fair, because our goal is to make a site with a good interface, and for this purpose all means are good.

But let's try to compare it with similar modules:

And here too it is clear that the applications from this test are smaller in the result, even if we compare them with Alpine.js, which essentially does the same thing.

🖋 What does the syntax of a template language look like?

The template language provides the following block extension for HTML:

<div class="wrapper">
  {{#request src="/api/my-component.html"}}
    {{#indicator trigger="pending"}}
      <p class="my-indicator">Loading...</p>
    {{/indicator}}
  {{/request}}
</div>

Here, we are describing a certain component (which is not really a component, since it is a helper block), but nevertheless, for general understanding it is perfect. Instead of it (like outerHTML), we load the HTML that comes to us from the server.

⚙️ Try this project

• Package Manager: You can install it by typing npm i hmpl-js in the terminal
• CDN Method: You can load these libraries directly from a CDN by embedding the following script tags in your HTML:

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

• Local Setup: If you prefer offline usage, download the files and host them yourself - functionality remains identical.

✅ Our code is Open Source

So you can take part in it too! We welcome activity and want to make this project better!

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

Thank you very much for reading this article! I hope this project will be useful to you! ❤️

💬 What do you think? It will be interesting to know in the comments!