Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
htmf
A minimalist partial html swapping library similar to HTMX and other libraries which create an MPA app and enhances it with a focus on HTML forms.
Sorry friend, WordPress already beat you to it: https://github.com/WordPress/wordpress-playground
))
Part 1.
> I honestly believe that 90% of the dislike for WC comes from the name "connectedCallback". If they'd named it "onCreate" or something, everyone would be using it
Of course not. None of the criticism towards Web Components ever mentions "connectedCallback", or how it should be named differently.
Do you know the actual reason so few are using them? Let's skip the atrocious not-really-high-level not-really-low-level imperative API that they offer.
How about:
- 13 years after introduction they still need 20 more specs to try and patch just some of the holes in their original design: https://w3c.github.io/webcomponents-cg/2022.html
- Shadow DOM is infecting every spec so that the actual useful specs like Scoped CSS have to be delayed almost indefinitely to try and figure out how to work with this abomination of a design
To quote the report linked above, "many of these pain points are directly related to Shadow DOM's encapsulation"
- The amount of specs that are required to make them work, barely, and be "good web citizens". And the amount of APIs.
Oh, you want your custom input to a) be able to send its data in a form, and b) be accessible to a label outside of your component? Well, there's a separate API for a) and there's some separate future API for b). And meanwhile your custom button won't be able to submit your form, sorry, it's a 4-year old issue with no solution: https://github.com/WICG/webcomponents/issues/814
And all that despite the fact that there are already a dozen specs covering web components, and dozens more on their way.
- Web Components ar HTMLElement. It means you cannot use them inside SVGs.
This is impossible:
I like plain Web Components (HTMLElement). It's actually really simple to build apps without any frameworks or blunders these days. I also looked into Lit https://lit.dev/ - I like it because it's very lightweight and provides the bare minimum features you need from a framework.
If you don't already have a backend framework, I see no reason to disagree with TFA's recommendation of Svelte/SvelteKit[0]. It's simple, there's no runtime framework magic to debug, everything works exactly like you assume it does, it's pretty darn fast, and the DSL syntax isn't easily confused for the HTML it's templating (looking at you, Vue).
If you do have a backend framework, then having the backend drive the reactivity is a pretty great way to go, so HTMX[1] is the least obtuse way of putting the most power in the hands of the backend. Really makes 'a light sprinkling of JS for interactivity' closer to reality than vanilla JS allows, without adding cognitive overhead.
[0]: https://svelte.dev/
They can do it, it is just turned off by default and require more advanced configuration.
https://github.com/terser/terser#cli-mangling-property-names...
I'd say don't give anyone bad ideas, but we are too late:
https://github.com/oraoto/pib
SolidJS sounds exactly like what you want https://www.solidjs.com/
Yeah, for my personal apps I just write offline-first apps. I need to make it so I can build apps as efficient as I can as I don't have a lot of free time. So, I wrote a little library under 1kB that just finds where I left off and re-centers/focuses there. It makes for dead simple applications.[^1]
I also created an HTMX-like library that is focused on forms so it stays to the HTML speck pretty closely. I need to make a couple of corrections to it. But it is amazing how far it can get you and much smaller footprint than HTMX. Granted, it can only do a fraction of what HTMX can do.[^2]
[^1]: https://github.com/jon49/mpa-enhancer
I find Solid's model pretty damn close to "compiling down to nothing". I chose Solid for my project because I wanted to support plugins that used other UI frameworks. I recently got a Svelte plugin working with the SolidJS router. I could probably make it prettier... but it's literally a call to Solid's `createComponent` with the Router and an anchoring div to which the Svelte component is mounted. Ezpz.
https://github.com/AlexErrant/Pentive/blob/main/example-plug...