Tonic (Component Framework)

I enjoy little frameworks like Tonic. It’s essentially syntactic sugar over 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:
CodePen Embed Fallback
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:
CodePen Embed Fallback
And Dave was just showing me petite-vue the other day, so I figured I might as well do that one, too:
CodePen Embed Fallback
I’d say that petite-vue example wins for just how super easy that is to pull of in just declarative HTML. But of course, there are a bunch of other considerations from specific features, syntax, philosophy, and size. Just looking at size, if I pop open the Network tab in DevTools and see the over-the-wire JavaScript for each demo…
Tonic = 5.1 KBLit = 12.6 KBpetite-vue = 8.1 KBThey 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.

Typed at

Share your love

Leave a Reply