Tonic (Component Framework)

Ich mag kleine Frameworks wie Tonic. Es ist im Wesentlichen synthetischer Zucker über <web-components />, um sie einfacher nutzbar zu machen. Definiere eine Class, ein Template-Literal für ein HTML-Template, wahrscheinlich ein paar andere schicke Helfer und du hast eine Komponente, die sich nicht wesentlich anders anfühlt als etwas wie eine React-Komponente, außer dass du keinen Build-Prozess oder anderes exotisches Tooling benötigst.

Hier ist ein Hello World + Zähler-Beispiel

Sie haben eine ganze Reihe von Beispielen (in einem separaten Repository). Du kannst sie dir schnappen und verwenden, und sie sind ziemlich nett! Das macht Tonic also ein bisschen wie ein Design-System und auch wie ein Web-Component-Framework.

Fairerweise muss man sagen, es ist nicht *so* anders als Lit, hinter dem Google steht und das ziemlich aktiv vorantreibt.

Hier ist ein Hello, World + Zähler mit Lit

Und Dave hat mir gerade gezeigt petite-vue neulich, also dachte ich, ich mache das auch gleich.

Ich würde sagen, dass das petite-vue Beispiel wegen seiner extremen Einfachheit, es nur in deklarativem HTML umzusetzen, gewinnt. Aber natürlich gibt es eine Menge anderer Überlegungen zu spezifischen Features, Syntax, Philosophie und Größe. Allein wenn man sich die Größe ansieht, wenn ich den Network-Tab in den DevTools öffne und das JavaScript sehe, das über das Netzwerk gesendet wird für jede Demo...

• Tonic = 5,1 KB
• Lit = 12,6 KB
• petite-vue = 8,1 KB

Sie sind alle im Grunde gleich: winzig.

Ich habe noch nie etwas Reales damit gebaut, daher bin ich nicht der Beste, um eines vom anderen zu beurteilen. Aber sie scheinen mir alle ziemlich raffiniert zu sein, besonders weil sie keinen Build-Schritt erfordern.

Gefällt Ihnen das Video?

Dave und ich haben das alles durchgesprochen