Tonic (Element Framework)

No Comments

I get pleasure from little frameworks like Tonic. It’s primarily syntactic sugar over <web-components /> to make them really feel simpler to make use of. Outline a Class, template literal an HTML template, most likely another fancy helpers, and also you’ve bought a part that doesn’t really feel terribly completely different to one thing like a React part, besides you want no construct course of or different unique tooling.

Right here’s a Hey World + Counter instance:

CodePen Embed Fallback

They’ve a complete bunch of examples (in a separate repo). You may snag and use them, and they’re fairly good! In order that makes Tonic a bit like a design system in addition to an online part framework.

To be truthful, it’s not that completely different from Lit, which Google is behind and pushing fairly actively.

Right here’s a Hey, World + Counter with Lit:

CodePen Embed Fallback

And Dave was simply displaying me petite-vue the opposite day, so I figured I’d as nicely do this one, too:

CodePen Embed Fallback

I’d say that petite-vue instance wins for simply how tremendous straightforward that’s to tug of in simply declarative HTML. However in fact, there are a bunch of different concerns from particular options, syntax, philosophy, and dimension. Simply dimension, if I pop open the Community tab in DevTools and see the over-the-wire JavaScript for every demo…

Tonic = 5.1 KBLit = 12.6 KBpetite-vue = 8.1 KB

They’re all mainly the identical: tiny.

I’ve by no means truly constructed something actual in any of them, so I’m not the most effective to evaluate one from the opposite. However all of them appear fairly neat to me, notably as a result of they require no construct step.

The put up Tonic (Element Framework) appeared first on CSS-Tips. You may assist CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment