Disfruto de los marcos pequeños como Tonic. Es esencialmente azúcar sintáctico sobre <web-components /> para que se sientan más fáciles de usar. Definir un Class, plantilla literal una plantilla HTML, probablemente algunos otros ayudantes sofisticados, y tienes un componente que no se siente terriblemente diferente a algo como un componente React, excepto que no necesitas un proceso de compilación u otras herramientas exóticas.
Aquí hay un ejemplo de Hello World + Counter:
Tienen un montón de ejemplos (en un repositorio separado). Puedes engancharlos y usarlos, ¡y son bastante agradables! Eso hace que Tonic se parezca un poco a un sistema de diseño, así como a un marco de componentes web.
Para ser justos, no es tan diferente de Lit, que Google respalda y empuja de manera bastante activa.
Aquí hay un contador de Hello, World + con Lit:
Y Dave me estaba mostrando petite-vue el otro día, así que pensé que también podría hacer eso:
Yo diría que el ejemplo de petite-vue gana por lo fácil que es sacarlo en HTML declarativo. Pero, por supuesto, hay un montón de otras consideraciones de características específicas, sintaxis, filosofía y tamaño. Solo mirando el tamaño, si abro la pestaña Red en DevTools y veo el JavaScript inalámbrico para cada demostración …
- Tónico = 5,1 KB
- Iluminado = 12,6 KB
- petite-vue = 8.1 KB
Todos son básicamente iguales: diminutos.
En realidad, nunca construí nada real en ninguno de ellos, así que no soy el mejor para juzgar uno de otro. Pero todos me parecen bastante prolijos, sobre todo porque no requieren ningún paso de construcción.
¿Te gusta el video?
Dave y yo pasamos por todo esto: