[danielrhodes]

It seems like Web Components are ideal for libraries shipping pre-built components, which is probably why Mux finds it compelling. From Mux's point of view, they want the highest level of compatibility with the least amount of framework lock-in. For example, they don't want to have to ship a library for React and another one for Vue and another one for bare bones JS/HTML.

In terms of building a web app where you control the environment end-to-end, I don't think there's any inherent upside to using Web Components over React.

[dylanjha]

(author from Mux here) -- that is correct. For the stuff we build for in-house use on mux.com and dashboard.mux.com we have a components library written in React.

You nailed it that we are shipping SDKs with visual components (like a video player) that need to be compatible across all kinds of frontends.

Instead of N number of SDKs to maintain where N is every front end framework, we have 2: a web component, and a React wrapper around the web component. Maybe in the (near) future we only have to maintain 1.

[spartanatreyu]

> I don't think there's any inherent upside to using Web Components over React.

The upside is that web components will last longer than react components.

There was a great blog post about this very thing and why someone chose them over react components in their use case (making their code migration-proof across updates and stack changes): https://jakelazaroff.com/words/web-components-will-outlive-y...

[lmm]

> The upside is that web components will last longer than react components.

How much are you betting? React components have been around longer and are more widely established, so personally I'd expect them to last longer.

[spartanatreyu]

> How much are you betting?

If you're prepared to put money down on it, I'd wager $500USD on longbets that Web Components will still function in 20 years.

And I'd wager another $500USD on longbets that it will be easier to port a web component written in 2024 into a new project written in 2044 than it will be to port a react component written in 2024 into a new project written in 2044.

The reason why I'm so confident is that Web Components are already a standard.

[stickfigure]

I am not a betting man, but I would not be so sure. The web is littered with abandoned standards, and Web Components - while by no means a failure - have not really achieved widespread adoption yet.

As someone who has been doing GUI development since 16-bit Windows, it's really remarkable to me how much staying power React has. It's 10 years old and still the dominant way of building web applications. I can't think of any other frontend library (web or native) that has had that long of a run at the head of the pack.

What I'd be most concerned about with any 20-year bet is what new paradigm/library might come along and supplant the old ways. Standard or not, React has a critical mass that will keep it viable even if it becomes "legacy". If some new hotness makes web components look old-fashioned, the small community could disappear pretty fast - browser standard or no. Ask any XSLT developer.

[spartanatreyu]

> The web is littered with abandoned standards, and Web Components - while by no means a failure - have not really achieved widespread adoption yet.

Web Components are used by internally by browsers to implement elements.

