search

WebReflection / hyperHTML

A Fast & Light Virtual DOM Alternative
ISC License
3.07k stars 112 forks source link

Suggestion: split hyper.Component into it's own module and only hyper rendering in it's own #214

Closed dsadhanala closed 6 years ago

dsadhanala commented 6 years ago

You can close this issue, if this request is out of scope for this project.

If I'm not wrong recent size increase (use to be 2.5kb, now 4.8kb+) is due to the new addition Component part, wanted to check and see if it is possible to split them into two separate modules & bundles so that default bundle contains both rendering and Component functionality and other focus only on rendering engine, something similar to lit-html, so that it can be used inside customElements without needing to import Component.

WebReflection commented 6 years ago

If I'm not wrong recent size increase (use to be 2.5kb, now 4.8kb+) is due to the new addition Component part

Component is like 0.2K once minified and gzipped: https://github.com/WebReflection/hyperHTML/blob/master/esm/classes/Component.js

The problem with you comparing hyperHTML to lit-html is that lit-html needs pretty much all its extensions to compete with hyperHTML and once you do that, lit-html is bigger than hyperHTML.

https://gist.github.com/WebReflection/fadcc419f5ccaae92bc167d8ff5c611b

Regardless, the problem of the Web is not 5K of library that makes you save tons of unnecessary KB keeping very wide compatibility.

Indeed, most of the weight of hyperHTML is due its fixes for browsers such Edge X, IE11, IE10, IE9, IE8 (combined with the no.js file), Firefox ESR, Firefox < 43, WebKit Mobile, etcetera, etcetera.

lit-html targets only relatively modern browsers, it targets what Polymer targets too.

As summary

hyperHTML.Component is there to stay. It's the most lightweight component abstraction you can have these days, and it needs hooks in core to also be super speedy.

WebReflection commented 6 years ago

Reminder

I think if your concern is the Component size, you haven't used hyperHTML much. Please give it a better try and forget about Component if you don't need it.

Worth mentioning that hyperHTML already works out of the box with Custom Elements too and it scores maximum points (100% score look for hyperHTML)

https://custom-elements-everywhere.com

dsadhanala commented 6 years ago

Thanks for the clarification!

Component is like 0.2K once minified and gzipped hyperHTML.Component is there to stay.

I see, I'll try with uglify/closure compiler to tree shake and eliminate unused code, I should be ok.

your concern is the Component size, you haven't used hyperHTML much

May be true, the reason for my suggestion to split was to have Component scalable for long run, I thought having clear separation of module helps for long run, as on when you add more features it can grow. Again as a owner of this amazing library it's totally up to you, as you maintain it. That's why I mentioned to close 👍

the average Website size, worldwide, is 3MB

that's including application/website code, In my opinion if I can minimize loading unused code I can better optimize the overall page load. since you mentioned it's just 0.2Kfor component, I think no further optimization is needed at this point.

Thanks again for your time and patience, I really appreciate.

WebReflection commented 6 years ago

I see, I'll try with uglify/closure compiler to tree shake and eliminate unused code, I should be ok.

The Component is hooked into the render logic, nothing I believe you can really three shake, which is why I am saying don't worry, that's not your issue.

my suggestion to split was to have Component scalable for long run

Component is not a mandatory tool to use. You can use or you can ignore it. These days I am using HyperHTMLElement and ignoring Component 100%. Is this affecting me? No, not at all. I don't use it.

Component is lightweight for a reason and it will stay so, I am not planning to make it anything else than what it is.

I think no further optimization is needed at this point.

yeah, you should not care about hyper.Component but actually use it when you think you need something like JSX or React classes without needing Custom Elements polyfill.

It's super light, easy to use, handy and fast.