Lit 3 : React vanilla-friendly?

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 ! :tada:

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.

1 Like

:arrow_right: Déplacé vers Informatique

Oooh ultra intéressant, j’en avais pas encore entendu parler :eyes:

Hâte de voir comment ça évolue, car même si pour l’instant c’est un peu embêtant à utiliser, j’imagine qu’il y a vraiment moyen de rendre ça moins fastidieux :>

1 Like

Un peu embêtant sur 2/3 points mais en vrai c’est ultra cool.

Une manière de pas mal l’améliorer serait de rendre les shadow roots désactivables pour certains components.

1 Like