Retour sur la conférence du BreizhCamp sur LitElement du 22 mars.
Préambule
Étant nouvel arrivant chez Slickteam, ainsi que nouvel arrivant sur Rennes, j’ai eu la chance de pouvoir participer, pour la première fois, au BreizhCamp 2019 durant les trois jours.
Durant cet événement, plusieurs conférences ont retenu mon attention (en bien ou en mal). Dans cet article, je vais m’attarder sur une en particulier. Elle se nomme “Ceci n’est pas un Talk sur LitElement, c’est un cours”, assurée par Philippe Charrière. C’est une conférence durant un peu moins d’une heure, alternant une brève description de ce qu’est cet outil et une démo montrant le potentiel de LitElement. La conférence est disponible sur Youtube si vous souhaitez la visionner.
Qu’est-ce que LitElement ?
C’est une simple classe de base pour créer rapidement, de manière réutilisable et avec une taille réduite en octets des web components.
LitElement utilise LitHtml pour son rendu des Shadow DOM et ajoute l’API pour gérer les propriétés et les attributs. En d’autre terme, il est possible de faire un web component comptant très peu de dépendances (LitElement pèse environ 16 Ko non compressée) avec cette librairie.
À noter que LitElement fait partie du Polymer Project et peut être utilisé avec la CLI de Polymer.
Shadow QUOI ?
Pour se remémorer un peu ce qu’est Shadow DOM, commençons par expliquer ce qu’est le DOM HTML.
Le DOM (Document Object Model) est une représentation d’un fichier HTML. Il est exploité par les navigateurs pour déterminer les éléments à afficher sur la page et aussi par les scripts JavaScript pour modifier son contenu, sa structure ou le style de la page.
Le Shadow DOM peut être considéré comme un “DOM dans un DOM”. Il crée son propre arbre DOM, isolé du DOM général, avec ses propres éléments et styles. Il est donc possible de créer des Web Components encapsulés, sans être impacté par le DOM général, avec des Shadow DOM.
Un extrait de code
Pour illustrer LitElement, quoi de mieux qu’un extrait de code.
import from 'lit-element';
// This decorator defines the element.
@customElement('my-element')
export class MyElement extends LitElement {
// This decorator creates a property accessor that triggers rendering and
// an observed attribute.
@property()
mood = 'great';
static styles = css`
span {
color: green;
}`;
// Render element DOM by returning a `lit-html` template.
render() {
return html`Web Components are <span>$</span>!`;
}
}J’ai repris directement le Readme du répertoire LitElement sur GitHub. En faisant l’import des helpers nécessaires et en créant une petite classe de base, il est très simple de créer un web component.
<my-element mood="awesome"></my-element>Je m’attarderai plus sur l’aspect technique de LitElement dans un prochain article où je me forcerai à comparer LitElement avec d’autres outils pour faire des web components.
Conclusion (rapide) sur LitElement
LitElement est une bibliothèque pour faire des web components. C’est son rôle et je pense qu’à l’avenir, elle pourrait devenir une référence pour avoir des composants web réutilisables et légers.
À noter, quand même, que d’autres librairies existent comme Stencil.js (utilisant TypeScript en langage) ou encore Svelte.
Mon avis sur la conférence
Pour ma part, à la sortie de la conférence, je suis sorti très déçu de cette présentation pour les raisons suivantes. Evidemment, c’est un avis personnel, donc non objectif, mais je trouve qu’il manquait quelques éléments pour nous aider à comprendre à quoi sert LitElement. En commençant par le sujet des web composants en lui-même, où les enjeux de ces derniers ne sont pas déterminés : à quoi ils servent ? Pourquoi avoir des WC légers et réutilisables ? Et donc, pourquoi LitHtml et LitElement ?
Et il manque aussi les perspectives de la librairie : quelles sont les prochaines mises à jour de LitElement ? Vers quels objectifs vont les créateurs du projet Polymer pour cette libraire ?
Cette conférence aura eu quand même le mérite, pour ma part, de me faire creuser le sujet sur cet outil et de me pousser à chercher les réponses qui n’étaient pas présentes dans celle-ci.
