lit-element VS Preact

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:

Everytime I try to understand how something in react works I actually look into how it's implemented in preact. Hooks is around 500 LOC. https://github.com/preactjs/preact/blob/master/hooks/src/ind...

ivi, Preact, and more

On the other hand, if your app does need to update live but you want to keep things a bit closer to the metal than React, I highly recommend Mithril. It is a great everything-you-need-nothing-you-don't framework with a similar design philosophy to React but a much smaller and easier to learn API. I think Preact falls into a similar category though I have not used it personally.

Maybe try Preact.

One of the key features of this starter template is its use of Preact, a lightweight and fast alternative to React that can help improve the performance of your application. Additionally, the template is configured to use TypeScript, a popular typed superset of JavaScript that can help catch errors early and improve the overall quality of your code.

I’ll give you a simple example out of many. You may know about Preact, it uses exactly the same API as React while greatly improving performance AND reducing the core bundle size by about half on average.

Frontend: Astro with React/Preact

Preact like React but more lightweight

React: https://reactjs.org/ - Their own docs are quite bad but the community using it is huge so there's thousands upon thousands of guides on the internet; I also recommend looking into Preact once you're familiar: https://preactjs.com/