Live data from Hacker News

The Failed Promise of Web Components

lea.verou.me

31–40 of 235 posts

Re: The Failed Promise of Web Components

#31
post #7

Earlier quoted context omitted.

... and it suffers from the same oversight every other web component library (polymer, mdl) suffers from: - I can't swipe left/right between the tabs - I can't pull the menu out from the left by swiping the entire page right Two of the most basic touch navigation metaphors aren't supported. To be fair, Polymer and MDL don't support the above either. But this is why HTML5 apps are still not up to par with native apps.…

> it suffers from the same oversight every other web component library (polymer, mdl) suffers from: > - I can't swipe left/right between the tabs > - I can't pull the menu out from the left by swiping the entire page right Most native apps don't do either of those two things either... at least on iOS. I can't speak to how Android apps behave these days. Maybe these are your favorite interaction modes, but it really h…

> Most native apps don't do either of those two things either... at least on iOS. I can't speak to how Android apps behave these days.

I use Android.

- The Facebook app lets you swipe left-right between sections of the app

- Gmail, Slack, Drive all let you pull menus out of the left.

These are just some obvious examples but MANY apps support navigation in this way.

Re: The Failed Promise of Web Components

#32
post #26

Fully agree with the author. My biggest complaint about web components is that I don’t see a lot of advantages over using React, Svelte, or some other JS library. The author hints at this: if I’m already committing to a big JS build process, why wouldn’t I reach for one of these more ergonomic JS tools? Warm fuzzies for trying to use open standards isn’t enough to convince most people to switch away from more popular…

One huge advantage is that you can isolate a web component in its own shadow DOM, which means it has CSS that's independent from the rest of the page. If you're making something for other people to embed in their code, even if you're on the same project, you can save them from breaking it by styling it by mistake. You can also close the shadow DOM to stop people easily inspecting it, but I must admit I haven't actual…

That is the same if you use e.g. styled components with React, where every component is self-contained and doesn't leak the styles. The mechanism is different, but the end result is the same, and oh it's a game changer IMHO.

Re: The Failed Promise of Web Components

#33

Fully agree with the author. My biggest complaint about web components is that I don’t see a lot of advantages over using React, Svelte, or some other JS library. The author hints at this: if I’m already committing to a big JS build process, why wouldn’t I reach for one of these more ergonomic JS tools? Warm fuzzies for trying to use open standards isn’t enough to convince most people to switch away from more popular…

(Disclaimer: author and editor of the modern custom elements spec here.)

The specific "failed promise" that I see is largely this positioning of web components vs. frameworks.

How web components was originally envisioned was as leaf-node or light-DOM-using components, of the sort HTML already has. For example, , , , etc. Web components was supposed to give you the tools to create your own components of this sort, such as , , , , etc. In particular:

* Custom elements gives you the ability to just drop in tags, like you do with vanilla HTML, and those tags can react to lifecycle events like being added/moved/attributes changed, automatically. The browser mediates between those occurrences and the web component's code.

* Shadow DOM lets you encapsulate the inner details of your component, while using slots to reproject content into it. So e.g. could have its innards entirely in shadow DOM, just like . While would be given children by the web developer using it, with some of those children being special (like is special for ), but some parts hidden in the shadow DOM and not provided by the web developer (like the disclosure triangle and behavior for ). More on this in https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

From this perspective, the lack of data-binding (cited in a sibling thread) is not a big deal. There's no data binding for , or , etc. You just use normal DOM children and attributes to supply the data, perhaps with a framework to do that via binding or React-style re-rendering or whatever.

Instead, we've seen people use web components as a React competitor. They want to write their whole app in web components, starting from a component on down. It turns out the system is flexible enough to do this, but it wasn't designed that way from the beginning, and doing this doesn't play to its strengths. You end up just creating new frameworks, which are slightly smaller and potentially a bit faster than other frameworks because they can rely on native code for some of their lower-level building blocks like style encapsulation. But you're not living up to the promise of reusable components which behave like built-in elements.

