Hacker News new | ask | show | jobs
by dmitriid 1253 days ago
> A UI library for React, Vue, Svelte, Solid, whatever... Imagine being able to have a component library that works with any of them (or none of them).

You don't need web components for that. You need https://open-ui.org (started, of all people, by Microsoft). Unfortunately Google et al are too busy sinking hundreds of millions of dollars and countless man-hours into web components (with no final goal in mind and increasingly arcane and complex workarounds for their deficiencies) to be interested in this.

> but I remain a bit puzzled why there's so few players in the space.

In which space?

In UI libs for the web? There are thousands, all busy re-implementing the same dozen-or-so primitive controls.

In UI libs for web components? Because they are a badly designed tech that still requires you to reinvent the same dozen-or-so primitive controls and combat the issues of styling, a11y, no SSR etc. that they bring.

2 comments

Can you explain how open-ui solves the problem? I went on the website, and to be fair I didn't really get it, but say for <breadcrumb /> component they give a proposal of what the HTML would look like in their proposed solution with nav, ok, li elements. How does this replace the idea of having a breadcrumb web component which is a higher level abstraction?
> Can you explain how open-ui solves the problem?

It doesn't solve the problem, but would solve the problem if it was started 10 or 20 years ago.

This is what needed in the browser: an actual properly specified comprehensive set of controls. Web Components are not it, as they continue re-inventing the wheel with the same components that libraries where defining since the dawn of the web: buttons, avatars, tabs etc. All of them different, all of them incomplete, all of them inaccessible etc.

> but say for <breadcrumb /> component they give a proposal of what the HTML would look like in their proposed solution with nav, ok, li elements. How does this replace the idea of having a breadcrumb web component which is a higher level abstraction?

Because if you go to any UI library for the web, it's one of the components almost everyone defines. As you can see in the research for each component. What does having it as a web component give you? Nothing. It gives you fifteen hundred different incompatible re-implementations [1]

Having a higher level abstraction you don't need to re-implement it, you don't have to to manually provide additional things (like accessibility hints etc.)

In general, if everyone attempts to implement the same elements in the browser, it makes sense to have them as a part of the platform, doesn't it?

[1] https://shoelace.style/components/breadcrumb, https://web-components.carbondesignsystem.com/?path=/story/c..., https://vivid.vonage.com/?path=/story/alpha-components-bread..., https://sap.github.io/ui5-webcomponents/playground/component..., https://ionicframework.com/docs/api/breadcrumbs ...

Ooooh I see. So the idea is to add all the extra (standardized) components to the browser itself! Yes, that is a worthy goal indeed.
And here I am, just using vanilla JS to add functionality to default HTML. Recently did a few simple fetch and render functions and it worked fine. I guess if you go with large data structs it might be a different ball game I guess.