Hello everyone! In this article I would like to tell you about the start of the project, which I think may be of interest to you. The work on the code was carried out for a long time, I also received help from contributors, but now I think it is ready for the production version.
. It is a small template language for displaying UI from server to client. It is based on customizable requests sent to the server via fetch and processed into ready-made HTML.
In fact, it is really good as an alternative to modules like , because it allows you to create dynamic interfaces with a minimum set of configurable parameters, as well as the size of the output files. This is achieved by working with the server, when we prepare the UI there, and we only transfer it to the client via API.
How does this work in code?
Let's take as an example a small email registration form, where there will simply be an input and a button:
import { compile } from "hmpl-js";
const templateFn = compile(
`<div>
<form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form">
<div class="form-example">
<label for="name">Enter your email: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Register!" />
</div>
</form>
<p>
{
{
"src":"/api/register",
"after":"submit:#form",
"repeat":false,
"indicators": [
{
"trigger": "pending",
"content": "<p>Loading...</p>"
}
]
}
}
</p>
</div>`
);
const initFn = (ctx) => {
const event = ctx.request.event;
return {
body: new FormData(event.target, event.submitter),
credentials: "same-origin",
};
};
const obj = templateFn(initFn);
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);
The result of the code:
The Importance of a Server-side Approach
Now imagine that we have a site with dozens of pages and a bunch of forms, buttons, carousels, menus, submenus and everything. In this case, we get a huge number of files and modules, which will ultimately be loaded by the end user in the built version. This can last for several dozen seconds, and if a person visits the site for the first time, then the chance of closing the site will be high.
SOCIAL SHARE CARD GENERATOR