Edited to add: I do understand where developers are coming from in this regard. Using web components for leaf/reusable components and React/Vue/whatever for app-specific components is probably twice as many component models as most app developers want to deal with. I'm not sure how to deal with that tension.

Re: The Failed Promise of Web Components

#34

I recently stumbled across "shoelace", which at a glance seems like an example of what the article is hoping for. It's a thoughtfully designed library of UI web components. https://shoelace.style/

Shoelace is awesome! Also it is built with Stencil, which is a tool that generates web components from a development experience React and Angular devs would find familiar.

One of the benefits of Stencil is that it can generate Angular, React, and Vue-specific bindings. This smooths over any issues React has in working with WC's and provides a first-class React experience.

Stencil was built to power Ionic Framework which is arguably one of the most popular web component UI libraries. Fun fact: there are many thousands of app store apps built with web components! (data: https://appfigures.com/top-sdks/development/apps). This underscores a fact about WCs: their proliferation is largely happening behind the scenes and unnoticed by many in the web world.

Re: The Failed Promise of Web Components

#35
post #31

Earlier quoted context omitted.

> it suffers from the same oversight every other web component library (polymer, mdl) suffers from: > - I can't swipe left/right between the tabs > - I can't pull the menu out from the left by swiping the entire page right Most native apps don't do either of those two things either... at least on iOS. I can't speak to how Android apps behave these days. Maybe these are your favorite interaction modes, but it really h…

> Most native apps don't do either of those two things either... at least on iOS. I can't speak to how Android apps behave these days. I use Android. - The Facebook app lets you swipe left-right between sections of the app - Gmail, Slack, Drive all let you pull menus out of the left. These are just some obvious examples but MANY apps support navigation in this way.

> Gmail, Slack, Drive all let you pull menus out of the left.

At least on iOS, this only works from the left edge of the screen. You can't "swipe the entire page right", only the left edge. But perhaps I'm misunderstanding what you meant there.

Safari on iOS uses swiping from the left edge to let you swipe back to the previous page, so websites couldn't reliably implement that feature this way.

I wonder if any of the popular Android browsers also use the left edge to let you swipe to previous pages?

Websites could certainly let you swipe left to right over any part of the page to pull out the menu, which is what I thought you were talking about, but that's not what mobile apps commonly do.

Re: The Failed Promise of Web Components

#36

This post is needlessly snarky, but I don't disagree with the basic premise. Here's what killed web components: lack of native databinding on the web. That's the reason the standard is useless without JS. Any modular, dynamic, modern UI requires databinding, which means it's going to bring in a framework anyway, which means that self-contained widgets are all going to bring in their own frameworks, which means that i…

To be frank, I think in large part this is due to React. I'm not an authority in this area, but I seem to recall that because React uses a synthetic event system, it won't interoperate with Web Component bindings and emitted events. (I know React doesn't work well with Webcomponents, the part I'm unsure of is whether it's specifically due to this). React also doesn't have an easy means of turning React components int…

> To me, it represents a huge failure on the part of the developer community not to make publishing web components the standard

The problem is that if you're writing a Vue app, and you import a web component that was written in Preact, you're now loading both Vue and Preact onto your page. That means your app will take twice as long to load. That is a huge downside to weigh against the inconvenience of having to find a version of that widget that's built specifically for your framework, or even just building one yourself. The compatibility layer doesn't matter if nobody's going to use it.

> To be frank, I think in large part this is due to React

I'm not sure. I think React saw that the web components model was broken and didn't waste the effort trying to stick to it, and built their own separate React world that wasn't broken and that's why they've been so successful. It's a shame and an indictment of the web platform, but I think from their perspective it was the right decision.

The real shame would be if React's mindshare is the thing now holding us back from finally solving this at a platform level. I can only speculate about that, but it doesn't seem out of the question.

Re: The Failed Promise of Web Components

#37
post #29

Earlier quoted context omitted.

> it suffers from the same oversight every other web component library (polymer, mdl) suffers from: > - I can't swipe left/right between the tabs > - I can't pull the menu out from the left by swiping the entire page right Most native apps don't do either of those two things either... at least on iOS. I can't speak to how Android apps behave these days. Maybe these are your favorite interaction modes, but it really h…

> I'm certain these things could be implemented. Pulling a menu out from the left certainly cannot be implemented on iOS Safari Mobile, because it doesn’t support https://caniuse.com/css-overscroll-behavior Supporting swipe left/right fails hard on iOS Mobile Safari because the browser wants to history navigate back/forward if you misplace your finger, and it is easy to inadvertently refresh the page unless you are v…

> Pulling a menu out from the left certainly cannot be implemented on iOS Safari Mobile

Well HTML5 apps will never be a good experience on iOS then. On Android you can do almost anything UI-wise with Chrome, which paves the way to HTML5 installable apps.

Re: The Failed Promise of Web Components

#38

I recently stumbled across "shoelace", which at a glance seems like an example of what the article is hoping for. It's a thoughtfully designed library of UI web components. https://shoelace.style/

Thanks for the link. This library unfortunately highlights further challenges with Web Components like mixing custom WCs with native form elements. To use Shoelace form elements at all, you'll end up writing a bunch of JavaScript. > Shoelace forms don't make use of action and method attributes and they don't submit the same was as native forms. To handle submission, you need to listen for the slSubmit event as shown…

This is fixable, using the form-associated custom elements feature that's specified in HTML. (Introduction: https://html.spec.whatwg.org/multipage/custom-elements.html#...)

However, that's only currently shipping in Chrome, despite the other browsers being positive on it.

Similar capability gaps that we're working to close are accessibility (https://html.spec.whatwg.org/multipage/custom-elements.html#..., same situation, everyone likes it, only Chrome ships so far) and focusability (https://github.com/w3c/webcomponents/issues/762, still figuring out what the solution should be).

Re: The Failed Promise of Web Components

#39
post #13
post #6

I completely agree with the author that WCs fail to push more behaviors into HTML. As she describes, you really want to be able to import the WC's script and then have new useful HTML tags. I use LitElement pretty extensively, which is a wrapper around WCs, and I like it quite a bit - but it's only a minor improvement in my mind compared to React, and that improvement is just reducing the abstractions from the DOM AP…

Would it help if we made a standard for communication between web components, so whatever tools they use internally, you can wire them into your code or to each other? Web components are abstraction boundaries, and you have to define boundaries carefully or you still end up with a big ball of mud, now with extra layers of indirection to make your life even worse.

We have those standards: properties, attributes, events, children, CSS custom properties and ::part(). It all works quite well already.

Re: The Failed Promise of Web Components

#40
post #37
post #29

Earlier quoted context omitted.

> I'm certain these things could be implemented. Pulling a menu out from the left certainly cannot be implemented on iOS Safari Mobile, because it doesn’t support https://caniuse.com/css-overscroll-behavior Supporting swipe left/right fails hard on iOS Mobile Safari because the browser wants to history navigate back/forward if you misplace your finger, and it is easy to inadvertently refresh the page unless you are v…

> Pulling a menu out from the left certainly cannot be implemented on iOS Safari Mobile Well HTML5 apps will never be a good experience on iOS then. On Android you can do almost anything UI-wise with Chrome, which paves the way to HTML5 installable apps.

My hot take: hamburger menus are a really bad UX paradigm in almost all cases, and bottom tab bars are much better.

So, I disagree entirely: iOS can easily support fantastic HTML5 mobile apps... if push notifications ever become available.

From what I remember, Google started switching to bottom tab bars a couple of years ago, even on Android. But, when you have a bunch of features, it's much easier on the developer (not the end user) to just stuff them in a hamburger menu and say "eh, good enough..."

Link that seems relevant, but I've really only skimmed it: https://uxplanet.org/tab-bars-are-the-new-hamburger-menus-91...

Post reply on HN