This is an excellent writeup, probably the best I've seen that summarizes the issues with webcomponents with the viewpoint of react. I'd like to add a few more reasons why I think webcomponents haven't had great adoption though:
1. Lack of convention. They tried to create lower level APIs rather than an opinionated structure of how to organize webcomponents, leading to the majority of consumption of them to be via a framework. They promised to remove the need for frameworks, not create more! I really wish webcomponents implemented more ease-of-use features and convention rather than relying on libraries to do this.
2. Lack of organization. This is similar to the above, but the majority of the time I see people bundling their html and css into js files in order to have a one-component-per-file approach. There's a part of me that kind of wishes we had html imports for subdirectories, and allowed you to load either button/ (and all subfiles) or even button.gz, which would have the html/css/js all bundled together in a sensible and opinionated way. The lack of opinions on how to organize your components, and the lack of html imports, have led to a chaotic mess where everything has to be interpreted before first paint.
A very enlightening history. As a non-frontend-dev, this is the context I've been missing - I finally get why Web Components have been such a confusing mess every time I've tried to learn them.
(as a bonus I very much appreciate the takedown of React's claims to "unidirectional flow" and "functional programming")
I've poked at web components on and off over the years and never been satisfied with them, but it was only recently that I took the time to put my finger on what exactly my fundamental problem with them was - I never saw any examples where data was being injected in the way you do when working with React/Vue/etc.
I didnt think Ryans article came across as angry at all, and hes forgot more about web development than 99.9% of people will ever know. His lead with solid has been followed by practically every major framework, hes usually ahead of the curve and right.
This is addressed further down (normally I might make a comment about reading the article before replying but given that it's 11,000 words, perhaps you can be forgiven):
> Quite a few of the people who build and maintain the frameworks themselves hold on to a lingering animosity because many of them feel gaslit about the capabilities of Web Components. Their perception of reality was that these standards were not useful to them at all, but the message they got – insistently – was that web components were the inevitable future of their own frameworks.
> This is the background that led Ryan Carniato, the author of SolidJS, to write his blog post Web Components Are Not the Future. That blog post is a reaction to a specific line of rhetoric that has gone unnoticed by most web developers because they were not the ones targeted. That’s why it looked like such an odd, angry, outburst to many and those foolish enough to support their chosen web development tech as if it were a football team took it or the reaction to it as validation that their “team” was better than the others.
I think people give more credit to Solid that it is deserved. What had they accomplished? Signals? It wasn't created or made popular by it. Solid is known by less than 1% of developers if much.
I was wondering if this ends up actually involving Barbara Liskov's ideas or it's just a pun or something and it does end up that these technologies have problems with Liskov Substitution, so that's nice.
While it is obviously full of interesting internet history and technical details and a bunch of good points about, well, software architecture in general, it was extremely hard to get through. It's way, way too long and makes me think that this person really loves the sound of his own voice.
The author is a perfect example of an enlightened centrist. The post starts out with a (way too long) self-righteous lecture about the tone of the internet, and then quickly devolves into just bashing react using some pretty dubious arguments. Hypocrisy at its finest.
Some of his claims about react are, at best, extremely misinformed and at worst, makes me truly want to doubt his ability to build software and abstractions -- which I don't really honestly believe, because many of his other technical discussions clearly show he knows what he is talking about, at least to some extent. Some of the claims:
- Impossible to understand what is going on in any given component: You can absolutely build components that make this hard and are tightly coupled to all sorts of state and what have you.. but you can also not. You can build tangled balls of mud anywhere, using anything.
- Claims that "large chunks of the react community have given up on unit testing".. by citing some random guy on twitter. Maybe I should create a xhitter account and make the opposite claim. Meanwhile, if you want some actual data, try looking at npmtrends for @testing-library/react.
- Blathers on about the virtual dom. Is it a perfect solution? No, no one has ever thought it was. But in practice, re-renders are rarely a real problem. It also doesn't "re-render everything every time", and when there are too many re-renders, there are ways to avoid them. If it's still not fast enough, by all means, just use something else. The part about it not "acskhually being functional" because it performs optimizations under the hood is also just straight up embarrassing. It's an abstraction. And it's never been really functional as much as has been inspired by functional programming. It's still a pretty useful approximation to think about react components.
The part about "react commodifying devs" is just patently absurd and boggles the mind. Management (with a capital M, like the Man) has always been trying to treat developers as replaceable units where one dev is the same as the next dev. React has absolutely no role in this whatsoever except for the fact that, in the context of the web, it became extremely popular extremely fast and thus appeared in more job postings than anything else, since nothing has grown within the realm of software development quite like web development has grown.
While he addresses some really interesting issues with implementing web components, he just keeps bashing react every chance he gets, and considering how much of this post is spent on that in particular makes me really feel like this post is a (not so thin) veneer on top of what was originally meant to be a rant against react, in the same vein as all the other rants he starts out his post by distancing himself from.
> While he addresses some really interesting issues with implementing web components, he just keeps bashing react every chance he gets, and considering how much of this post is spent on that in particular makes me really feel like this post is a (not so thin) veneer on top of what was originally meant to be a rant against react
Right but what's the problem of someone writing an article to make a critic against React?
> The author is a perfect example of an enlightened centrist. The post starts out with a (way too long) self-righteous lecture about the tone of the internet, and then quickly devolves into just bashing react using some pretty dubious arguments. Hypocrisy at its finest.
Honestly, your (way too long) self-righteous lecture/reply attacking someone that say bad things about React gives the same vibe.
> Right but what's the problem of someone writing an article to make a critic against React?
That's not the problem. I like React. I welcome criticism. The issue is that the author's criticism is shaky at best. Here are some snippets:
> The DOM and CSSOM as a rendering surface is just one big fucking yarn ball of interconnected side effects that have side effects of their own. This means the components themselves are largely meaningless when removed from their rendering context.
This is a weird statement to make. I'm not even sure what point he's trying to make. It's also wrong. Components can often be designed to be reusable and meaningful in various contexts. While some components may depend heavily on their rendering environment, others can be quite modular and independent.
> But React components are also intentionally abstracted away from their rendering contexts. Between the many different rendering engines, hooks, contexts, synthetic event system, server actions, and more, there really is no such thing as a genuinely “functional” React component.
The statement "there really is no such thing as a genuinely 'functional' React component" misrepresents what it means for a component to be functional.
While it's true that many React components are not pure functions (since they can have side effects and state), this does not mean they cannot adhere to functional programming principles. Functional programming does not require that every function be pure; rather, it encourages a declarative approach to managing side effects.
React’s design encourages managing side effects in a way that maintains the declarative nature of your UI. By using hooks, you can encapsulate side effects and state management within functional components without compromising their readability or predictability.
> Even if it looks like a function that just takes props and returns markup, it isn’t really. It is effectively impossible to fully understand what’s going on in any given component that’s a part of a big app just from looking at the component itself.
This is an overgeneralization. While it may be challenging to understand a component in isolation if it relies heavily on external context, this is not a problem unique to React. As previously mentioned, any developer can write shitty, garbled code.
The same could be said for a microservice, backend function, or component in any other UI framework / web app. This is the reality of any software development in a big organization.
This is where proper process, documentation, code review, and testing come into play.
Hmm, I think you make a lot less sense than the original author does. I have been through some of the things he described, I tried Web Components before React in 2014 (used ExtJS, then React since 2016, plus Solid since 2021) and the point about React commodifying developers rings true. "Oh, those are React projects, let's hire some students and fire the leads"... there are multi-billion-dollars-in-revenue companies that do that. Has it happened before React? Sure, but React definitely lends itself to that kind of thinking.
This is an excellent writeup, probably the best I've seen that summarizes the issues with webcomponents with the viewpoint of react. I'd like to add a few more reasons why I think webcomponents haven't had great adoption though:
1. Lack of convention. They tried to create lower level APIs rather than an opinionated structure of how to organize webcomponents, leading to the majority of consumption of them to be via a framework. They promised to remove the need for frameworks, not create more! I really wish webcomponents implemented more ease-of-use features and convention rather than relying on libraries to do this.
2. Lack of organization. This is similar to the above, but the majority of the time I see people bundling their html and css into js files in order to have a one-component-per-file approach. There's a part of me that kind of wishes we had html imports for subdirectories, and allowed you to load either button/ (and all subfiles) or even button.gz, which would have the html/css/js all bundled together in a sensible and opinionated way. The lack of opinions on how to organize your components, and the lack of html imports, have led to a chaotic mess where everything has to be interpreted before first paint.
A very enlightening history. As a non-frontend-dev, this is the context I've been missing - I finally get why Web Components have been such a confusing mess every time I've tried to learn them.
(as a bonus I very much appreciate the takedown of React's claims to "unidirectional flow" and "functional programming")
I've poked at web components on and off over the years and never been satisfied with them, but it was only recently that I took the time to put my finger on what exactly my fundamental problem with them was - I never saw any examples where data was being injected in the way you do when working with React/Vue/etc.
https://jsplumbtoolkit.com/blog/2024/07/18/wrapping-data-in-...
Once I introduced a basic mechanism for injecting data it all seemed to be a lot more useful.
I didnt think Ryans article came across as angry at all, and hes forgot more about web development than 99.9% of people will ever know. His lead with solid has been followed by practically every major framework, hes usually ahead of the curve and right.
This is addressed further down (normally I might make a comment about reading the article before replying but given that it's 11,000 words, perhaps you can be forgiven):
> Quite a few of the people who build and maintain the frameworks themselves hold on to a lingering animosity because many of them feel gaslit about the capabilities of Web Components. Their perception of reality was that these standards were not useful to them at all, but the message they got – insistently – was that web components were the inevitable future of their own frameworks.
> This is the background that led Ryan Carniato, the author of SolidJS, to write his blog post Web Components Are Not the Future. That blog post is a reaction to a specific line of rhetoric that has gone unnoticed by most web developers because they were not the ones targeted. That’s why it looked like such an odd, angry, outburst to many and those foolish enough to support their chosen web development tech as if it were a football team took it or the reaction to it as validation that their “team” was better than the others.
I think people give more credit to Solid that it is deserved. What had they accomplished? Signals? It wasn't created or made popular by it. Solid is known by less than 1% of developers if much.
Great insights and a truly informative read.
Shame it didn't get more traction, possibly because it was so long. Would have loved to see where the comments would have taken it.
I was wondering if this ends up actually involving Barbara Liskov's ideas or it's just a pun or something and it does end up that these technologies have problems with Liskov Substitution, so that's nice.
This post is really something.
While it is obviously full of interesting internet history and technical details and a bunch of good points about, well, software architecture in general, it was extremely hard to get through. It's way, way too long and makes me think that this person really loves the sound of his own voice.
The author is a perfect example of an enlightened centrist. The post starts out with a (way too long) self-righteous lecture about the tone of the internet, and then quickly devolves into just bashing react using some pretty dubious arguments. Hypocrisy at its finest.
Some of his claims about react are, at best, extremely misinformed and at worst, makes me truly want to doubt his ability to build software and abstractions -- which I don't really honestly believe, because many of his other technical discussions clearly show he knows what he is talking about, at least to some extent. Some of the claims:
- Impossible to understand what is going on in any given component: You can absolutely build components that make this hard and are tightly coupled to all sorts of state and what have you.. but you can also not. You can build tangled balls of mud anywhere, using anything.
- Claims that "large chunks of the react community have given up on unit testing".. by citing some random guy on twitter. Maybe I should create a xhitter account and make the opposite claim. Meanwhile, if you want some actual data, try looking at npmtrends for @testing-library/react.
- Blathers on about the virtual dom. Is it a perfect solution? No, no one has ever thought it was. But in practice, re-renders are rarely a real problem. It also doesn't "re-render everything every time", and when there are too many re-renders, there are ways to avoid them. If it's still not fast enough, by all means, just use something else. The part about it not "acskhually being functional" because it performs optimizations under the hood is also just straight up embarrassing. It's an abstraction. And it's never been really functional as much as has been inspired by functional programming. It's still a pretty useful approximation to think about react components.
The part about "react commodifying devs" is just patently absurd and boggles the mind. Management (with a capital M, like the Man) has always been trying to treat developers as replaceable units where one dev is the same as the next dev. React has absolutely no role in this whatsoever except for the fact that, in the context of the web, it became extremely popular extremely fast and thus appeared in more job postings than anything else, since nothing has grown within the realm of software development quite like web development has grown.
While he addresses some really interesting issues with implementing web components, he just keeps bashing react every chance he gets, and considering how much of this post is spent on that in particular makes me really feel like this post is a (not so thin) veneer on top of what was originally meant to be a rant against react, in the same vein as all the other rants he starts out his post by distancing himself from.
> While he addresses some really interesting issues with implementing web components, he just keeps bashing react every chance he gets, and considering how much of this post is spent on that in particular makes me really feel like this post is a (not so thin) veneer on top of what was originally meant to be a rant against react
Right but what's the problem of someone writing an article to make a critic against React?
> The author is a perfect example of an enlightened centrist. The post starts out with a (way too long) self-righteous lecture about the tone of the internet, and then quickly devolves into just bashing react using some pretty dubious arguments. Hypocrisy at its finest.
Honestly, your (way too long) self-righteous lecture/reply attacking someone that say bad things about React gives the same vibe.
> Right but what's the problem of someone writing an article to make a critic against React?
That's not the problem. I like React. I welcome criticism. The issue is that the author's criticism is shaky at best. Here are some snippets:
> The DOM and CSSOM as a rendering surface is just one big fucking yarn ball of interconnected side effects that have side effects of their own. This means the components themselves are largely meaningless when removed from their rendering context.
This is a weird statement to make. I'm not even sure what point he's trying to make. It's also wrong. Components can often be designed to be reusable and meaningful in various contexts. While some components may depend heavily on their rendering environment, others can be quite modular and independent.
> But React components are also intentionally abstracted away from their rendering contexts. Between the many different rendering engines, hooks, contexts, synthetic event system, server actions, and more, there really is no such thing as a genuinely “functional” React component.
The statement "there really is no such thing as a genuinely 'functional' React component" misrepresents what it means for a component to be functional.
While it's true that many React components are not pure functions (since they can have side effects and state), this does not mean they cannot adhere to functional programming principles. Functional programming does not require that every function be pure; rather, it encourages a declarative approach to managing side effects.
React’s design encourages managing side effects in a way that maintains the declarative nature of your UI. By using hooks, you can encapsulate side effects and state management within functional components without compromising their readability or predictability.
> Even if it looks like a function that just takes props and returns markup, it isn’t really. It is effectively impossible to fully understand what’s going on in any given component that’s a part of a big app just from looking at the component itself.
This is an overgeneralization. While it may be challenging to understand a component in isolation if it relies heavily on external context, this is not a problem unique to React. As previously mentioned, any developer can write shitty, garbled code. The same could be said for a microservice, backend function, or component in any other UI framework / web app. This is the reality of any software development in a big organization.
This is where proper process, documentation, code review, and testing come into play.
Hmm, I think you make a lot less sense than the original author does. I have been through some of the things he described, I tried Web Components before React in 2014 (used ExtJS, then React since 2016, plus Solid since 2021) and the point about React commodifying developers rings true. "Oh, those are React projects, let's hire some students and fire the leads"... there are multi-billion-dollars-in-revenue companies that do that. Has it happened before React? Sure, but React definitely lends itself to that kind of thinking.