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( ` { { src: "http://localhost:8000/api/getTitle" } } ` ); // 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-688'); 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: 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!
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(
`
{
{
src: "http://localhost:8000/api/getTitle"
}
}
`
);
// 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-688'); 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-jsContent Delivery Network: You can include a file with a dependency via CDN using the following code:
- 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!
What's Your Reaction?