As dannye stated (https://news.ycombinator.com/item?id=40292970): input, textarea and video are all web components. And since the major browsers have implemented those elements in that fashion I think it's safe to say they have most certainly reached widespread adoption. (even if most people haven't realized yet)

> I can't think of any other frontend library (web or native) that has had that long of a run at the head of the pack.

Flash and jQuery come to the front of my mind. React (or at least the React of today) will one day be looked back just as we look back at what came before it.

I think it'd probably be fair to say we're at that point about 10 years after the record-tuple proposal goes through and the explicit resource management gets a syntactic sugar upgrade a la promises to async/await. They shift the paradigm enough that the old assumptions used when building our current frameworks will need to be re-examined. New frameworks will be able to blossom, and/or the current frameworks will shift enough internally that they won't resemble how they are today, and they will have to drop support for older code, or run slower compatibility layers that no one would want to use on newer projects.

Even if one of those proposals fails to go through, we would still have other standards moving with enough momentum to eventually change the landscape. In the long term, I'm looking at a lot of capabilities being added to wasm to make compile-to-wasm look more attractive.

[stickfigure]

<software that is used internally in some popular software> doesn't grant network effect - after all, the team(s) that maintain the software could replace the implementation and nobody would be the wiser. The countless humans trained to write React code are harder to fix.

Flash and jQuery are contenders, but still aren't comparable. They didn't run as long at the head of the pack, and the web (and web development community) was much smaller back then. React is still going strong.

I agree with you, all things (and especially all technologies) end. But I'm not ready to speculate what the post-React world will be like. I don't think we've even seen "peak React" yet.

[1oooqooq]

> used internally

and that's why it's going to fail.

you cannot do something based on progressive enhancement and not repeat tons of html with web components.

but i guess that's why we have noscript tag. /shrugs

[lmm]

I'm not in the US so I'm not sure longbets would work (AIUI it's set up to do some charitable-donation tax arbitrage that only works for US taxpayers and means you can only take your winnings via a US 503(c)?) but I'm up for that second bet if we can nail down the criteria a bit more.

(My reason is that I've seen standards come and go and have found e.g. old files easier to open when they're in nonstandard-but-popular-in-the-past formats than when they're in a standard format that didn't see wide adoption.)

[spartanatreyu]

I'm not in the US either but I'm sure someone will know how to make it happen, even if it goes to charity or something. (no crypto though)

I guess the second bet's criteria would depend on both the recommended practice for moving components today and the recommended practice in the future (which we don't know yet so it'd have to be done in good faith).

Currently, web components are designed to be portable so they can easily be ported between projects by copy-pasting a single hunk of code.

Whereas react components can be copy-pasted, but (as far as standard practice is concerned) require build systems and their dependencies (both of which rot over time) before they can be considered functional.

Aside: There's an argument to be made about the difficulty of migrating some web component based design systems (due to build systems and dependencies), but those difficulties that would be experienced are locked into the design system itself and would be experienced regardless of whether the design system was implemented with web components, react, vue, svelte, angular, lit etc... The bet is about an individual component and how easy it would be to port.

-----------------------------------

To respond to your reasoning, I feel that it's important to point out there is a difference between standards and web standards.

The pendulum of standards themselves may come and go, but web standards almost entirely swing towards the coming side. The going side is reserved almost entirely for newer standards that subsume older web standards so the older web standards are still supported.

Anyone can make a standard, but a web standard proposal doesn't become a web standard until it has become adopted and implemented. This means that web standard proposals can be thrown away without affecting web standards themselves.

It takes a black swan event to remove a web standard (e.g. spectre/meltdown leading to SharedArrayBuffer's removal).

When it comes to web standards, backwards compatibility is sacrosanct.

Consider this simple ES1 example code:

-----------------------------------

var person = {

  name: "John",

  age: 30,

  sayHello: function() {

    console.log("Hello, my name is " + this.name + ".");

  }

};

console.log(person.name); // Output: "John"

person.sayHello(); // Output: "Hello, my name is John."

-----------------------------------

It still works.

Now try to picture this functionality implemented in "nonstandard-but-popular-in-the-past formats" like java applet, flash file, coffeescript and an old jquery plugin.

Would that code be more straight forward to make functional today than the web standard ES1 code above?

Now that question above doesn't neatly fit with your reasoning because you were comparing "nonstandard-but-popular-in-the-past formats" with "a standard format that didn't see wide adoption". I think we can both agree that ES4 was something that fit into the second bucket. And judging by your comments I think you would say that Web Components as they exist now would also fall into that second bucket.

But I would counter that with:

1. Web components already have wide adoption even if a lot of people aren't aware about it. (see comment: https://news.ycombinator.com/item?id=40295978)

2. Backwards compatibility is sacrosanct.

[lmm]

> I'm not in the US either but I'm sure someone will know how to make it happen, even if it goes to charity or something. (no crypto though)

I'm not up for a charity thing - if we're betting I want to be able to win as well as lose - but if there's a way to do it then I'm down.

> I guess the second bet's criteria would depend on both the recommended practice for moving components today and the recommended practice in the future (which we don't know yet so it'd have to be done in good faith).

Right, yeah, happy to just say we look at it in good faith and reach a conclusion.

> Currently, web components are designed to be portable so they can easily be ported between projects by copy-pasting a single hunk of code.

> Whereas react components can be copy-pasted, but (as far as standard practice is concerned) require build systems and their dependencies (both of which rot over time) before they can be considered functional.

I don't think that's a huge difference; copy-pasting your dependency declarations and your implementation is not conceptually any harder than copy-pasting just your implementation. If the accepted dependency format changes, or your component needs custom build steps, then that might be a harder piece of porting (but I wouldn't consider a simple mechanical change like changing dependency notation from JSON to XML to be a significant burden).

[dannye]

I would go all-in. Web Components is not (just) about technology, but about 4 companies working together on setting a standard. Companies that used to fight in the Browser Wars now work together on the standard. They are the WHATWG that took the role of the W3C HTML/Web workinggroup. 4 companies ... Apple, Google, Mozilla and Microsoft

And the WHATWG (for now) is "by invitation only"... note the big name missing.

[dannye]

Note: Everyone uses Web Components. WTF?! Why does the <VIDEO> tag has a shadowRoot???

Browser Vendors have been using Web Component technology for INPUT, TEXTAREA, VIDEO and the like, for many many many moons now.

[troupo]

> I'd wager $500USD on longbets that Web Components will still function in 20 years.

You've already lost that bet. WebComponents v0 was not only introduced and implemented, but Google rewrote Youtube with it.

It got promptly deprecated, replaced with v1, and v0 lingered for another four years before Google rewrote Youtube with v1

[spartanatreyu]

v0 wasn't standardized, so it doesn't count.

Also to add some more specificity to the bet, I mentioned a web component created in 2024 which wouldn't be v0.

[troupo]

Good point :)

[postepowanieadm]

> $500USD in 20 years

Indexed for inflation?;)

[danielrhodes]

Your quote omits the qualifying part of that sentence, which is important. :-)

What does it mean to "last longer" when it comes to your own codebase? And why would web components help with that?

[spartanatreyu]

The linked blog post goes through that.

[wokwokwok]

They won't last longer than a react component (that's not even the claim the linked post is making); you can just use them in a different framework, if you care about that.

