Posted by vinhnx 17 hours ago
The platform APIs were terrible. React wasn't "more fun"... it just made it possible to do things with the platform that were extremely difficult and cumbersome to get working reliably with platform APIs alone.
To me, web components were an incredible idea poorly implemented. Most of the minimal adoption happened on top of frameworks like Lit that wrapped WCs to try to make the dev experience tolerable.
In urban planning they have a concept called "desire paths" where if you don't put sidewalks and pathways in the right places, people invent their own. I feel like the web community has spent a lot of time and effort patching the platform.
Now credit where credit is due: it has very much improved. And modern standards means it really is time to re-evaluate where and when you need these patches. But don't write off all that annoying and painful effort people put in to trying to making the platform deliver it's promised potential just to "building it yourself is more fun".
If you're wondering what that looks like, people post pictures of them found in the wild on Reddit:
In what way?
After doing this for more than 20 years I have asked that question hundreds of times and the answer is almost always about aesthetics, about 95%+. Of those aesthetics based conclusions most people cannot find their own way to handle it without waiting for somebody else to write a tool that provides the answer they were looking for. Even then the answer tends to be predicated on social acceptance more than technical evaluation. That is a training or human performance problem more than a technical problem. It says a lot about an industry where the people who are able to ask these kinds of questions realize its a training problem and are willing to raise salaries and assume tech debt as opposed to fixing a human capital problem for far less money.
At any rate there is something to be said for the developer who builds things on their own just for themselves. In many cases the result is faster, lighter, and more capable software than what they are paid to do for their employer. Their personal software isn't locked into conventions or abstractions beyond their control.
WCs have tons of boilerplate to them, such as extra song and dance to make attributes observable. In fact, a custom element can have an attribute and a property with the same name, and they are managed separately unless you explicitly set them up to sync. It's a terrible design.
Built-in things aren't extensible - there's no way to have a number type input that doesn't suck without doing it yourself, and then you need to opt into extra song and dance for your element to participate in form submission data.
There's a reason popular frameworks are popular. They're good enough, you can hire people who already know them, and you benefit from the maintainers fixing bugs for you.
I like modules. They exist in some form or another in most programming languages and they are one of the few definitively good ideas in software engineering. Give me the ability to split off parts of my work with some public API and hidden internals. Works on different levels too, like with a reusable library that consists of modules.
JS has a module story. But HTML and CSS just aren't connected to it, without using something like JSX.
That's why I end up abandoning "using the platform" every time.
I dont know any other environment except the browser where code is split into three in a similar way.
The argument presented in the article here is that libraries like jQuery and React were useful, but now the browser has better APIs, so we should use them.
The browser indeed has a components API, but it is by the admission of many, fairly low-level as far as component APIs go. It doesn't really solve how to manage data flow or rendering in your components or application, and has many sore spots.
No problem. There is a pretty nice library called LitElement that provides solutions to some of these problems.
But then we're not really living off the land are we? We still need Lit in this case.
So what's wrong with WebComponents? Frankly, I think this is a bad question. A better question is why people think WebComponents competes with React to begin with. WebComponents intentionally fails to solve some of the most annoying problems with writing components because it is intended to be low-level and used by libraries like Polymer. Because of this, it leaves many problems open-ended. Like for example. WebComponents act like HTML elements. Cool? So you can pass data down using HTML attributes. Neat. Problem: HTML attributes are strings. Okay... So you either need to serialize everything to strings, or you have to pass objects through a separate side channel (usually properties that you assign separately.) In fact, generally speaking, writing WebComponents that compose other WebComponents is ass. I'm pretty sure it has been noted before that WebComponents works best for leaf components... So it would certainly not make a good replacement for a library like React, which is meant to be a substrate you can build large scale applications out of.
For me its all about design freedom and maximum flexibility. To achieve that I go further down the stack, as low as the given platform allows. I have been doing this work for a very long time, so I am not worried about risks with operating in the browser as primitive as possible. The most important APIs and conventions have not changed much, at least for me, since the release of DOM4 spec and the JSON methods entered JavaScript as language methods, then later WebSockets.
When you go lower elsewhere, the risks are higher given there is so much we otherwise take for granted. There are risks to reinventing the wheel on some of the most complex things we use but don't really think about. The benefits, though, are massive if you can create capabilities the technologies allow but nobody else has. Achieving this is more common than it sounds like it should be, only because most people don't try.
My original motivation for reinventing wheels, early in my career, was to have streamlined processes at work so that I could spend lest time doing work assignments and more time browsing the web. Now, I am about to do my first start up so now my motivation is to kneecap the incumbents with a cheaper and more durable technology that allows for writing future tools upon it to scale in ways the competition cannot.
It's not overly ambitious to have rich text input fields or a sortable table. If you can have a half assed xpath implementation you can have a shopping cart and a product.
Someone knowledgable once ran off with a fumble of mine acting like I pulled gold from thin air.
It took the id's from the page, created strings with the same name containing the inner html, made a copy, compared the copy with the string every 50ms, if they were no longer the same the dom node and the copy were updated with the new value. Input fields compared the copy with the input value as well.
So you could do:<div id="myname">my name <div>
Then do myname += "John";
Or <div id="a">42<div><input id="b" value="123">
Then do a = a * b / 2
State management.
I have to track what items I want to remove, hide, show, alter, etc. in each handler.
That is a cumbersome mental model, which is why React, Angular, Vue, Svelte and every other web framework calculate that automatically for you.
To be clear: I don't necessarily begrudge the mutation APIs; but there's no way I'm going to use them directly for anything except very simple things.
I think this point is what the anti-framework does not get when discussing the topic. They fail to see how hard and unpleasant it is to handle all the real-world problems that hits any production environment with a "platform" approach, and at the same time they fail to see how javascript-based een frameworks not only solve them by making them implementation details but also go through great lengths to improve the developer experience.
Just take a look at JSX. It's where a great deal of the complexity of the framework lies, but simplifies everything so much. It's the exact opposite of platform features.
For starters, you can start by checking https://caniuse.com .
Then, dive down into the concept of polyfills to understand what extra work everyone must go through to normalize the platform.
And then look at the features themselves. Web components is a good example. Theywere developed as a hack to extend toe current platform to catch up with basic features provided by JavaScript web frameworks. Except they are virtually unusable, unless they are made palatable with... JavaScript frameworks.
And lastly, compare that with the experience of just using a mainstream JavaScript framework. Any of them. It's world's of difference. JavaScript frameworks prioritize developer experience to the point they even went through great pains to have a xml-like DSL to make their javascript be seamless. Whereas things like web components go the opposite direction and make their platform's first class feature feel like vanilla javascript.
One way to keep myself honest in being on the desire path was to go from win to win (win = someone using platform and being a satisifed "customer") iteratively as part of the full build. It also helps avoid platform fatigue, and ensures that should some priorities change, we've gotten some value out of the effort.
Unfortunately, the browser is not a Minecraft server. It's a living standard that has to maintain backwards compatibility. The desire path (React, Svelte,...) will always exist. And so will the ridiculous way they tried to stop that.
To expand on that a bit, you can deliberately avoid putting in paths so that the natural behaviour becomes clear. You'll see paths develop between areas that you might not have thought of. Pedestrians are flattening grass and showing connections that are actually useful rather than following lines that have been set out for them with competing priorities in mind like aesthetics or budgets. Then you take that data and create paths that "users" actually want, based on their behaviour / use of the previous system.
“UX Designers” seem to worship at the Jony Ive/Alan Dye altar of minimalism and “airiness” and tell anyone who will listen that every type of user, for every type of task, gets “overwhelmed” if you give them ‘too many choices,’ so instead of natural direct paths that people would have chosen, modern software is more like a series of white rooms with exactly three exits each, and the exits are labeled with an icon when they’re labeled at all (many are impossible to label because they’re swipe gestures), and other exits only appear when you step near them (the hover nonsense).
The hard part is how fitting for the new user and fitting for the experienced user are sort of opposites in interface design. For new or occasional users who will only use the thing a couple times a year, you want a deep design, gently guiding someone unfamiliar with the application through each step in turn, lots of modes/clicks limited information in each. For the experienced user a shallow design is best, information dense, everything in one action, never hide anything. The best designers can sort of navigate this paradox, but for most you have to focus on one and shim the other.
As for design focused design, where the point is how good it looks, well, that sucks for everyone. But it looks good in the ads.
I can relate to this, but React definitely made things more fun for me at least.
Web Components on the other hand seemed to solve a problem that few actually were having, or for those that loathe React & modern frameworks because of bloat or whatever
On my university campus there was a well-trod path across the grass where students would traverse in a beeline from their dorms to the cafeteria during mealtime.
Eventually they did put a walkway there. But for a time the only thing paving it was student footfalls.
WebComponents do their job with little-to-no fuss, and they're universally available.
Take for instance something like suggestions on form fields: you start typing something and it presents some options from a hardcoded list that matches the prefix. This is natively achieved through the HTML element <datalist>. However, <datalist> implementations on most browsers suck to the point of being unusable.
The drive to roll your own is not so much that "it would be fun to learn this" as much as it's "rolling my own would let me express my vision exactly". What draws a lot of people to software engineering is that it lets you make anything you imagine. This is also what makes a lot of devs turn their nose at no-code and vibe-coding.
If you can't build things exactly how you want them to be, then it's hard/impossible to build something that's truly genius.
I know that they’ve optimised this as much as they can, but it still seems to catch pretty much everybody by surprise that every single instance of a web component with a shadow DOM needs the site’s CSS reset added to it individually (or just skip it and keep forgetting that things like box-sizing will be inconsistent with your non-shadow-DOM styles). There’s no way to say “here’s my default styles” that will work consistently across the whole page once you start using web components. And then you have the !important fights between the web component and its contents as well.
Even though it’s been standard practice amongst web developers for 15+ years, the people working on the web platform seem to mostly act like CSS resets aren’t a thing.
And don't call me Shirley
See eg the (now removed) HTML imports standard.
Please familiarise yourself with the guidelines for participating here:
That’s just one example of the native implementation lacking common utility. That’s one thing they could mean when they say the native solution is lacking.
Qualitative “better” is frequently what design and front end people are concerned with.
If the solution to date range pickers is two individual pickers tied together with validation logic, most people will call that qualitatively worse from a ux perspective and probably code wise too. If I have to run a bunch of code to get the native element to do standard things, then why not just use a better propietary thing anyway. A date picker taking an extra 1.3ms to render on click is fine if it gets me a bunch of functionality that is not possible with the native version.
In other words, you seem to be defining “better” way too narrowly. Raw performance is one metric amongst many.
Another important quality about performance engineering is that it exposes, from deeper investigations, other unrelated technical problems that were otherwise not evident.
Perhaps the most important benefit of performance engineering is that faster software is capable of supporting features and experiments that slower software cannot.
So, its not that performance analysis is necessarily better than something else. Its important for its own sake to improve software quality generally. Of course, the very first step in any of this is measuring things with numbers and comparing those numbers. It is astonishing how many people in software cannot do this and become hostile to defend themselves against it.
Thankfully, this opinion is measurably false just by reviewing source code of any website. What you're referring to, primarily, are categories of elements like form elements like <datalist> and that's fair.
This is why the web community is asked to support improving the platform through submissions to Interop, such as this one for <datalist>
On the note of <dialog>, I recently tried to use <dialog> in a (React) application, and it did work pretty well, but I also found that in Firefox it is only practically possible to do a fade-in animation, not a fade-out one. That isn't really a critical issue for me, it is just an animation after all, but I find it unfortunate. I also find <dialog> to be a weirdly shaped API too: I don't really hate it, but I don't love it either. It feels awkward.
I find this implicit view that developers that, for example, prefer React over WebComponents are making a suboptimal choice to be rather condescending and not really in the spirit of trying to see things from the other side. Wouldn't you want to focus on the strongest arguments and not the weakest ones? Maybe you've literally never heard anyone complain about WebComponents or Shadow DOM, but if so, I find that surprising. Certainly here on HN, I've seen a fair bit of WebComponents hate.
I do, FWIW, realize that I've particularly focused on WebComponents, which this article doesn't actually name directly. But, I assume we're not talking about ditching React to implement our own component framework on top of the traditional DOM APIs, because that's what React already does...
I am one of the people who irreconcilably disagree. I think svelte and solidjs are - obviously - technically superior. But it leaves the question of why react is still so popular. I think the biggest reason is all the non-technical aspects of react:
- They have excellent documentation. And have, from day 1.
- They produced videos, sample projects, and all sorts of "getting started" documentation.
- They ran react conferences, teaching everyone who would listen about "1 way data flows" and pretending like they invented FP.
The amount of hype around it made it really feel like the next big thing. Between the very well funded react team and the outside developer community, there was real momentum. People learned it in droves. Taught students. Built websites with it. When react's poor design choices caused issues (and there were a lot of issues), then you were blamed for holding it wrong. (Component classes, state, CSS, hooks, webpack and babel taking ages, big bundle sizes, slow re-renders, and so on.)
By the time the next generation of JS frameworks broke onto the scene, there was a collective moan from the community. "Oh no, not again - we just relearned how to make websites." React was the wave, and in its wake we all had Framework fatigue.
Software doesn't get popular without a lot of work by dedicated people. I really admire the work standards bodies do. But they rarely bother to take the time to produce documentation, videos, tutorials, starter projects, blogs and podcasts and all the rest of that work.
More like trying to explain to people who have only done imperative programming (and that also in JS of all languages) why a render function was necessary. The creator of React, Jordan Walke, was big into OCaml and one might even say he got some of the ideas of React through working in OCaml, so much so that he tried to bridge both by making ReasonML which is an alternative syntax for OCaml which has JSX and React bindings.
It doesn't seem all that different from doing your rendering in the WM_PAINT handler, which was already how things were done in the ancient Win32 API (although it's possible [0] to draw outside WM_PAINT).
[0] https://learn.microsoft.com/en-us/windows/win32/gdi/drawing-...
If everyone is using react wrong, react has a design flaw. Other frameworks aren't slow by default.
I don't think that React is as problematic as PHP ever was, and also frameworks like Laravel have improved the PHP experience tremendously, so there is now a way for less experienced people to use it.
IMO: the problem here is pretending that everyone has an innate right to use React right when it's clearly a library that works better when people have a bit more experience than the average web dev.
We as an industry tell people "don't do your own crypto, it's hard to get it right". We don't blame crypto for being hard, or demand new frameworks. Same for things like assembly, C++, Rust, formal proofs, writing an OS, operating BGP infrastructure, etc.
But with React it has to be "kid gloves on", otherwise it's shit?
This is perhaps a bigger problem in our industry: lack of experience is not seem as an individual problem, and we blame-shift, blame marketing, blame Facebook, Dan Abramov, trends...
Perhaps we should be saying "React is not for beginners", same as "don't do crypto".
Ironically, piling up simplistic technologies have created quite complex houses of cards in places. HTTP itself being the most obvious example of a tech meant to be simple and quick to grasp that morphed into a super complex, ineficient and insecure gremlin of which nobody who is not a specialist (or an AI) has a full picture anymore.
"Full stack should be effortless"? What? This is definitely not coming from anyone other than two groups: random HN people with an axe to grind, or people trying to diminish the value of the profession.
Hiring for web is difficult, salaries are historically good, people complain about complexities, including yourself: "quite complex", "super complex", "nobody has a full picture".
Nevertheless: React proves that it's not effortless. There are complexities in there and kicking and screaming saying "it was supposed to be easy!!!" won't change the situation.
"It should be simple" yeah Crypto should be simple as well, so there are no bugs. But it's not.
Maybe learn to value other people's jobs.
People are deploying meme coins to blockchains with a single X post to a bot. The pump.fun era made it really easy for anyone to launch a meme coin.
This is not true. There are innumerable cryptography libraries whose primary reason for existence was to replace or offer an alternative to a library with the same affordances but with primitives that were too easy to use incorrectly. “Maybe we should redesign this knife so it’s hard to slice a finger off” is not unique to web dev
If you want frontend to be effortless, there's already Wix and Webflow.
You're asserting that everyone is using it wrong. It's your personal opinion, and a baseless one at that which is based on a personal belief that everyone around you is incompetent and incapable of critical reasoning. It's silly posturing.
In the meantime, React is by far the most popular web framework in production. Some surveys list React with a market share of between 60-75% of all web frontend projects. It's so popular that it even leaked into GUI programming with native GUI toolkits.
It's rather obvious that assertions such as yours are detached from reality. Naturally the dominant framework will also dominate the number of newbies taking their first steps as well as drive-bys. It's also natural that the dominant framework will be targeted by the "aktually" crowd, invested in contrarian self-promotioj comments instead of doing anything constructive.
But to assume everyone is incapable of using something... That takes a lot of self delusion.
This is all news to me. I don’t think any of that. Do you make a habit of writing fanfic about other people? You also seem upset that I used word “everyone”. I thought my exaggeration was obvious. How embarrassing for us both.
If you want to make any technical arguments in support of react, I’m all ears. The only argument I can find in your comment is that react is popular right now. But that doesn’t mean react can’t be improved upon. Jquery was once that popular. Then react displaced it, by being better. Soon react will be displaced in turn, by a library which addresses react’s flaws. I can’t wait.
Pointing out the absurdity of someone like you throwing blanket accusations of incompetence is something that's very specific and verifiable. If you have strong feelings about making broad accusations about whole communities, you should pause and pay attention to what you are saying.
> If you want to make any technical arguments in support of react, I’m all ears.
Would you listen? I mean, the main issue with your post is the way you throw absurd blanket statements about a technology, on how either everyone using it is incompetent or the framework is somehow broken.
I mean, does it even dawn upon you that maybe perhaps throughout the past decade there might be people using the dominant framework well, and happen to know what they are doing?
It seems not, by the way you opt to disregard it and tell yourself no, everyone is either incompetent or the tool is broken.
Do you understand the absurdity of this sort of claim? Because it isn't even about React, but the way you feel it's reasonable to throw such blanket accusations.
> But that doesn’t mean react can’t be improved upon.
But that's not the claim you made, was it? Do you need me to quote you back at you?
Their comment does not assert that. They are responding to someone else's assertion, and turning it around to make a completely different point. It's a common form of argument - "if you're saying that the problem is everyone's getting it wrong, then I disagree and the problem must be something else."
Basically the exact same point that you are using to launch a stream of insults!
Saying that it is "silly", "detached from reality" and "delusional" for making assumptions about folk is the most incredible self-own.
I didn’t really like Svelte and I am pretty opposed to htmx. It is certainly better than Angular and Vue, though Vue 3 is tolerable. Maybe there are more popular options nowadays but tbh I am not really looking to move from React. I have zero complaints other than maybe the push towards server rendering and partnering with Next.js
React is simple and I like that it feels a bit like FP. I love that I can write just about my entire application in TypeScript with all of the benefits that incurs. It requires some knowledge/discipline e.g. around useEffect.
If you care to use native browser APIs and features you can have lightweight, performant applications that behave well in the browser.
Most devs don’t do this, even with vibe coding. It’s a very easy way to filter for those who care about what they are building.
The original react documentation is fine, but focused almost entirely on class components. What was there on hooks was either outdated or outright harmful.
It's not until 2023, 4 years after react hooks launched, that the new react docs which focused on them were released.
As interested as I may be in the alternatives, they simply don't have this.
I don't really think that React is necessarily the best possible library, but there is certainly more to a UI library than simply compiling out the need for diffing. For one thing, I find JSX to be a relatively unobtrusive addition to the language. It is implemented by a variety of things and is a pretty simple transform as far as things go; basically pure sugar, it's possible to avoid it if you want. It could be better designed than it is, but I think it's at least sufficiently general - it is feasible to say, use an alternate library with JSX, like Preact.
Svelte on the other hand by its nature just simply requires a more complicated compiler step to work and deliver on its promises. That's a trade-off. Whether you think it's worth it is up to you, but presenting it as an objectively technically superior design is disingenuous. Superior how? Runtime costs? Sure, but it does beg the question how much. Will a well-optimized Svelte app feel much better than a well-optimized React app?
> The amount of hype around it made it really feel like the next big thing.
We are a really long way away from the hype of React. I would argue that hype stopped carrying React a long time ago. Momentum? Sure, but if something was truly dramatically better, then I think it would have a fair shake at beating out React.
The problem is that the web isn't microbenchmarks and developer experience does matter to some degree, so the trade-offs that seem so good on paper don't always pan out.
I'm not a hater of Svelte. On paper, it is a very elegant idea. However, when I actually tried to use it, I genuinely came out feeling that it was simply not for me, and the benefits it has are not enticing enough for me to continue experimenting. My React apps are not particularly slow or bad at handling huge amounts of data. (One of my apps has no problem handling a file grid of over 1 million items, and in fact, I run into issues with browsers not being able to handle a large enough scroll area long before performance of my React code is a problem. That is good enough for me.)
> Superior how? Runtime costs? Sure, but it does beg the question how much. Will a well-optimized Svelte app feel much better than a well-optimized React app?
Virtual dom diffing is pure overhead. It increases the JS bundle size (react is big). Vdom diffing is really slow. And it's simply not necessary.
I agree that if you make heavy use of comparator functions, react apps can feel ok to use. But most sites don't do that. Look at the new reddit site. Insanely slow and insanely inefficient. They've improved it a lot since the new design landed. But it's still 19mb of javascript or something, and much slower than it should be. Maybe reddit is only slow because they're holding react wrong. But if everyone holds react wrong, it's react's fault.
If you don't like the asthetics of svelte, check out SolidJS. Solid is aesthetically almost identical to react. Solid - like react - only needs compilation if you're using jsx. The difference between solid and react is that solid only executes component functions once. Reactivity is implemented via fine-grained signals. Solidjs apps perform better, because there's no vdom. The default way to use solid is already fast.
> if something was truly dramatically better, then I think it would have a fair shake at beating out React.
Eh. Lots of old technologies are still in use. Most software engineers don't enjoy learning new frameworks every few years. And react still works fine, even if there are other options today. I think solid and svelte are better, but they might not be better enough to displace react for the average web developer.
If you like react, give solidjs a try. It's essentially "react with signals", which I find to be a significant improvement. You get much smaller JS bundles, better performance and better state management. All while keeping a lot of the best parts of react's design philosophy. It's great.
Talking about one-way data flows was an excellent way to speak to a lot of tortured souls at the time (who had just found out they were going to be forced to migrate their projects to something else anyway due to Google's absolutely insane "we're deprecating this, we'll have a replacement for it at... some point, good luck").
Angular 2 came out in 2016, without the two way binding design issues of AngularJS. Google ended support for AngularJS on Dec 31 2021, so there was 5 years of overlap between the two. They even had migration paths that allowed AngularJS and Angular 2 application code to live together from the initial release of Angular 2.
That was 2 years of "well, everything you write will be legacy"
When you have to resort to outright lying about something it's usually a good sign your argument is flawed.
This was exactly what sprang to mind as soon as I saw the title. I’ve been writing front-end code for over 25 years now, and exactly two things in that entire time have made me miserable enough to think about stopping: Internet Explorer 6 and web components. Every time I try to just “use the platform” it makes me miserable and I end up demotivated and stop working on whatever side project I chose to try again with. And I otherwise like the web platform! I’ve been building with it since there was nothing but the web platform. But web components kill my enthusiasm for it stone dead.
Even now in the age of agentic development, AI trips over all the same footguns in web components that humans do. It just seems like everybody involved has been adding to the standards with “yes, and…” without ever thinking about how it will be used by web developers in practice.
Web components are lower-level than that -- they can be one building block for this (e.g., lit), but don't accomplish it on their own.
Say we want to make an icon that when clicked shows how often it was clicked. The webcomponent code seens quite sane to me:
class HelloIcon extends HTMLElement {
connectedCallback() {
this.clickCount = 0;
this.innerHTML = `
<button class="icon">:)</button>
<dialog>
<p>Hello, I was clicked 0 times</p>
<button class="close">Close</button>
</dialog>
`;
const icon = this.querySelector('.icon');
const dialog = this.querySelector('dialog');
const closeBtn = this.querySelector('.close');
const dialogText = this.querySelector('p');
icon.addEventListener('click', () => {
this.clickCount++;
dialogText.textContent = `Hello, I was clicked ${this.clickCount} times`;
dialog.showModal();
});
closeBtn.addEventListener('click', () => dialog.close());
}
}
https://plnkr.co/edit/0XUOLyM52xfFiIBu?open=index.html&previ...
Make it have an initial count via attributes, sync it with the DOM so if the attribute changes the count resets, and make the JS property always match the attribute (and vice-versa) so it behaves sanely. You're in for a world of pain even for something as simple as this.
Plus they're not declarative: you will only make me use innerText-based updates by threatening me and my family.
Plus they only work with JS enabled, while I can use JSX in SSR.
I've worked extensively with Web Components. They suck.
Something with more HTML and javascript is going to be a nightmare.
Then theres the problem of sharing state, the world is far more complicated than something simple in isolation.
<script> let count = $state(0); let dialog; </script>
<button onclick={() => { count++; dialog.showModal(); }}> :) </button>
<dialog bind:this={dialog}> <p>Hello, I was clicked {count} times</p> <form method="dialog"><button>Close</button></form> </dialog>
<script>
let count = $state(0);
let dialog;
</script>
<button
onclick={() => {
count++;
dialog.showModal();
}}
>
:)
</button>
<dialog bind:this={dialog}>
<p>
Hello, I was clicked {count} times
</p>
<form method="dialog">
<button>Close</button>
</form>
</dialog>
- HTML in a string. No syntax checks. If you interpolate it, you have to escape manually or you could create trivial XSS vulnerabilities. Your editor will probably not syntax highlight it, making it harder to tell when you break it.
- Manually formatted update logic that is redundant with the string. Not so bad here, but try formulating a practical large component.
- Completely ad-hoc state management, no reconciliation. Again, fine for Hello World, not fine after that.
Using raw WebComponents, your application has to care about all of this on its own and more. You can use templates and slots (which you should) but that makes this even messier IMO and brings back the split that React became famous for getting rid of. We left manual DOM reconciliation, ad-hoc data flow and non-reactive components that manually call a render routine at arbitrary points for a reason: it sucked. It made for buggier, harder to maintain code. It can be done, but usually any decent app will wind up encapsulating patterns into utilities that get reused. And... That's precisely why we want a good library. That's what I want, a library that packages up good reusable patterns for constructing UIs effectively.
And that's exactly my point, which is WebComponents or not, the solution is still basically the same, use libraries. Which begs the question: if I have to use Lit, what is the point of "using the platform"? What is WebComponents doing for me here that React wouldn't be? And in my case, I struggle to see it.
Interoperability? The old way of embedding external components works quite fine. Switching APIs where you pass a DOM node for something to mount into and get back an object with an API to one where you instantiate a component and communicate via properties and events feels like a strictly lateral move. I can't think of a condition where this would be particularly more convenient, but I can think of some where it is actually less. Next.
Isolation? Yes, WebComponents does add tools to provide better isolation between components. For some use cases this is a genuinely useful feature, although it also isn't without tradeoffs (I mean, the flexibility of having things be not isolated comes in clutch sometimes, it's hard to argue this.) But I use React primarily to construct components in an application, where I find this property more undesirable than desirable.
The one thing I thought could be cool with WebComponents is if you could build them in pure HTML when you only needed basic templating, but no: the design they went with always requires subclassing in JS AFAIK.
I could go on and get more specific, but I feel like people will pick everything I just said apart quite enough. I hope I'm at least able to make the case that:
- I do in fact, get the general gist of WebComponents.
- I still don't like it despite that.
Well, for some definition of "manually".
If you have untrusted variables to interpolate, you can do
this.innerHTML = html`Hello ${name}!`
The arguments brought forward against web components all seem to fall under "But it does not contain every functionality you want to use out of the box". Personally, I don't think browsers should provide more and more functionality, but rather a good base to build upon.
WebComponents are useful for cases where you want something slightly more integrated than an iframe or want to make a library of small widgets
function html(strings, ...values) {
let result = strings[0];
for (let i = 0; i < values.length; i++) {
result += escapeHtml(values[i]);
result += strings[i + 1];
}
return result;
}I hate the guts of every site that uses those. Shadow DOM makes the site hard to operate and fix programmatically from user end.
I mean, these days I can just throw an LLM at it so I don't care as much, but sometimes I want to still do things hands-on. Not to mention, Shadow DOM is often a difference between "simple userstyle/userscript that is allowed at work by security extensions" vs "requiring things that are banned on corporate-managed browser".
If that's a joke, it passed over everybody's head here. I can't imagine it's serious, but it still doesn't sound like a joke to me.
I think the problem is not what I don't like about WebComponents individually. The problem is that to use WebComponents, you have to use JavaScript anyway and if it does not do exactly what you wanted, then you're right there, in JS, ready to DIY the problem away.
If WebComponents were purely declarative, I would try harder to use them.
I don't really understand why people are complaining that this is unmaintainable on the replies to this snippet but there's plenty of things with webcomponents in general that could be better done on the browser side.
For one the innerHTML (or some new method) should be able to reference a `template` directly. If you want to use templates you need to do:
``` const template = document.getElementById("templates-materialization-base").content;
this.appendChild(template.cloneNode(true)); ```
And if you want to use templates then you need to render the templates in a part of the dom that is parsed before this JS is run - there's no way of specifying dependencies for this kind of things - which is a short-coming of the platform as a whole.
One the same topic there's no way of providing an url for retrieval of a fragment that contains templates and have it parsed directly and available to subsequent JS if you could do:
`<HTML-FRAGMENT href="/my-endpoint/returns-templates.html" required="true" id="MAIN_FRAGMENTS">` or doing `fetch("/my-endpoint/returns-templates.html", {DOCUMENT_ID="MAIN_FRAGMENTS")` would parse the result and make it available to the browser engine then you could have on subsequent JS:
`<script requires="MAIN_FRAGMENTS" wait="GLOBAL_LOADING_INDICATOR`>....</script>` or in a file/module `requires DOCUMENT_ID: MAIN_FRAGMENTS` and the file/script execution would block until that would be available, just that would go a long way. You could specify fragments (the component DOM templates to be used) that are needed for the webpage to work at all, fragments that would only show loading for their own content, etc (you could style the TAG with a pseudo-state indicator, so if it had a wait not resolved yet, CSS could target it with `MY-TAG:state(waiting)`).
Another issue is `attributeChangedCallback` - this doesn't take into account how most of the times one can/will update the attributes of an element, so it fires once for each change, even if you made X changes in one swoop, making it so that you have to have to make a more complex "update_render" function to work around that, or lots of small functions that are composable (ideally, but not practical or wanted in many cases where the whole thing is to be treated as a single update) or create a `batched_attributeChangedCallback` that you implement yourself as part of a class mixin and then extend the HTMLElement class on declaration and use that, because most of the times you want to re-do/update the whole component and when you have multiple properties (equivalent to react props and similar in other frameworks) and multiple components this can result in expensive updates to the page that the user feels as sluggish on their end. Something like:
`batched_attributeChangedCallback(attributes, old_values, new_values, batch_timer_window: 200, batch_timer_fn: true)` where the default for the batch window is 200ms, but can be provided a `fn` that does the evaluation to. So even if the updates are done independently but under the timer window they're batched instead of run 1 by 1 (or immediately if the `fn` returns true, defaulting to true when it's independent 1 by 1 updates).
I usually have a function `_set_handlers(boolean)` that is used on connected and disconnected callback but this is just plain js organisation:
``` _set_handlers(toggle) { let act = toggle ? "addEventListener" : "removeEventListener";
window[act]("some-window-event", this._maybe_ready);
this[act]("some-component-event", this._some_fun.bind(this));And the connectedCallback just calls `this._set_handlers(true)` and disconnected `this._set_hanlders(false)`.
I use them, you can use them to great effect, but I think the biggest problem is the lack of connection between the different APIs. This includes things like indexDB as well, it's not very complex, but it does look messy on "first-glance". Like your example, but when you actually read it, it's pretty straightforward (ignoring the bad/non-existing functionality/APIs). The same with SSE. This could be a great solution for many things, but you always need to wire up yourself how it works. Would be great if you could declare "receiving beacons", at the page level, or component level, with automatic teardown on removal/navigation. So a component could have `static SSE_BEACONS() { ["https://something.com/path"] }` and would mark the state of the component automatically with `BEACONS: [WAITING | CONNECTED | ERROR]`
The loading indications, still seems strange that after 40 years of web development the transition between webpages are basically "white page", "freeze current view". Just having some way of specifying loading states would make any webpage feel 90% of a webapp between page transitions. Make it be a restricted subset of CSS that can be included as a header at the document top level and cached for subsequent visits `<LOADING_STYLES version=X><MAIN>background-color: white;</MAIN><LOADING_INDICATOR>shape: square; rotation: 1s; main-color: blue; secondary-color: turquoise</LOADING_INDICATOR></LOADING_STYLE>`. This would also allow to evolve it while maintaining strict backwards compatibility by starting from a very basic set of possible values - but just this would make website loading a much more app like experience. It could be used together with webcomponents too: `<MY-WEBCOMPONENT ...><LOADING_STYLES>...</LOADING_STYLES></MY-WEBCOMPONENT>` that then could be automatically derived from the `states` I mentioned prior.
Anyway... Spent too much time with frameworks and webcomponents by now. It probably would also make writing code for LLMs less error prone.
Just a rant, don't take it too seriously, but sometimes I wonder with all the resources poured into frameworks by the big Gs, that must amount to millions and millions of dollars when you take into account the salaries some of the people working on them take, if it wouldn't have been better spent somewhere else on the "base" implementation.
For one, they can stop pretending that JS and the DOM are two completely separate entities, and lock the two working groups in a basement until they figure out a sane way to do reactivity, natively, that actually works.
Slots need to have a host element to select slotted nodes from. ShadowRoot provides that host. Everyone who I've seen say that it's easy comes up with an ambiguous system that doesn't work in many cases and could never be standardized.
Which is a common problem with most "web components suck" takes - they have no sympathy for standards developers or the difficulty of the problem and somehow assume the spec people are dumb or evil, and they don't do the work to show how something could realistically be better.
Stencil.js[0] has a working "proposal" or workaround. Not sure if it is good or bad but at least it seems to work. When you ask users of an API how it could be better they should not be responsible for the implementation. If it can't be done so it is better to not do it in place of having a half working solution that most people decide to not use because it does not work for their use cases.
> they have no sympathy for standards developers or the difficulty of the problem
The problem with the browsers API is a lack of an understanding on how to design good ergonomic APIs for the end user. All the standards developers I talked think shadowDOM is great and people that don't like it are holding it wrong.
In the real DOM you need to know which element from project _from_. The <slot> itself is only half the connection. In a light-DOM only document full of <slot>s you won't know which elements to project where.
> The problem with the browsers API is a lack of an understanding on how to design good ergonomic APIs for the end user.
This could be slightly true, but the statement also misunderstands the role and priorities of standards. When adding new capabilities to first priority is to make something possible at all, and coherent with the rest of the platform. Making a sugary high-level API is often left to libraries at first, and is exactly what libraries like Lit are.
Style encapsulation? You get that, but not fully, and good luck finding out which parts you don’t get.
State management? Back to query selectors, which btw work worse and need workarounds when reaching into the shadows. We went with DOM-as-state. I don’t want to talk about it.
Slots? After coming from a modern framework, slots are a clear step backwards. In React you can pass a component as a prop but in the shadow DOM world, you have to signify it with HTML. Multiply it by several slots and you get a lot of verbosity just to match the behavior.
Yet to mention using the platform directly means losing so much work around static verifiability. No one has to talk about this anymore, but sticking religiously to the platform by strictly using addEventListener means you can’t require event handlers to exist for any of your elements. People forget this, but the browser’s default way of letting you do anything is an enormous footgun for reliability.
Learn from our frontend org’s mistakes. Run, don’t walk, away from it.
I would say very few people are using bare web component. They'll be using a library like Lit at the very least, so your argument is moot.
Like 50kb. Roughly the same size as Amazon website's icon sheet.
I put up with it, because plenty SaaS products favour Next.js and React as their only extension SDK.
I would never pick it up freely, all side projects with Web are VanilaJS, coupled with what is available on Java, .NET and PHP.
So you end up with situations like: My time picker looks exactly like I want it to look, but it doesn't handle leap seconds. And: My login form behaves exactly like the vision our PM dreamed up, but autofill doesn't work anymore.
For example, to interact with the VFS, we have read()/write(). When we add more APIs, it can be to enable a new paradigm, like epoll(), or for performance, like readv()/writev(). For a functionality that can be composed out of existing APIs in a performant way, we do not add it in the platform, but leave it instead to the domain of libraries. This separation has immense values, as it makes platforms easy to implement. A Linux filesystem, for example, needs to implement only 10 or so functions.
The web seems to be perfectly composable too, out of <div>, <span>, <p> and a small subset of CSS, but doing this is considered an anti-pattern, and you're supposed to reach for the platform to find the closest thing to what you need, whereas reaching for a library or composing yourself is frowned upon.
The result is that there are only three platforms: Blink/V8; WebKit/JavaScriptCore; and Geko/SpiderMonkey. With many things only working or working well on Blink/V8.
And implementing a new platform is a titanic task.
In the olden days, you would be expected to use the UI toolkit provided by the OS, which was designed to provide a consistent and complete implementation of each GUI element, which not only made things easier to navigate for users but also provided things like customizable theming and accessibility features more or less 'for free'. Nowadays it's much more like a free-for-all, and every application is just a little bit different, sometimes on purpose, sometimes just by accident. Accessibility is a complete crapshoot.
The web is similar. The people pushing for using 'the platform' are trying to capture exactly the same set of advantages as the old-school OS UIs, as well as the additional complication that we have a much more diverse set of devices with UIs nowadays.
That’s still (IMHO) the best place to start.
You need to load the Python console to get the proper environment, and you can't just say logger.debug() to get a trace.
This is because QGIS runs in the Qt event loop.
Big cluebat: QGIS (qualitatively, and for the regular pythonista) is like doing everything via asyncio.
Ah, so: no wonder it's such a challenge.
You’re misunderstanding the terminology here. The platform being talked about is the World-Wide Web and you are listing three implementations of the client part of the platform.
There ARE ONLY THREE implementations of the client platform.
I would like for there to be a hundred, and there would be if the platform was simpler, but its not, so there won't.
A standard that's the product of feature competition between pre-existing nonstandardized behaviors is doomed to be huge. See also: AMQP, C++.
In any case, that is what happened.
And now new projects like Ladybird take a decade to arrive, even with AI, because of the immense amount of stuff in the platform.
> standard that's the product of feature competition between pre-existing nonstandardized behaviors is doomed to be huge.
None of the Unixes are this bloated.
Browser vendors couldn't see the future. Each was doing their best to stand out from the crowd with limited budgets and schedules. Hence JS being as odd as it is.
With hindsight it's clear it could've been better. And now with today's mono-culture there is an opportunity to drop some of the legacy cruft and rethink a modern web. Or even just slimmer Electron-like solutions using an ideal subset as better primitives.
I really wish something like FirefoxOS had gained traction. Because unlike Android, it could make native apps so much more open an approachable. In theory at least.
The web is uniquely capable (aside from raw OpenGL et. al) at rendering any UX designer's vision.
Almost all alternatives to the web that I've seen make aesthetic impositions, and are therefore non-starters.
The web has a gazillion libraries...
They basically want to squeeze every bit of performance from the things that they think don't bring business value so that they can afterwards burden these websites with every advertising, tracking, compliance, cool animation (from their POV), etc library and tool on the planet. Basically bloatware.
Why do standard libraries implement sorting and common data structures when they can be made from existing programming language features? The point of a platform isn't to expose the most minimal interface possible. It's to make it as easy as possible for people to use the platform.
That means "the platform" itself is actually teaching people to work "off platform" and arguably will always have gaps as functionality and expectations evolve.
Admittedly, the habit really ought to be 'I need to make a combobox -> does the platform have what I need? -> Research, evaluate, test -> Otherwise, make it' but I don't begrudge people for skipping the middle steps.
The browser has "ready-made components". React (et al) also has "ready-made components". React's selection is a thousand times larger. React also allows you to make your own. The browser doesn't [1].
Who can blame developers for skipping the inconvenient half-solution and going straight to the all-encompassing ecosystem
[1]: It does, but web components are too unwieldy to compete with React
Accessibility is important to our customers where I work so it is important to us…. And I have spent so much time fighting with third party controls to get them to work right.
The main reason the web won is that you can ship SaaS without the user having to install anything locally, and there's no expectation of it being able to work offline, so you can offload processing to servers resulting in fewer bugs, compatibility issues, and DRM problems.
Then react came along and all developed learning web development after react had little to no knowledge of the platform. They were taught that touching the DOM was a bad thing to do.
That’s about it. Even now when I advocate for vanilla css I get the side eye and “tailwind and shadcn should be the default”. I get it, it’s what most people are familiar with, even if it’s worse than the platform.
For me the best middle ground is Headless UI or Bits for Svelte, unstyled and composable but you don't need to vendor code into your repo like shadcn.