Main differences between lit-element & React [closed]

Question

Looking into React code it seems more similar to "Lit-Element" code, Both can be used to create web components. It is very helpful if someone can explain the main differences between the "React" and "Lit-element"?

Answer 1

Frameworks create HTML, Web Components are HTML

React

(almost a decade old now, by Facebook), key feature is its virtual DOM. That means all DOM elements are created in memory and React is in charge of delivering them to the (real)DOM. That also means you can NOT do any DOM updates yourself, or use the W3C standard Events system.
everything in the (real)DOM is handled by React.
Great when, like Facebook, you have to prevent thousands of developers messing around in the same DOM. (There is no slow DOM, only developers writing slow code accessing the DOM)

Update 2022 React R18 still doesn't mention Custom Elements/native Web Components

W3C standard Web Components

(by: Apple, Mozilla, Google, Microsoft)

Are made up of 3 distinct technologies:

• Custom Elements API
• Templates: <template>
• shadowDOM

each can be used without the other!

You can attach shadowDOM on a regular <div> to create a DIV on steroids, without using Custom Elements or Templates.

The W3C Web Components standard is defacto developed by Browser builders Apple, Google, Mozilla & Microsoft.

All of them having to agree, makes for slow progress in setting a standard; but once a standard, W3C standards are supported for as long as JavaScript will run in the browser.

Web Components history (starting in 2010):

• must see: Video: Web Components: Just in the Nick of Time

• should see: Practical lessons from a year of building web components - Google I/O 2016

• https://dev.to/this-is-learning/web-components-101-history-2p24

Microsoft chose to swap Browser-engines and made Edge (january 2020) run on Chromium,
Web Components are supported in all modern Browsers now.

Chrome, Safari & FireFox supported Web Components (version V1) since 2018.
And some browsers (partially) supported the now deprecated V0 version for longer.
So there is plenty of experience with Web Components.

The Custom Elements API is an API, nothing more, nothing less, (but a powerful one)
Comparing it to a Framework is like comparing Set and Map to Redux or Vuex.

Templates are great, yet many developers copy/paste blog examples creating a <template> with javascript code instead of defining them in HTML

shadowDOM (and SLOTs and :parts) deserve its own long chapter,
many developers do not understand what it is or how to use it, yet most have a firm opinion on it.

Lit

(by Google). Is a library built on top of the W3C Web Components technologies

called Lit-Element & Lit-HTML prior to version 2.
Before Lit, Google also had Polymer

!!! You do NOT need Lit to develop Web Components !!!

Lit is a tool It will speed up the development process.
When you learn Lit first, you are learning a tool not the Web Components technology

Lit is syntactic sugar (kinda like jQuery was)

(Just like in early jQuery days) There are 50+ Lit alternatives:

https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

A Future for React?

The interesting part is React, due to its virtual DOM implementation, only supports the W3C Custom Elements API for 71% (see https://custom-elements-everywhere.com/).
You need to create a React wrapper for each and every W3C component you want to use. (see: https://reactjs.org/docs/web-components.html)

The React17 update (october 2020) doesn't even mention the words Web Components, Custom Elements, shadowDOM or Templates

[Update 2021] I don't read React updates no more. But Benny Powers did: https://dev.to/bennypowers/what-s-not-new-in-react-18-45c7

WHATWG

The very interesting truth is Facebook has no Browser, and isn't a core member of the WHATWG. And since 2019, the WHATWG (read: Google, Apple, Microsoft , Mozilla) are in control of what runs in the Browser: https://techxplore.com/news/2019-06-w3c-whatwg-agreement-version-html.html

Frameworks

All other Frameworks (Angular, Vue, Svelte etc.) do support the W3C standard 100% and can create Web Components

This makes for an interesting future.

• Facebook, not developing a Browser, hardly has a stake in what Browsers run.

• The WHATWG is by-invitation-only; will Google, Apple, Microsoft and Mozilla invite Facebook?

• Some say React is the new Flash (End Of Life: December 31, 2020)

• Some say FaceBook will merge Whatsapp, insTagram and Facebook,
  then will provide a new Browser everyone in the world must install

On Frameworks and Libraries

Disclaimer: I built my own motorbikes

Frameworks and libraries are like the canned and packed ingredients you buy in the supermarket.

Sure, you get a meal on the table.
But go buy groceries, taste spices, learn how to cut, bake and grill,
and you will become a Chef.

One problem with Libraries/Frameworks is: there will always be breaking changes in new versions when new features are introduced. OR when features are no longer required because they are now part of the native and thus faster standard (but a different syntax) Think jQuery selectors and the (later implemented) .querySelector

It is never a one-click upgrade. And because you most-likely did not write TDD tests for all these new features, you have to check and test ALL your code again

Or worse, like with the Angular 1 to Angular 2 "upgrade"; you have to rewrite everything...

It is your choice what professional Front-End Developer you want to be