HTML with Superpowers: An Introduction to Web Components • Hacker News Board

Re: HTML with Superpowers: An Introduction to Web Components

#71

Post by tekkk » Wed, Jan 11, 2023, 12:35 PM UTC

jongjong wrote: post #26

qwtel wrote: post #22

Just awful. 10 years in the making (if you can call endless bikeshedding committee meetings the "making" of anything) and still barely usable. It offers nothing in way of ensuring that custom elements behave like builtin HTML elements. Half the elements I've come across will break or perform no-ops when you update an attribute or set a propety after it was attached to the DOM. Nevermind detaching and reattaching to t…

I used Web Components (HTMLElement) recently and did not encounter any of these issues. I found it more snappy and reliable than frameworks like React or VueJS in terms of adding and removing components dynamically. I did find that it provides a lot more flexibility than front end frameworks (more ways to make mistakes?) and the code was more verbose. If I had to start a project from scratch today, I would consider g…

Are you serious? Using vanilla Web Components is just god awful and I can't recommend them to anyone with a straight face. Not having had experience with "normal" web frameworks like Svelte, React or Vue.

You have to invent all your own wiring and passing of events, state-management et cetera if you go that route.

Re: HTML with Superpowers: An Introduction to Web Components

#72

Post by replygirl » Wed, Jan 11, 2023, 12:40 PM UTC

tekkk wrote: post #71

jongjong wrote: post #26

Earlier quoted context omitted.

I used Web Components (HTMLElement) recently and did not encounter any of these issues. I found it more snappy and reliable than frameworks like React or VueJS in terms of adding and removing components dynamically. I did find that it provides a lot more flexibility than front end frameworks (more ways to make mistakes?) and the code was more verbose. If I had to start a project from scratch today, I would consider g…

Are you serious? Using vanilla Web Components is just god awful and I can't recommend them to anyone with a straight face. Not having had experience with "normal" web frameworks like Svelte, React or Vue. You have to invent all your own wiring and passing of events, state-management et cetera if you go that route.

it's not that much to invent. have frameworks really made it so easy that we can't bear to work with native events, manage the dom, or build reactivity with proxies or subjects? gp says there's a performance objective, sometimes it's worth building a solution that only does what you need

edit: no one is saying a purpose-built framework needs to do everything that a mass-market framework ecosystem does. it's disingenuous to think there aren't circumstances it would make sense, not all of us make forms for a living.

Re: HTML with Superpowers: An Introduction to Web Components

#73

Post by lordgroff » Wed, Jan 11, 2023, 12:43 PM UTC

KronisLV wrote: post #56

lordgroff wrote: post #3

It obviously hasn't happened, but I hope that web components eventually make serious inroads. A UI library for React, Vue, Svelte, Solid, whatever... Imagine being able to have a component library that works with any of them (or none of them). Since I really like mithril and there's one UI library, I've been playing with Shoelace and Crayons and they're pretty nice to work with, but I remain a bit puzzled why there's…

> A UI library for React, Vue, Svelte, Solid, whatever... Imagine being able to have a component library that works with any of them (or none of them). That seems to be a worthy goal, but I don't see that being usable in prod projects, at least not in the near future. The closest I've seen is something like PrimeFaces, which has components for Angular, React and Vue, which is the majority of projects I've seen out th…

Still the same issue though. What about Svelte? What about solid? What about mithril?

I know this might seem like a "who cares" sort of thing since the industry has standardized on the three listed, but I find all three overkill for a lot of things and, for example, keep my small projects in Mithril. But then I'm hit with either using Construct UI (which is honestly ok, this is all internal stuff), or having to make all the components myself.

What makes it such an impossibility for production? Even if, as in the case of Ionic, they provide web components but also wrap them up for React, Vue and Angular.

Re: HTML with Superpowers: An Introduction to Web Components

#74

Post by fergie » Wed, Jan 11, 2023, 12:44 PM UTC

VoodooJuJu wrote: post #68

fergie wrote: post #64

But I just want to be able to specify a header or a footer in vanilla HTML...

Although not vanilla HTML, server side includes are the closest to this that we've got. I use them quite extensively. This is basically what my boilerplate looks like: I'll put all my favicon, CSS, and other common head data in the /ssi/head.html file. Nice and simple and good enough for me. Can make it even more minimal by moving the and tags into their respective SSI files.

Unfortunately SSIs dont work on s3 and some other plaforms, thereby negating their utility for running static sites on CDNs or keystores. But YES- why isn't there an SSI equivalent in the HTML spec?

Re: HTML with Superpowers: An Introduction to Web Components

#75

Post by tekkk » Wed, Jan 11, 2023, 12:46 PM UTC

replygirl wrote: post #72

tekkk wrote: post #71

Earlier quoted context omitted.

Are you serious? Using vanilla Web Components is just god awful and I can't recommend them to anyone with a straight face. Not having had experience with "normal" web frameworks like Svelte, React or Vue. You have to invent all your own wiring and passing of events, state-management et cetera if you go that route.

