DEV Community

Cover image for 🎙️We build HMPL to help developers make web apps smaller in size🔥

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

Anthony Max on February 11, 2025

Today, trends in website creation are changing. With the advent of Next.js, most developers have started using the concept of SSR (Server-Sider Ren...
Collapse
 
poetro profile image
Peter Galiba

The size comparison is really misleading. You also need server side code for any of the features demonstrated here, where the Vue implementation is complete.

Collapse
 
louis_cassany_24f86a9c20b profile image
Louis Cassany

Does that mean that with the server code you may even get a bigger bundle size in the end ?

Collapse
 
anthonymax profile image
Anthony Max

How? The code remains on the server, you transfer the framework via protocol. Another advantage is that this HTML can be transferred between sites.

Collapse
 
anthonymax profile image
Anthony Max

No, wait, it doesn't. Yes, you essentially transfer the code from the client to the server, but this code remains on the server, and the clients load only the framework, into which HTML from the server goes brick by brick. Accordingly, this framework will be loaded during the first and subsequent loads, accordingly the site will load faster, but heavy elements will simply be with a loader.

Collapse
 
poetro profile image
Peter Galiba

But you still need to write the server side code, which means you are writing more code than in the Vue version. The client side code difference doesn't even matter as you will be downloading more from the server through the additional requests.

Thread Thread
 
anthonymax profile image
Anthony Max • Edited

Well, yes, you still have to write code, but on the server - that's clear. No module will replace it). Regarding the value on the client - it matters. If the site is focused on SEO in search results, then the initial loading is of colossal importance. Literally, the sales funnel will simply sag for the banality that the site loads for 10 seconds, when with this approach the site will load almost instantly, because there will be nothing to load, but all components will be with loaders that come from the server. There are also pros and cons here. In fact, I am retelling the SSR advantages.

Thread Thread
 
cyanchanges profile image
Cyan

I guess the Vue version and the HTPL version code behaves differently?
The Vue code stores the temporary state on the client.
But HTPL seems stores on the server.
That introduce latency, and the effect isn't the same.
And you can use Composition API instead of Options API, for a shorter code.

Collapse
 
dansasser profile image
Daniel T Sasser II

This is the second time I have seen something about HMPL in my news feed so I guess I'll give it a test drive 😉

Collapse
 
anthonymax profile image
Anthony Max

Thanks, let's do it! If you find a bug, write to us - we'll fix it! We did 100% test coverage, but we could have missed something.

Collapse
 
louis_cassany_24f86a9c20b profile image
Louis Cassany • Edited

The size comparison is not very impressive, you don't gain that much for the added complexity and dependency.

Collapse
 
anthonymax profile image
Anthony Max

And what - honesty is the main thing. Yes, maybe it doesn't win much, well, why should I write now that it reduces by 100 times and lie? I write honestly, what is, is. Even if we take a modern web application with 100 modules with boilerplate code, well, there may be such a result, but everything is honest. I will not deceive.

Collapse
 
cyanchanges profile image
Cyan

Don't use Vue Options API, use Composition API, and the code will be shorter.

Collapse
 
john_coding profile image
John

Good article! And how does this work?

Collapse
 
anthonymax profile image
Anthony Max

Thanks! The components are taken from the server, so on the client we only have the request markup.

Collapse
 
anthonymax profile image
Anthony Max

The diagram doesn't look very good, but it looks cool on the website, with animation.

Collapse
 
ktbsomen profile image
somen das

I am creating a more simple approach to make web apps.
i added support for loops ,if-else inside of plain old HTML*

check the article on dev.to

dev.to artical link

Collapse
 
rufatalv profile image
Rufat Aliyev

Good!