Premier post pour vous parler d’un framework Javascript/Typescript frontend que j’ai découvert très récemment : Lit.
Lit ?
Vous connaissez les custom-elements ?
Si, cette API qui permet de créer des éléments HTML custom un peu comme React.
Théoriquement cette fonctionnalité permettrait de faire de l’Atomic Design en Vanilla, ce qui serait cool sur beaucoup de points (optimisation, plus besoin de framework frontend pour ça, etc).
Mais c’est chiant à utiliser, donc on l’utilise pas.
Et voilà Lit !
Lit est un framework léger comme Svelte, c’est-à-dire qu’il prend pas beaucoup de place et qu’il ne requiert pas beaucoup de performance pour tourner. Ensuite Lit augmente la facilité d’utilisation des custom-elements en rajoutant :
- une fonction qui permet de faire du JSX en JS Vanilla
- une fonction qui permet d’intégrer du CSS directement dans le JS Vanilla
Exemples :
// HTML
// JSX
return <div>Hello {name}</div>;
// Lit
return html`<div>Hello ${name}</div>`
// JS Vanilla (dans un custom-element)
const shadowRoot = this.attachShadow(shadowRootInit);
shadowRoot.innerHTML = `<div>Hello ${name}</div>`
// CSS
// Lit
static styles = css`
:host {
color: white;
font-size: 1.5em;
}
`
// JS Vanilla (dans un custom-element)
this.style.color = "white"
this.style.fontSize = "1.5em"
Et bien sûr il y a de l’auto-complétion ! 
Avantages & Inconvénients
Mais quels sont les avantages et inconvénients de ce framework ?
Avantages :
- Simple, pas besoin d’apprendre beaucoup de chose pour faire des choses complexes
- Léger
- Proche du JS Vanilla
- Pas une nouvelle extension de fichier pas comme VueJS avec les
.vue, ou Svelte avec les.svelte, ou React avec les.jsx - Pas de Virtual DOM
Inconvénients :
- On écrit plus de code pour faire la même chose que React
- Reste des custom-elements
- Utilise partout des Shadow Roots, ce qui rend le CSS plus lourd et plus complexe à utiliser
Conclusion
Lit est un framework frontend qui a pour objectif premier de rendre viable les custom-elements, et c’est vachement cool comme approche.
Malheureusement on a besoin de plus écrire de code que pour React et il y a quand même quelques lourdeurs liées aux custom-elements et à l’omniprésence des Shadow Roots.
Déplacé vers 