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

91–100 of 200 posts

Re: Ways to make a web component

#91

Post by tshaddox »

akersten wrote: post #69
staticvar wrote: post #64

Earlier quoted context omitted.

There are also simpler ways to write vanilla Web Components. Here's an example of the counter component written in what I find a simpler fashion. https://gist.github.com/rjsteinert/779d94dfc886723c2967a6f5f...

Wow, that's so much cleaner - why don't they just do it like this in the example? I'd be much happier learning standard web components if they were all a breath of fresh air like this. Personally I'd miss the JSX syntax, but this more than makes up for it by removing the entire whacky state vs. props thing. Although- how do you represent custom props here - arguments to the constructor? That'd be really elegant. Do t…

This probably works fine for a simple leaf component like this, but this won’t compose well either, right? If every render completely overrides innerHTML then won’t all DOM state of child components get wiped? My understand is that this is a primary reason for e.g. React’s virtual DOM.

Re: Ways to make a web component

#92

Post by wishinghand »

notJim wrote: post #81
squeral wrote: post #57

Earlier quoted context omitted.

Don't bother waiting. By that time there will be another set of frameworks.

I kinda disagree, I think people are more pessimistic about fracturing than is warranted. For greenfield work, it seems like people have mostly converged on React and Vue, which are conceptually fairly similar. State libs have changed, but again the concepts translate pretty well. Similarly, webpack is the lingua franca. Years ago, we had a new build tool every week, and multiple competing frameworks (backbone, angul…

I don't think any One True Way will emerge. Svelte is coming out to challenge React and Vue, Alpine+Laravel LiveWire/Phoenix LiveView challenges the concept of needing a front end framework, WASM is challenging needing Javascript at all, and Snowpack/Parcel/Rollup are coming for Webpack's crown.

Re: Ways to make a web component

#93

Post by allover »

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…

> Or am i missing the point completely

Sort of. These are ways you can built web components today with modern conveniences that some of these _libraries_ (not frameworks), might lend you.

The site isn't claiming these different approaches can all be used together on one page in a practical way.

Technically you could, but it would have the obvious downsides you mention. This is just the reality of the limitations in the standards today.

Re: Ways to make a web component

#94

Post by postalrat »

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.

I wouldn't consider Stencil simple. lit-html and lit element are simple, stencil is not.

Re: Ways to make a web component

#95

Post by pierrebeaucamp »

rishav_sharan wrote: post #60

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 dow…

You're looking for XHTML

Re: Ways to make a web component

#96

Post by Existenceblinks »

rishav_sharan wrote: post #60

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 dow…

It was different way of thinking though. It started with just a bunch of text lines. And then SGML is about to tag those text with .. tags. It's content-first layout.

Now we think about layout first, then putting text in it. Html is so old back then when browsers did not even have sense of having standard. Html tag is already good though, we now see it as sort of function, attributes are params. Turns out it started with really good design, but different way of thinking.

Re: Ways to make a web component

#97

Post by allover »

tshaddox wrote: post #91
akersten wrote: post #69

Earlier quoted context omitted.

Wow, that's so much cleaner - why don't they just do it like this in the example? I'd be much happier learning standard web components if they were all a breath of fresh air like this. Personally I'd miss the JSX syntax, but this more than makes up for it by removing the entire whacky state vs. props thing. Although- how do you represent custom props here - arguments to the constructor? That'd be really elegant. Do t…

This probably works fine for a simple leaf component like this, but this won’t compose well either, right? If every render completely overrides innerHTML then won’t all DOM state of child components get wiped? My understand is that this is a primary reason for e.g. React’s virtual DOM.

Exactly - the innerHTML approach doesn't work for component composition and it completely fails for things like forms, where you will blow away form input focus/cursor state etc.

This was a stumbling-block of the fairly simplistic predecessors to the React/Angular generation - like in Backbone.js if you chose to implement 'render()' in such a naive way.

Re: Ways to make a web component

#98

Post by spankalee »

rishav_sharan wrote: post #60

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 dow…

The web components set of specs and proposals includes HTML Modules, Declarative Custom Elements, and Template Instantiation, the combination of which would give you exactly what you're asking for.

Re: Ways to make a web component

#99

Post by non-entity »

rishav_sharan wrote: post #60

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 dow…

I could have sworn several years ago, before React, Vue, Angular X started to pick up, that WebComponents were supposed to be that. That people were talking about how browsers would have built-in support for WebclComponents. I could be remembering wrong though.

Re: Ways to make a web component

#100

Post by bdcravens »

pierrebeaucamp wrote: post #95
rishav_sharan wrote: post #60

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 dow…

You're looking for XHTML

I don't recall components being in the XHTML spec.
Post reply on HN