Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

If Web Components are so great, why am I not using them?

daverupert.com

Post reply on HN
Print view View original

21–30 of 189 posts

Re: If Web Components are so great, why am I not using them?

#21

Post by afavour »

andrewmcwatters wrote: post #6

Because React is good enough. I think that's mostly why. Here's legacy React's like_button.js, without JSX, from their old documentation: 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: tru…

Examples like this bug me. The React example is using a high level abstraction, the web component is directly using the API. A more accurate example would show how those React calls eventually boil down to document.createElement()

I don’t think the Web Components API was meant to be used directly all the time. You can use a framework like StencilJS:

https://stenciljs.com/

When you consider the 100KB of bulk the React example brings with it the web component example is actually pretty impressive.

Re: If Web Components are so great, why am I not using them?

#22

Post by qbasic_forever »

Rodeoclash wrote: post #13

I wouldn't mind a sanity check on using Web Components in this context: We have a bunch of sites written in different frameworks (React, Rails + Hotwire, Phoenix + Liveview) that we'd like to have a shared set visual components between them. Think things like: - Buttons - Text spacing - Layout cards - Headers Pretty low level stuff, the most dynamic behaviour might be something like showing / hiding content in an FAQ…

Web components are really only useful for stuff that's dynamic, like a sortable table that fetches data from an AJAX request. They require javascript and have no fallback or graceful degradation in functionality at all, which means using web components for all your bog standard buttons, text content, headers, etc. could be a very bad idea (not to mention it would trash the SEO and potentially accessibility of your site).

IMHO you probably want to look at design tokens or other ways to centralize your visual styles--it's really more of a workflow problem and not just something to throw more javascript at with web components.

Re: If Web Components are so great, why am I not using them?

#23

Post by herpdyderp »

I've been using web components now for years and I will do everything I can to never write frontends in anything else. I totally agree with point 2 though: the Polymer phase was very weird, but, as mentioned, https://lit.dev is great and, imo, the perfect abstraction.

Re: If Web Components are so great, why am I not using them?

#24

Post by tomger »

andrewmcwatters wrote: post #6

Because React is good enough. I think that's mostly why. Here's legacy React's like_button.js, without JSX, from their old documentation: 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: tru…

Lit framework provides a bunch of sugar that brings the dev experience closer to JSX

https://lit.dev/

Re: If Web Components are so great, why am I not using them?

#25

Post by dpweb »

andrewmcwatters wrote: post #6

Because React is good enough. I think that's mostly why. Here's legacy React's like_button.js, without JSX, from their old documentation: 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: tru…

Can be reduced

    customElements.define('like-button', class LikeButton extends HTMLElement {
        connectedCallback() {
            this.innerHTML = ''
            this.addEventListener('click', this.onClick, true)
        }
        onClick() {
            this.innerText = 'You liked this'
        }
    })

Re: If Web Components are so great, why am I not using them?

#26

Post by benatkin »

herpdyderp wrote: post #23

I've been using web components now for years and I will do everything I can to never write frontends in anything else. I totally agree with point 2 though: the Polymer phase was very weird, but, as mentioned, https://lit.dev is great and, imo, the perfect abstraction.

Lit seems functionally equivalent to Svelte. Might Lit only be better if you have a preference towards declaring classes? Perhaps tracing back to Backbone or React before hooks?

Svelte supports custom elements: https://svelte.dev/docs/custom-elements-api

Re: If Web Components are so great, why am I not using them?

#28

Post by throwaway14356 »

dxchester wrote: post #20

The main reason is that they're too low-level to use directly. They do a lot, but stop just short of being useful without something of a framework on top. I tried hard to use them directly, but found that it was untenable without sensible template interpolation, and without helpers for event binding. Here's my shot at the smallest possible "framework" atop Web Components that make them workable (and even enjoyable) a…

meanwhile Im like...

   1

Re: If Web Components are so great, why am I not using them?

#29

Post by afavour »

IMO the main reason more people aren’t using Web Components is because React doesn’t support them.

Preact does it just fine so I have to assume it’s possible but simply not in the interests of the React team. React feels like the enterprise lock-in of 2020s development: if you use it you’re using it top to bottom and it’s very difficult to mix and match with other frameworks. It’s a shame.

Re: If Web Components are so great, why am I not using them?

#30

Post by throwawaymaths »

qbasic_forever wrote: post #22
Rodeoclash wrote: post #13

I wouldn't mind a sanity check on using Web Components in this context: We have a bunch of sites written in different frameworks (React, Rails + Hotwire, Phoenix + Liveview) that we'd like to have a shared set visual components between them. Think things like: - Buttons - Text spacing - Layout cards - Headers Pretty low level stuff, the most dynamic behaviour might be something like showing / hiding content in an FAQ…

Web components are really only useful for stuff that's dynamic, like a sortable table that fetches data from an AJAX request. They require javascript and have no fallback or graceful degradation in functionality at all, which means using web components for all your bog standard buttons, text content, headers, etc. could be a very bad idea (not to mention it would trash the SEO and potentially accessibility of your si…

> we'd like to have a shared set visual components between them

I think what gp wants is css!

Post reply on HN