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

Ways to make a web component

webcomponents.dev

Post reply on HN
Print view View original

51–60 of 200 posts

Re: Ways to make a web component

#51

Post by Vinnl »

badsectoracula wrote: post #20

I'm not into web development at all so this sounds very new to me, but aren't components in general meant to be self-contained so that they can be reused as "building blocks" for larger applications (or pages, i guess)? Doesn't using a framework in this case mean that you also have to at least bundle that framework with the component? What happens if you want 10 components that each use a different framework? Or some…

Right on the money. In fact, unless this changed recently, you also can't use two components that both depend on different, incompatible versions of the same third component.

Re: Ways to make a web component

#52

Post by clairity »

Ciantic wrote: post #48
clairity wrote: post #31

is there any reason you can't write a web component with a block, a block, and a bunch of html? the wedging everything into js is messy, to say the least. it seems the main benefit is being reusable and tightly scoped, but with randomized class names, you could tightly scope the aforementioned bundle as well. even better would be if html added 'for' attributes to and tags, like labels have, so you could target nodes…

If you want single file components, you should look at the Svelte ( https://svelte.dev/ ). It also compiles the framework away, which is the reason it appears very high on that list when it comes to size.

cool, i peeked at svelte when it was posted about on hn before, and liked what i saw in the few minutes i spent on it. i should take a deeper look.

Re: Ways to make a web component

#53

Post by clairity »

ragerino wrote: post #42
clairity wrote: post #31

is there any reason you can't write a web component with a block, a block, and a bunch of html? the wedging everything into js is messy, to say the least. it seems the main benefit is being reusable and tightly scoped, but with randomized class names, you could tightly scope the aforementioned bundle as well. even better would be if html added 'for' attributes to and tags, like labels have, so you could target nodes…

Problem here is CSS, JavaScript, and HTML. You might use variables, functions or attributes, styles, tags, that would interfere with other components. That's why you want an additional layer like Angular2+ taking care of that.

yes, that's the scoping issue i mentioned, which can be solved other ways, like with admittedly-not-ideal randomized classes (or 'for' attributes, perhaps with css-style selectors rather than just for id's).

Re: Ways to make a web component

#54

Post by spankalee »

badsectoracula wrote: post #20

I'm not into web development at all so this sounds very new to me, but aren't components in general meant to be self-contained so that they can be reused as "building blocks" for larger applications (or pages, i guess)? Doesn't using a framework in this case mean that you also have to at least bundle that framework with the component? What happens if you want 10 components that each use a different framework? Or some…

> Doesn't using a framework in this case mean that you also have to at least bundle that framework with the component?

You should depend on any dependencies (including frameworks), but you shouldn't bundle them, exactly so that when an app is bundled it can do the efficient thing and share dependencies.

> What happens if you want 10 components that each use a different framework?

One reason to now use frameworks, but use smaller modern rendering libraries, or none at all. In a large application it's probably not a big deal to use a couple of 3KB libraries - you'd still be far under a typical framework in weight.

> Or some of them use the same framework but different versions?

That should be fine and is a huge reason to use web components. When you have a stable component boundary you can upgrade libraries a component at a time, rather than needing to upgrade the whole application at once. Yes, you might have some overhead during the transition, but at least you aren't stuck. You might not even deploy during the transition, but at least you could. Framework transitions are super tough in monolithic frameworks and I've worked with teams that use web components specially to get around that.

> What about the same version, does that get duplicated for each component or they get shared?

Again, components should be distributed unbundled so that bundlers do the right thing. It's similar to not bundling React with every React component, or jQuery, etc.

Re: Ways to make a web component

#56

Post by clairity »

eeJah9to wrote: post #36
clairity wrote: post #31

is there any reason you can't write a web component with a block, a block, and a bunch of html? the wedging everything into js is messy, to say the least. it seems the main benefit is being reusable and tightly scoped, but with randomized class names, you could tightly scope the aforementioned bundle as well. even better would be if html added 'for' attributes to and tags, like labels have, so you could target nodes…

You can, using the template element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/te... I tried that for webcomponents, but I found more to my taste to actually have everything in my javascript file rather than to jump between files (it's not that messy if you keep your components smalls).

neat, i remember running across that a while back, but promptly forgot about it. thanks for the reminder!

Re: Ways to make a web component

#58

Post by mekkkkkk »

the-dude wrote: post #28
eeJah9to wrote: post #23

I've rewrote the frontend of one of my personal apps from react to webcomponents lately. For me, the most interesting aspect was that it's part of standards, requiring no dependency, so it means that I can use this app for decades without having to maintain it. For the same reason, only the first example in this page would do for me (the one based on standard without using any library). But I suppose that for actuall…

> so it means that I can use this app for decades without having to maintain it. That seems highly optimistic to me.

Considering all mothballed APIs still supported in modern browsers I'd say it's accurate.

Re: Ways to make a web component

#59

Post by skratlo »

badsectoracula wrote: post #20

I'm not into web development at all so this sounds very new to me, but aren't components in general meant to be self-contained so that they can be reused as "building blocks" for larger applications (or pages, i guess)? Doesn't using a framework in this case mean that you also have to at least bundle that framework with the component? What happens if you want 10 components that each use a different framework? Or some…

Sums up "state of the art" web we're using right now = absolute mess, bail out if you can, save yourself, stay sane

Re: Ways to make a web component

#60

Post by rishav_sharan »

It infuriates me that the concept of composable web pages using small templates/components is not baked into the html spec and supported by browsers.

Every bit of code that we write in any programming language is made of composable bits which can be imported into other bits of code.

But we cannot do anything similar with html. every time any attempt at having composable component based html is made, it gets mired down in arguments, and we end up with Frankenstein monsters like Web Components, Shadow DOMS etc.

Web shouldn't be this hard. but the html governing bodies and the browsers have done a horrible of taking it forward.

Post reply on HN