DEV Community

Cover image for 🎙️We have implemented new features in HMPL to help developers make web apps smaller in size🔥

🎙️We have implemented new features in HMPL to help developers make web apps smaller in size🔥

Anthony Max on March 02, 2025

Today, we have prepared some cool features that can really help developers make web applications much smaller in size. These features themselves qu...
Collapse
 
deathcrafter profile image
Shaktijeet Sahoo

So, what stops us from using rendering engines and how does this decrease the size of the website?

If you mean the size of files in an app, then you are probably targeting a niche group of developers who care about saving megabytes of space in their storages.

If you mean the bundle size of the app, then your library will also take up space in the bundle, vanilla HTML/CSS/JS will get you the smallest bundle size, that is, using template engines.

Also, with your current example, how are you planning to add a delete button to the table? I am sure you can send an html button with some JS in it, but how will that re-fetch the table element, since you have no idea what is going to be returned from the server.

Again. consider the scenario of multiple people working on an app. The backend dev changes one thing and the whole frontend is wrecked. Now let's say someone wants to do some changes, then he has to make changes to different files in multiple directories, which share component logic. For example, to change your table columns, you have to change the HMPL template, the html file in the backend and the API logic. I am aware that you can send the headers from the API, I just gave an example.

Then comes the King of the board, have you considered how open you are to XSS attacks? You are not sanitizing the responses (I dived a little bit into your code), so anything that is injected as the response is what the user sees. Now, it can also be done with direct html renders, but your method of receiving an html node makes it easier for attacks.

Something new is always welcome but consider if the overhead is worth it.

Collapse
 
anthonymax profile image
Anthony Max

Thank you very much for the detailed comment about the module! What you wrote about XSS attacks is very important. I think I should cover this topic in more detail in the future and audit the module code. The code is based on this, but it only removes the script tag:

fetch('page.html')
  .then(response => {
    return response.text()
  })
  .then(html => {
    const parser = new DOMParser()

    const doc = parser.parseFromString(html, "text/html")

   const docArticle = doc.querySelector('article').appendChild(doc);
  })
  .catch(error => {
     console.error('Failed to fetch page: ', error)
  })
Enter fullscreen mode Exit fullscreen mode

If we are talking about XSS attacks, it is important to understand that this is mainly not the fault of the module, but of the developer, who uses an API that is not under his control, or allows entering HTML code that will later come from the API. If we were talking about PHP, where there is esc_html, then I would understand, but here we need to think about it. This is a very delicate topic, because we need to carefully introduce XSS escaping where it is needed and where it is not needed.

Collapse
 
anthonymax profile image
Anthony Max

I added the task to the roadmap, I will conduct a full code audit again and as a result I will tell everyone in detail about everything in the article. Security is a very important topic, so I understand that this is now of primary importance. Thank you very much for the comment!

roadmap

Collapse
 
anthonymax profile image
Anthony Max

Regarding the rest of what you wrote. What you describe in the problem is not a module problem, but the peculiarities of server-oriented methods (SSR, SSG, etc.). I have written 100 times in articles about how a module reduces the bundle size, but I can repeat that, unlike many frameworks and libraries with a bunch of boilerplate, you put it all on the server, and on the client you have an empty framework, where the code is then loaded. Accordingly, the user will load such a framework much faster than a boilerplate from a framework, simply because the size of the final bundle will not be 200 MB, but 10 MB of empty tags with request objects.

Collapse
 
deathcrafter profile image
Shaktijeet Sahoo

