Lit

Frameworks Frontend · Depuis 2019

2019

Creation

Librairie Google (~5kb) pour creer des Web Components standards (Custom Elements + Shadow DOM) avec une syntaxe basee sur les template literals. Successeur de Polymer, utilise par Google (YouTube, Chrome, Photos). Les composants Lit fonctionnent dans React, Vue, Angular ou sans framework.

web-componentsstandardsminimal

Avantages & Inconvenients

Avantages

Standards W3C natifs : fonctionne dans tous les navigateurs sans polyfill
~5kb gzipped : plus leger que React (40kb), Vue (33kb) ou Angular (200kb)
Interoperable : un composant Lit s'utilise dans React, Vue, Angular ou du HTML pur

Inconvenients

Shadow DOM contraignant : styling global impossible, CSS custom properties obligatoires
Pas de SSR natif : hydratation experimentale (Lit SSR), penalisant pour le SEO
Communaute 50x plus petite que React : peu de composants UI pre-faits

Cas d'usage

Design systems cross-framework (ex: Google Material Web Components)
Widgets embarquables dans des sites tiers (formulaires, players, chatbots)
Micro-frontends : equipes differentes, frameworks differents, composants compatibles

Autres dans Frameworks Frontend

React

Frameworks Frontend

40% des devs web, ecosysteme dominant

component-basedvirtual-domdeclarative

Angular

Frameworks Frontend

Framework opinionnee, taille pour les grosses equipes

component-basedtypescriptenterprise

Vue.js

Frameworks Frontend

Progressif et approchable, dominant en Chine

component-basedreactiveprogressive

Svelte

Frameworks Frontend

Compile en JS optimal, bundles les plus legers

compiledreactiveminimal