We have 20+ UI frameworks written in Vue. Surely there's enough common ground/code to combine the implementation details for all these common components. For example, OP mentioned the complexities of implementing a modal with some corner cases for 'ESC' behaviour. This is a universal concept whether you're using WidgetUI or TailwindUI. How many times are we going to re-implement a modal/button/dialog/menu?
We have to learn another set of APIs, props, component names, etc... Of course, no one is forcing us to use this. But it seems like we're going in circles re-implementing the same UI patterns over and over again.
I wish we could standardize on a library. Imagine just pulling in GenericUI and sprinkling in your CSS of choice (e.g. tailwindCSS, Bulma, Material, etc...).
I'm a Vue guy, but I think my argument still stands for the React ecosystem.
> I often wonder whether we need yet another UI framework implementation?
Because the web wasn’t designed for applications UI interfaces (hence the CSS grid which landed only in 2017), so it lacks basic primitives and behaviors that are then re-implemented slightly differently by different people. On the contrary, a UI framework designed for this such as the Windows Forms on Windows desktop is still very usable (and used) to make applications, 20 years after its release; and is only concurrenced by a single newer framework (WPF) which actually brings a lot of improvements on the table.
Actually the web does it half-way: there are a set of common elements (input text, button, etc.) but some useful components are missing, and some of the existing one are hard to style. This support should be added in browsers, then custom code wouldn’t be needed anymore.
There is an ongoing effort at https://open-ui.org/ to add these basic primatives. I'm throwing my effort behind the <select> replacement and we welcome input from everyone.
If I can avoid writing another autocomplete and solving the Esc corner cases, the effort will have been worthwhile...
I think a big part of the problem is that probably 12x of those have to re-implement because they want to change something unrelated like styling, or want to add more components, but can't extend existing libs without using the same styling, so they end up re-doing everything.
So we end up with 20x libs all doing roughly the same thing, sometimes badly.
This one doesn't seem like the typical Munroe +1, because it's not trying to rule them all, just put a visually unopinionated base in place with the tricky, boring stuff handled. It kinda feels like other libs are doing too much in any case.
> Imagine just pulling in GenericUI and sprinkling in your CSS of choice
That's exactly what the tailwind people built in Headless UI: "a library of JS components that abstract away all of the keyboard navigation and accessibility logic without including any design opinions"
I guess what I'm arguing is that we already have so many Headless UIs out there. Another comment pointed out PrimeVue, which does exactly what Headless UI does. This feels like another library reinventing the wheel.
I'm always reminded of https://xkcd.com/927/ when another UI framework pops up. Do all libraries do things just differently enough to warrant a completely new library or can the implementation details be abstracted to some core lib (maybe even a web spec).
On the other hand, maybe I'm wrong and HeadlessUI ends up being that GenericUI lib.
Agreed! I believe the path of popper.js should be of inspiration to a lot of people! Clean separation of concern, high focus, resulting in high quality and high reusability!
I often wonder whether we need yet another UI framework implementation? I touched on this in my post a couple days ago: https://williamhoyle.ca/blog/2021/vue-has-too-many-ui-framew...
To summarize:
We have 20+ UI frameworks written in Vue. Surely there's enough common ground/code to combine the implementation details for all these common components. For example, OP mentioned the complexities of implementing a modal with some corner cases for 'ESC' behaviour. This is a universal concept whether you're using WidgetUI or TailwindUI. How many times are we going to re-implement a modal/button/dialog/menu?
We have to learn another set of APIs, props, component names, etc... Of course, no one is forcing us to use this. But it seems like we're going in circles re-implementing the same UI patterns over and over again.
I wish we could standardize on a library. Imagine just pulling in GenericUI and sprinkling in your CSS of choice (e.g. tailwindCSS, Bulma, Material, etc...).
I'm a Vue guy, but I think my argument still stands for the React ecosystem.