I am aware of the bundle size of the SSR/SSG frameworks like Next/Nuxt etc. But your direct contenders seem to be like template engines like pug and ejs. Also, with template engines, you get SSR by default. But your framework takes away the capability, in addition to limiting interactivity (as you mentioned you don't allow script tags in returned Node). So basically, if I were to send a conditional node with different scripting needs, I would then have to include the JS for both in the initially sent JavaScript.

And what I meant by XSS attacks is that it should be done on the basis of "deny unsecure by default", i.e. tags like script should be filtered out by default, but I should have option to allow them. For example:

<div>
{{
  ...defs,
  tags: {
    span: false,
    script: true,
  }
}}
</div>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
anthonymax profile image
Anthony Max

You probably won't believe me, but a week ago I did exactly this together with filtering XSS attacks. The update will be released soon, I'm currently working on documentation, so everything will be great! As you wrote about XSS a week ago, I immediately understood what you just wrote. The time spent was additional functionality, which was described in the article)

Thread Thread
 
deathcrafter profile image
Shaktijeet Sahoo

Oh, that's great to hear! Will definitely try this framework for a project when I get the time.

Collapse
 
david_bussell14 profile image
David Bussell

Great article!

Collapse
 
anthonymax profile image
Anthony Max

Thanks!

Collapse
 
c_k_c6c7156c1f991203855d0 profile image
C K

How might you pass headers or POST to an API? It seems like HTMX would still save you, a more coding and be smaller while having a lot more features.

Collapse
 
anthonymax profile image
Anthony Max

hmpl-lang.dev/request.html#method - request methods. Regarding htmx, if it had XMLHTTPRequest standard under the hood, it would send a non-customized request, where, in fact, there is a minimum of settings, and also completely depend on DOM, without having a normal ability to manipulate the HTML that came from the server.

Collapse
 
virender_f3570b6a9356b37d profile image
Virender

Wow 😲 cool I m excited to use this 🙌

Collapse
 
anthonymax profile image
Anthony Max

Thank you! I hope the module will help you

Collapse
 
ikomoenterprise_660d32a64 profile image
Ikomoenterprise

i really need your service on my website ..

Collapse
 
slimgee profile image
Given Ncube

developers will do everything to avoid writing good old html

Collapse
 
anthonymax profile image
Anthony Max

And also, a lot of interesting things are being prepared!
roadmap

Collapse
 
dhackerspot profile image
Arri Eduk

BEST LINK FOR RECOVERY SCAM ON TRADING INVESTMENT AND OTHERS TROUBLESHOOT? 

Welcome To General Hacking Techniques Service known as DHACKERS. 
Year 2025 we are active and best in what we do, as we give Solution to every problem concerning Web3 INTERNET activities, we guide you right to a positive fund Recovery e.t.c.

Question From Most of Our Client, HOW POSSIBLE AND TIME WILL IT TAKE TO RECOVERY LOST OR SCAM  FUND?
Our Answer. 
Yes it's 89.9% possible and how long it takes us to get it recovered depend on you. 
The fact is there are lot of fake binary investment companies out their, same a lot fake recovery companies and agents too.
                  CAUTION
1). Make sure you ask one or two questions concerning the service and how they render there recovery services.

2) Do not give out your scammed details to any agent or hacker when you are not yet ready to recover back your fund.

3) do not make any payment when you are not sure of the service if you are to make one.

(4) We discovered that most of this fake hacker or agent do give us scam details, playing the victim, because they can afford the service charge.

5) As long you have your scam details with you, you can recover your fund back anytime any-day with the right channel.

Contact us from our Front Desk. binaryoptionservice01@gmail.com
For advice and services, our standby Guru email. pointekhack@gmail.com
cyberplug@gmail.com 
List of Service.
▶️Binary Recovery
▶️Data Recovery 
▶️University Result Upgraded
▶️Clear your Internet Blunder and controversy 
➡️Increase your Credit Score 
➡️Wiping of Criminal Records 
➡️Social Media Hack 
➡️Blank ATM Card 
➡️Load and wipe
➡️Phone Hacking
➡️Private Key Reset etc. 
For quick response. Email dhackerspot@gmail.com 
Border us with your jobs and allow us give you positive result with our hacking skills. 
All Right Reserved (c)2025