4 ms·
I support the general idea here but just because something is in a browser doesn't mean it's a good formalism. Notably, Web Components. They're fantastic for d
by skrebbel 1y ago
I support the general idea here but just because something is in a browser doesn't mean it's a good formalism.
Notably, Web Components. They're fantastic for distributing components - after all, a Web Component will work in every framework (even React, the IE of frameworks, finally added support), or even in vanilla HTML. So you can build a component once and everybody can use it. It's fantastic.
But for internally composing a web application, Web Components are simply awful. They add nearly no helpful features that vanilla JS doesn't already have, and they add bucketloads of extra complexity. You got attributes and properties, and they're mostly the same but kinda not always and oh by the way, attributes can only be strings so good luck keeping that in sync. You got shadow DOM which is great for distribution but super restrictive if you want any sort of consistent global styling (and a total pain in devtools, especially once you go 10 levels deep). You can turn that off, of course, but you gotta know to do that. And plenty more quirks like this. It's just.. It makes lots of easy things 5x harder and 1 hard thing 1.5x easier. Totally not worth it!
If you really want to not use a big clunky framework, but at the same time you have a complex enough app that composition and encapsulation is important, you'd be much better off just making your own object hierarchy (ie without extending HTMLElement), skipping all that awkward web component luggage and solely doing what they do best (tie an object to an element).
Or, better yet, get over yourself and just use a framework that does this for you. Your future self will thank you (and your colleagues even more so).
ps. rant time: If only the web browser people had gotten off their high horse and not proposed the word "Web Components"! If they would've just been named "Custom Elements", which is what they are, then we wouldn't have had 5+ years of people mistaking them for a React competitor.
- CitrusFruits 1y agoI remember when web components first came out and there was some hype around them, and just being really confused on what they're actually good for. I think it's really telling that since web components came out there's never been a popular framework, website, or company that has heavily leveraged them.
- 90s_dev 1y agoWhat about Lit?
- deleted 1y ago[deleted]
- CharlesW 1y agoI haven't started using Web Components, but I was under the impression that libraries like Lit address most of the issues you mentioned for devs who don't want to write their own minimal base class, no?
- skrebbel 1y agoSure but this page is about not using a framework. Once you're on board with using a framework like Lit, you might as well use Preact or Svelte or a similarly lightweight framework. The "web component" angle adds no value if it's all internal to your app. Lit is amazing though. It's fast, lean, and easy to learn. In fact, to my experience, the only things about it that are un-ergonomic, are due to the fact that it's built around web components. Lit without web components would be so much better (again, except if you're building something to be distributed to other programmers on any framework). It wouldn't have a single global registry of components, it wouldn't have that attribute mess, and I bet it'd not need a compiler at all (it doesn't need it now either, but is easier/nicer with it).
- CharlesW 1y ago> Sure but this page is about not using a framework. Fair enough, but the way I read TFA, it doesn't dissuade developers from using tiny convenience libraries that leverage native browser capabilities. Based on your pushback, it sounds like my perception that Lit is mostly a convenient base class for Web Components is very incorrect. I'll dig into that more, thanks!
- troupo 1y ago> it sounds like my perception that Lit is mostly a convenient base class for Web Components is very incorrect. It has custom syntax, custom directives that look like regular JS functions but cannot be used like regular functions, a custom compiler in the works etc. etc. They will keep telling you it just a small library and very vanilla though.
- 1y ago
- troupo 1y ago> then we wouldn't have had 5+ years of people mistaking them for a React competitor. The browser people literally promoted them as a React alternative. Then their goals and role changed every year, and now they are again promoted as an alternative
- skrebbel 1y agoYeah what a waste of collective brainspace that was eh. If they had promoted them as "custom elements are the best way to distribute components!" then I bet they'd have been much more widely embraced by now, by merit of not overselling them.
- zero_shift 1y agoI really agree with you. Custom elements are a great way to distribute primitives. They start creating friction when trying to actually compose applications. Perhaps my brain has been addled by a decade of React but as the examples became more advanced, they just looked a lot noiser and more complex compared to JSX or Svelte components.