Why is there no standard/widely used vanilla-js based webcomponent for creating a table with filtering+sorting+pagination? It's such a common and useful thing.
[deleted]
HTML with Superpowers: An Introduction to Web Components
21–30 of 130 posts
Re: HTML with Superpowers: An Introduction to Web Components
#22Just awful. 10 years in the making (if you can call endless bikeshedding committee meetings the "making" of anything) and still barely usable.
It offers nothing in way of ensuring that custom elements behave like builtin HTML elements. Half the elements I've come across will break or perform no-ops when you update an attribute or set a propety after it was attached to the DOM. Nevermind detaching and reattaching to the DOM, which will break virtually all of them (including my own sad contributions to this space).
The exception to this are those built using a 3rd party library like lit-element or stenciljs, which fill in the obvious omissions of these specs. Perhaps in another 10 years, a mangled version of half of one of them can be standardized? In the meantime, each component shipping its own frontend library or inlining the same core functions over and over again does nothing in the way of interoperability. You can bundle every popular JS framework and mix their components today. The reason you don't do it then or now is bloat, not the lack of a minimally viable shared component interface.
Besides, if you're going to use a 3rd party library and associated bundler/compiler, you might as well pick a good one such as React, Vue, Svelete, Solid or even jQuery UI. Using any of these, you can design and build an entire app faster than the bikeshedding commissars from goog and aapl can agree on whether "open" or "closed" should be the default for attaching a shadow DOM (at the risk of ruining the joke: there was no agreement; the developer has to provide a value in each instance...)
Re: HTML with Superpowers: An Introduction to Web Components
#23I'm optimistic about Web Components at the design/behavior level. It's nice to see us inching towards a world where the web stack has the native tools to handle all of the design/application responsibilities we've heaped on them at the right level of abstraction.
I did have some early hopes that it would also be a good way to enable content authors to coin and style markup within their posts/articles/etc., but the JS required makes me feel like it'll be too heavy for that use-case for most.
Re: HTML with Superpowers: An Introduction to Web Components
#24Why is there no standard/widely used vanilla-js based webcomponent for creating a table with filtering+sorting+pagination? It's such a common and useful thing.
What do you mean? There are tons of these around. Are you complaining that none of them are popular enough?
None of them are standard. It should be baked into the cake. It's been a puzzler to me since I started programming over 20 years ago. Every third-party library existed basically just to provide a usable grid because most everything else was good enough. Combo boxes and date pickers too but those were less of a pain to implement.
Re: HTML with Superpowers: An Introduction to Web Components
#25Just awful. 10 years in the making (if you can call endless bikeshedding committee meetings the "making" of anything) and still barely usable. It offers nothing in way of ensuring that custom elements behave like builtin HTML elements. Half the elements I've come across will break or perform no-ops when you update an attribute or set a propety after it was attached to the DOM. Nevermind detaching and reattaching to t…
There's also a lack of standard server-side-rendering support. From last I looked at it, some of the web component libraries have their own SSR support, but that only works with web components authored with that specific library, negating the supposed universal compatibility of web components, and they involve using heavyweight simulated DOM libraries on the server. I'm not going to bother with something that doesn't take SSR seriously when React aces that so well (especially with the newer server components support) among other things (like giving you a code model that ensures by default that updating a prop at runtime causes the same result as setting it on creation).
Re: HTML with Superpowers: An Introduction to Web Components
#26Just awful. 10 years in the making (if you can call endless bikeshedding committee meetings the "making" of anything) and still barely usable. It offers nothing in way of ensuring that custom elements behave like builtin HTML elements. Half the elements I've come across will break or perform no-ops when you update an attribute or set a propety after it was attached to the DOM. Nevermind detaching and reattaching to t…
I used Web Components (HTMLElement) recently and did not encounter any of these issues. I found it more snappy and reliable than frameworks like React or VueJS in terms of adding and removing components dynamically.
I did find that it provides a lot more flexibility than front end frameworks (more ways to make mistakes?) and the code was more verbose.
If I had to start a project from scratch today, I would consider going straight for Web Components.
Re: HTML with Superpowers: An Introduction to Web Components
#27Earlier quoted context omitted.
Anywhere you actually need React (and also React lite solutions like Preact or Alpine), which is essentially where your page isn't just a static page, web components by themselves don't do anything to handle the complexity of state. But what they allow you to do is to use the same component in whatever framework you pick.
Yeah, what I like about React is how declarative component writing is, and how you delegate state changes to escape hatches. Plain old HTML is supposed to be declarative but updating with vanilla JS quickly gets you into the weeds. I tried to get into WebComponents, but the MDN tutorial has you writing a lot of `document.createElement` and `document.appendChild`, which is the sort of imperative stuff I don't like abo…
> delegate state changes to escape hatches
Ay.
Can you please explain what this means in simple, 5th grader English?
Re: HTML with Superpowers: An Introduction to Web Components
#28Earlier quoted context omitted.
Stencil and consequently Ionic are all Web Component based. Svelte fully supports compiling to Web Components with 100% test coverage. Vue fully supports Web Components as well, the only issue I've run into there is with CustomEvent.detail not being copied into the Vue event payload properly. Web Components are widely used on the web, just under the covers sometimes.
VueJS actually fails some advanced tests for WebComponents: https://custom-elements-everywhere.com/ So, VueJS docs are actually incorrect when they say it scores 100%. The actual score is 91%. I had reported this 8 months ago.
For people too lazy to look into what the issues are: lack of support for CAPScase, camelCase, and PascalCase DOM events. Only lowercase and kebab-case work.
Re: HTML with Superpowers: An Introduction to Web Components
#29Why is there no standard/widely used vanilla-js based webcomponent for creating a table with filtering+sorting+pagination? It's such a common and useful thing.
Possibly the same reason there's no standard way to get a file browsing widget from a linux native applications, despite it being a common and useful thing.
Re: HTML with Superpowers: An Introduction to Web Components
#30Earlier quoted context omitted.
Yeah, what I like about React is how declarative component writing is, and how you delegate state changes to escape hatches. Plain old HTML is supposed to be declarative but updating with vanilla JS quickly gets you into the weeds. I tried to get into WebComponents, but the MDN tutorial has you writing a lot of `document.createElement` and `document.appendChild`, which is the sort of imperative stuff I don't like abo…
> delegate state changes to escape hatches Ay. Can you please explain what this means in simple, 5th grader English?
React says what things should be, given a limited state. (These elements read X, and update when X changes.)
Vanilla JS says how to do things (find these HTML elements and update them by doing X).
It is much simpler to track and mutate a state object, than it is to find all the nodes you need to update and update appropriately.