lit-element VS Svelte

Using vanilla JS or TS or using web components and want to have a framework-independent way of doing things? You can stick to the GraphQL codegen itself since it takes care of almost everything underneath. Or if you want, you can also use Apollo Client’s vanilla version @apollo/client/core. Apollo Elements does come with support for a lot of webcomponent libraries like Lit, Fast and Gluon or even without any of it and hence is quite flexible.

The LitElement framework is easy to use as a base class to create lightweight and faster web components for working with any framework. LitElement is yet another one of the top web development frameworks among developers for using lit-html for rendering into shadow DOM. It also adds API for managing attributes and properties. Let’s find out whether the framework is good enough for your project.

🔸lit-element - a simple base class for creating fast, lightweight web components;

Isn't this just Polymer Lit Elements rebranded? https://github.com/Polymer/lit-element

Web components are a good start, but it is better to use LitElement to build them in that case, instead of using it directly.

Other frameworks which are using the same principle are [lit-element](https://github.com/Polymer/lit-element) and [heresy](https://github.com/WebReflection/heresy). there are surely more but these are ones i've found when looking for inspiration.

Using a lit-element component:

[1] The question of removing the shadow DOM or creating the topic has been reported at the webcomponents/polyfills repository under issue #82 , and svelte/sveltjs issue #1748 .

I opened an issue on Svelte's GitHub here and they didn't like that feature :)

But if you're going to be guaranteed coding all your components from scratch anyway, i'd recommend svelte instead. Because it has less bloat (no vDOM / less complicated state lifecycle to care about), and is easier to style without other libs like tailwind or vanilla-extract.

The next step is to create and set up a new Svelte project for the ecommerce project. This Svelte commerce will use SvelteKit since it is the recommended setup method.

Svelte is a JavaScript framework that compiles your code into efficient JavaScript that surgically updates the DOM. It is a compiler that converts your code into a more efficient version of itself.

If I were starting something, (or even if I were incrementally moving over pages from a larger project as they were touched), I would use Svelte / Svelte Kit 100% of the time. It's effectively a language (the use of JS/TS, CSS, and HTML together but nicer) with a compiler rather than a runtime framework. It's dead simple and it produces insanely small and performant output by default. Both of those have excellent tutorials you can use right on their website without installing anything.

In 2023 there are a wealth of developer options for front-end: React, Vue, Svelte, Solid and many more.

There are many libraries and frameworks that try to change the roles like Svelte, that creates precompiled JS code from a source, which is made of a melange of HTML and JS. Finally you have the choice to run your code on server- oder client side.

If your app requires high performance, consider using a framework that is specifically designed for performance, such as Svelte, Vue, or React. If you insist on using Angular, you can still optimize your application by following the tips below...