Svelte VS lit

Tauri is a cross-platform desktop application framework that allows developers to use familiar web technologies (like HTML, CSS, JS, and frameworks such as Vue.js, Svelte, React, SolidJS, Angular, Preact, etc.) to easily build desktop applications.

Multiple checkbox inputs can be handled with Svelte as well via bind-group={stateObj} - but there is still an open discussion about how to use it correctly with $state.

This was an experiment to learn Svelte <https://svelte.dev/>. So the information shown, such as whether the year is in fact a perfect square, should update dynamically as you cross into 2025.

Svelte - no recommended usage on GH for pure Svelte, although you would need to use $effect with .then() instead of async. Svelte 4 uses stores, which would follow the same unrecommended pattern inside the store. See Svelte 5 with Firebase

SvelteKit as frontend framework

Svelte

When I first accepted this feature, I did not realize that I would have to work with something completely new to me: Svelte, an open-source component-based front-end framework! This came as a shock to me as I opened the ChatInput component and realized that this was a file where there was TypeScript code, HTML elements, and styles all in the same file!

It took longer to migrate to Svelte 5 than I had expected. I still have not pushed this new version to production, though. The updates to Svelte 5 are still coming in with quite high frequency.

In this tutorial, we'll build Authvents with Svelte, an event booking platform, and integrate FACEIO for biometric authentication, allowing users to sign in and access ticket dashboards securely with facial recognition.

More details can be found in Svelte Github page

I was down on the ergonomics of Web Components for a few years, but recent work has me actually excited for them as the present now. You can get some nice "Progressive Enhancement" experiences with them now.

If you are starting fresh, I'd consider taking a look at one of the lightweight options like lit [0] or FAST [1] for building your own. (Later this week or this weekend, I'm going to try to document building Web Components with my Butterfloat [2] because so far it is turning out great in my current hobby project and about to the point where I'm going to recommend it to production projects.)

[0] https://lit.dev/

[1] https://fast.design/

[2] https://worldmaker.net/butterfloat/

I help maintain Lit[1], which I consider a very standards-first non-framework.

With Lit you can build full apps with standard and plain JS, CSS, and HTML; standard web components; and no build tools.

I don't immediately see how this is any more standards-first, especially when it mentions Markdown, tooling, and a CLI. I don't actually really see what exactly this even is from this landing page. It would help to show something up front.

[1]: https://lit.dev

It's not anymore!

Multiple options around, I personally love this

https://lit.dev/

You can develop that element and then just drop that onto your static page and you're golden

This works but it's not a good idea to create these manually. Since that creates a lot of maintenance and we can run into out of sync issues with the api. To make this less tedious. Both Lit (see here) and Stencil (see here) provide a cli to create these automatically. However the need to create these wrapper components in the first place is additional overhead. If the framework of your choice properly supports web components you shouldn't have to create wrapper components.

Lit - A library that helps you build native web components

In this example I will be using Lit, but these features and principles can be applied to any environment.

NOTE: The code examples are using Lit, but the principles discussed here can be applied to other libraries and frameworks.

Lit is a library for developing Web Components, mainly developed by Google. According to the official introduction, the Lit development team participated in the formulation of the Web Component standard.

Lit is a small library, built on top of web components, that makes it much easier to build interoperable web components. The team released Lit version 3 last year, and I just got around to trying it out. I'm impressed with what Lit is capable of. There are a few things missing that I'd want to see before building out a major application, like a router API, but it seems like a great fit if you need to build some web components to drop into an existing site. It might even be nice for a framework agnostic design system.