Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Templating in HTML

kittygiraudel.com

Post reply on HN
Print view View original

61–70 of 78 posts

Re: Templating in HTML

#61

Post by dmitriid »

spankalee wrote: post #38
goatlover wrote: post #20

Earlier quoted context omitted.

> But I really wish there were an HTML-native way to load from separate files Seems like the JS folks blocked this from happening. It's weird to me to think we've arrived at the point where JS considerations have come to dominate for something that was built to be a document sharing platform.

No one blocked it. If you're referring to HTML Imports, the problem with them is that they didn't integrate with JS modules. There's a new HTML modules proposal [1], and with JS import assertions and CSS and JSON modules landing [2], HTML modules are probably not far behind. [1]: https://github.com/WICG/webcomponents/blob/gh-pages/proposal... [2]: https://web.dev/css-module-scripts/

goatlover: Seems like the JS folks blocked this from happening.

spankaalee: not true, they were removed because.... they were't compatible with JS

---

goatlover: JS considerations have come to dominate for something that was built to be a document sharing platform.

spankalee: here are two proposals which are... Javascript-only, don't work without javascript, and add more Javascript to the platform

---

¯\_(ツ)_/¯

Re: Templating in HTML

#63

Post by wildrhythms »

spankalee wrote: post #34

is great, but some people are surprised that it doesn't include any form of parameterization or expressions. The entire process of cloning a template and updating it with data is left up to the developer - it's pretty low level. That's why my team made the lit-html library, which uses JS tagged template literals to make elements for you, clone them and interpolate data where the JS expressions are, and then update th…

I use lit-html for front end projects at work and it's a godsend, truly. Being able to keep one central 'state' object and just re-render a template based on that without having to pull in a whole framework, without having to set up a whole webpack build process, is incredible!

Re: Templating in HTML

#65

Post by xigoi »

quickthrower2 wrote: post #64

Modulo performance, why not store the html string in JS if you are going to use JS anyway, and with string interpolation it is more templatey anyway.

With templates, you can do things like template.querySelector("label").

Re: Templating in HTML

#66

Post by wildrhythms »

pretzelhands wrote: post #60

tags are so incredibly useful for keeping your JS clean when you're not able to have something more reactive around for some reason. I've recently used that on an interview project I did ( https://github.com/pretzelhands/ubiquitous-sniffle ) and it surprisingly takes you quite far with very little effort. The only major annoyance is really manually keeping track of the elements in the DOM and .innerText and .innerHTM…

This approach always seems so easy at first glance, but I find it gets rather unwieldy as soon as I need to update some deeply nested value- like updating a innerText in cell in a table in a card in a layout of a thousand cards without re-rendering the entire collection. I started using lit-html and it solves this problem (and only costs me 3KB or so to ship).

Re: Templating in HTML

#67

Post by xigoi »

galaxyLogic wrote: post #45
Stamp01 wrote: post #12

Earlier quoted context omitted.

I think the main advantages are that you don't have to remember to add "display:none", and that it gives the structure more semantic meaning. If I look at your code and see "display:none", I don't know why you've chosen to hide it. If it's wrapped in a element, I instantly know why it's not being displayed as I now have an idea of how it's going to be used.

Yes but when you see "display:none;" isn't it obvious that the purpose is to make it visible sometime later? Also if you need to use the same HTML elsewhere, just copy the innerHTML of such an element and insert anywhere you want to.

> Yes but when you see "display:none;" isn't it obvious that the purpose is to make it visible sometime later?

Yes, but it's not obvious that it would be made visible in a different place while keeping the original invisible.

Re: Templating in HTML

#69

Post by quickthrower2 »

xigoi wrote: post #65
quickthrower2 wrote: post #64

Modulo performance, why not store the html string in JS if you are going to use JS anyway, and with string interpolation it is more templatey anyway.

With templates, you can do things like template.querySelector("label").

True! that would be less elegant with the string, as you would need to make it effectively into a or hidden div to do such a thing.
Post reply on HN