...which is the point the parent comment was making.

[sdwr]

> code saved on laptops that hadn’t been turned on in a full decade. The more dependencies a website had, the more difficult it was to restore

is the crux for me. When I clone one of my Vue projects from a few years ago and try to run it, it is always broken. My (new) node version is incompatible with a Vue core library, then updating the core library breaks some other libraries and requires config file changes.

[danielheath]

I wish vendoring dependencies wasn’t viewed with such suspicion in tech.

I store dependencies in-repo whenever I can get away with it; it eliminates whole classes of devops/CI issues.

[djbusby]

I read the point as WebComponents will last longer because "a standard" while React is "a Facebook standard".

[hn_throwaway_99]

There's also the "React is the industry standard that tons of developers and companies use" vs. the "WebComponents is the 'official' standard that nearly nobody uses".

Yes, I'm being hyperbolic. But if you're worried about longevity I would certainly hitch my wagon to React before I hitched it to WebComponents.

[croes]

React is like JQuery.

[afavour]

Unfortunately I don’t think that comparison quite holds. jQuery is mentioned less and less because core browser APIs implemented a lot of what it does and made it unnecessary.

Even if Web Components solve the “create a component” part of React there’s still an absolute ton of stuff it provides that Web Components don’t. I tend to think of WC as a low level API you want a library interfacing with rather than your own code, e.g. the way Svelte exports web components.

[Dylan16807]

If it's a choice between removing the JQuery dependency from old JQuery code, or updating equally old vanilla javascript, I'm going to be picking the first option a lot.

[sdwr]

The point isn't that it's a standard, it's that it's implemented in browser (not in a framework), and is a lot closer to the web equivalent of "bare metal". There are less moving pieces that will break backwards compatibility in the next 10 years (is the hope)

[pier25]

> I don't think there's any inherent upside to using Web Components over React.

What about using web components in a server rendered application without needing to resort to running JavaScript in the server?

[junon]

Yep, pretty much. They're a pain to develop for but worth it if you're writing libraries.