I enjoy little frameworks like Tonic. It’s essentially syntactic sugar over
<web-components /> to make them feel easier to use. Define a
Class, template literal an HTML template, probably some other fancy helpers, and you’ve got a component that doesn’t feel terribly different to something like a React component, except you need no build process or other exotic tooling.
Here’s a Hello World + Counter example:
They have a whole bunch of examples (in a separate repo). You can snag and use them, and they are pretty nice! So that makes Tonic a bit like a design system as well as a web component framework.
To be fair, it’s not that different from Lit, which Google is behind and pushing pretty actively.
Here’s a Hello, World + Counter with Lit:
And Dave was just showing me petite-vue the other day, so I figured I might as well do that one, too:
- Tonic = 5.1 KB
- Lit = 12.6 KB
- petite-vue = 8.1 KB
They are all basically the same: tiny.
I’ve never actually built anything real in any of them, so I’m not the best to judge one from the other. But they all seem pretty neat to me, particularly because they require no build step.
Dave and I went through all this:
What does tiny mean? A native js custom element counter can be done in 300 Gzipped bytes