it's not that much to invent. have frameworks really made it so easy that we can't bear to work with native events, manage the dom, or build reactivity with proxies or subjects? gp says there's a performance objective, sometimes it's worth building a solution that only does what you need edit: no one is saying a purpose-built framework needs to do everything that a mass-market framework ecosystem does. it's disingenu…

Hah hah. You make me laugh. Sure boss, not much. If you're doing it for fun and on your own time, okay. For real work, don't know who wants to pay you to invent your own framework.

Re: HTML with Superpowers: An Introduction to Web Components

#76

Post by dmitriid » Wed, Jan 11, 2023, 12:46 PM UTC

replygirl wrote: post #72

tekkk wrote: post #71

Earlier quoted context omitted.

Are you serious? Using vanilla Web Components is just god awful and I can't recommend them to anyone with a straight face. Not having had experience with "normal" web frameworks like Svelte, React or Vue. You have to invent all your own wiring and passing of events, state-management et cetera if you go that route.

it's not that much to invent. have frameworks really made it so easy that we can't bear to work with native events, manage the dom, or build reactivity with proxies or subjects? gp says there's a performance objective, sometimes it's worth building a solution that only does what you need edit: no one is saying a purpose-built framework needs to do everything that a mass-market framework ecosystem does. it's disingenu…

> we can't bear to work with native events, manage the dom, or build reactivity with proxies or subjects

I mean, you can do all that. And either spend your time writing tons of boilerplate code, or reinventing half of those frameworks and libraries anyway.

And still having to deal with issues like having to remember that they don't participate in forms (more JS to each component), that a11y can suddenly be broken (when your label references an element inside shadow dom), that wcs are not extensible to SVGs (which is important if your field is data visualisation) etc.

At which point you will go "why bother".

Re: HTML with Superpowers: An Introduction to Web Components

#77

Post by fergie » Wed, Jan 11, 2023, 12:49 PM UTC

tiagod wrote: post #67

fergie wrote: post #64

But I just want to be able to specify a header or a footer in vanilla HTML...

What's stopping you? We've had flexbox and grid for quite a while now.

Pretty sure that you can't define an HTML snippet in one file and then include it in two or more other files using flexbox or grid? Or maybe I am wrong?

Re: HTML with Superpowers: An Introduction to Web Components

#78

Post by azangru » Wed, Jan 11, 2023, 12:52 PM UTC

dmitriid wrote: post #62

azangru wrote: post #47

Earlier quoted context omitted.

Examine html source of such sites as github, youtube, redhat, adobe — you will find web components either sprinkled there or being a principal building block. They are certainly a workable solution.

> Examine html source of such sites as Just because someone uses a technology, doesn't mean it's good. I could point to plenty of sites still using first versions of Angular. Is it workable? Yes. Is it good? Also, I'd skip youtube as an example. No idea what incentives they had internally to re-write everything in web components, but they (and the web) paid dearly for it: - Youtube was re-written in v0 of Custom Comp…

> Just because someone uses a technology, doesn't mean it's good.

At least it shows that the technology is both scalable and battle-tested.

> I could point to plenty of sites still using first versions of Angular. Is it workable? Yes. Is it good?

It's legacy, as I think we will both agree. Just as jQuery is, and just as React will become sooner or later. Meanwhile, web components are the browser standard, which means that they are a model of UI code encapsulation that is here to stay.

> Also IIRC GitHub is using React as well now, but I can't find the relevant link and discussion right now.

On their promo sites, yes. And maybe in the project management tools as well. Developers of the main site are heavily into web components.

Re: HTML with Superpowers: An Introduction to Web Components

#79

Post by prox » Wed, Jan 11, 2023, 12:57 PM UTC

dmitriid wrote: post #63

lordgroff wrote: post #3

It obviously hasn't happened, but I hope that web components eventually make serious inroads. A UI library for React, Vue, Svelte, Solid, whatever... Imagine being able to have a component library that works with any of them (or none of them). Since I really like mithril and there's one UI library, I've been playing with Shoelace and Crayons and they're pretty nice to work with, but I remain a bit puzzled why there's…

> A UI library for React, Vue, Svelte, Solid, whatever... Imagine being able to have a component library that works with any of them (or none of them). You don't need web components for that. You need https://open-ui.org (started, of all people, by Microsoft). Unfortunately Google et al are too busy sinking hundreds of millions of dollars and countless man-hours into web components (with no final goal in mind and inc…

And here I am, just using vanilla JS to add functionality to default HTML. Recently did a few simple fetch and render functions and it worked fine. I guess if you go with large data structs it might be a different ball game I guess.

Re: HTML with Superpowers: An Introduction to Web Components

#80

Post by prox » Wed, Jan 11, 2023, 1:00 PM UTC

fergie wrote: post #77

tiagod wrote: post #67

Earlier quoted context omitted.

What's stopping you? We've had flexbox and grid for quite a while now.

Pretty sure that you can't define an HTML snippet in one file and then include it in two or more other files using flexbox or grid? Or maybe I am wrong?

I do this using PHP. It gets the template file, the data and off you go.