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

31–40 of 200 posts

Re: Ways to make a web component

#31

Post by clairity »

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 in the dom by id.

perhaps being composable is a bigger challenge, but is it insurmountable with this approach?

Re: Ways to make a web component

#32

Post by k__ »

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…

Did they improve the SSR story lately?

Re: Ways to make a web component

#33

Post by olex »

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…

This is exactly how vue.js "single file components" work - a with the "bunch of html", and optional blocks.

Re: Ways to make a web component

#34

Post by bobthepanda »

sillysaurusx wrote: post #25
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…

Nope, your thoughts are all essentially correct. The answer is “yes” to all of them; even the ones where it seems that “yes” would be contradictory. Bundle everything? Yep. Self contained? Yep. 10 components that open connections to 10 different severs? Yep. The web is so massive that there is a way for pretty much everything (though for some reason webdevs try not to admit this).

> though for some reason webdevs try not to admit this

This is mostly because if you can keep development paradigms consistent within your job, that is one less thing to whack-a-mole in the fun game of "with permutation X of the endless combination of browser (and version), OS (and version), etc. why isn't the thing working?"

Re: Ways to make a web component

#35

Post by weaksauce »

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?

yes something like react would be the main framework on the page. i guess this is showing how much overhead there is in each of the different of frontend frameworks and also what the code to do a relatively simple but not trivial example looks like.

Re: Ways to make a web component

#36

Post by eeJah9to »

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).

Re: Ways to make a web component

#37

Post by crooked-v »

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…

Two big points:

a. You can treat it as 'just Javascript' when dealing with bundlers (both complicated stuff like Webpack and simple hacky things like Gulp script concatenation).

b. For JSX and similar variants, because even the template part is 'just Javascript' with semantic sugar for tags, you can statically analyze it in a way that you can't with separate HTML and script content.

Re: Ways to make a web component

#38

Post by infinityplus1 »

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…

Isn't React itself still basically written using standard JavaScript? Why won't it run in the future?

Re: Ways to make a web component

#39

Post by yesimahuman »

srameshc wrote: post #6

I love the simplicity of StencilJS. Not sure why it's adoption is so low but those guys have put a lot of work. Much better than what Google is doing with Lit Element.

Thanks! I wouldn't say Stencil's option is low. It's being used in some pretty major apps today, like Apple Music, Amazon music, and powering the next version of AWS Amplify components. Not to mention powering every Ionic Framework component which is upwards of 15% of the app stores (not all use latest w/ WCs however). One downside to that is npm stats won't show dependency network effects with stencil because it is compiled out for component collections like framework.

Re: Ways to make a web component

#40

Post by staycoolboy »

sillysaurusx wrote: post #25
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…

Nope, your thoughts are all essentially correct. The answer is “yes” to all of them; even the ones where it seems that “yes” would be contradictory. Bundle everything? Yep. Self contained? Yep. 10 components that open connections to 10 different severs? Yep. The web is so massive that there is a way for pretty much everything (though for some reason webdevs try not to admit this).

Except for the pure HTML5 solutions, everything else uses a JS framework.
Post reply on HN