Modèles et composants Web ultrarapides – lit-html et LitElement

Justin Fagnani

Nous sommes heureux d'annoncer le lancement de la première version stable de nos deux bibliothèques de développement Web nouvelle génération: lit-html et LitElement.

lit-html est une bibliothèque minuscule, rapide et expressive de création de modèles HTML. LitElement est une classe de base simple permettant de créer des composants Web avec des modèles lit-html.

Si vous avez suivi les projets, vous savez probablement en quoi consistent lit-html et LitElement (et vous pouvez passer à la fin si vous le souhaitez). Si vous n'avez jamais utilisé lit-html et LitElement, poursuivez votre lecture pour en savoir plus.

lit-html: une bibliothèque minuscule et rapide de création de modèles HTML

lit-html est une petite bibliothèque JavaScript (un peu plus de 3 000 fichiers groupés, réduits et compressés avec gzip) et rapide pour la création de modèles HTML. lit-html est adapté aux approches de programmation fonctionnelles, ce qui vous permet d'exprimer l'interface utilisateur de votre application de manière déclarative en fonction de son état.

const myTemplate = (name) => html`
    <div>
      Hi, my name is ${name}.
    </div>
`;

Pour effectuer le rendu d'un modèle lit-html, rien de plus simple:

render(myTemplate('Ada'), document.body);

Le nouveau rendu d'un modèle ne met à jour que les données qui ont été modifiées:

render(myTemplate('Grace'), document.body);

lit-html est efficace, expressif et extensible:

  • Efficace : lit-html est incroyablement rapide. Lorsque les données sont modifiées, lit-html n'a pas besoin d'effectuer de vérification différentielle ("diffing") ; il mémorise l'endroit où vous avez inséré les expressions dans votre modèle et ne met à jour que ces parties dynamiques.
  • Expressive. lit-html vous donne toute la puissance de JavaScript, une interface utilisateur déclarative et des modèles de programmation fonctionnels. Les expressions d'un modèle lit-html ne sont que du code JavaScript. Vous n'avez donc pas besoin d'apprendre une syntaxe personnalisée et vous disposez de toute l'expressivité du langage. lit-html accepte de nombreux types de valeurs de manière native: chaînes, nœuds DOM, tableaux, etc. Les modèles eux-mêmes sont des valeurs pouvant être calculées, transmises vers et depuis des fonctions, et imbriquées.
  • Extensible: lit-html est également personnalisable et extensible. Il s'agit d'un kit de création de modèle personnalisé. Les directives personnalisent la façon dont les valeurs sont traitées, ce qui permet d'utiliser des valeurs asynchrones, des répétitions à clé efficaces, des limites d'erreur, etc. lit-html comprend plusieurs instructions prêtes à l'emploi et permet de définir facilement les vôtres.

Un certain nombre de bibliothèques et de projets ont déjà intégré lit-html. Vous trouverez une liste de certaines de ces bibliothèques dans le dépôt awesome-lit-html sur GitHub.

Si la création de modèles est tout ce dont vous avez besoin, vous pouvez commencer dès maintenant avec la documentation lit-html. Si vous souhaitez créer des composants à utiliser dans votre application ou les partager avec votre équipe, poursuivez votre lecture.

LitElement: classe de base légère du composant Web

LitElement est une classe de base légère qui facilite plus que jamais la création et le partage de composants Web.

LitElement utilise lit-html pour afficher les composants et ajoute des API pour déclarer les propriétés et les attributs réactifs. Les éléments sont mis à jour automatiquement lorsque leurs propriétés changent. De plus, elles se mettent à jour rapidement, sans différences.

Voici un composant LitElement simple dans TypeScript:

@customElement('name-tag')
class NameTag extends LitElement {
  @property()
  name = 'a secret';

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}

(Nous avons également une excellente API JavaScript vanilla.)

Vous créez ainsi un élément que vous pouvez utiliser partout où vous utiliseriez un élément HTML standard:

<name-tag name="Ida"></name-tag>

Si vous utilisez déjà des composants Web, vous serez heureux d'apprendre qu'ils sont désormais compatibles de manière native dans Chrome, Safari et Firefox. Edge sera bientôt compatible, et les polyfills ne sont nécessaires que pour les anciennes versions des navigateurs.

Si vous ne connaissez pas les composants Web, vous devriez les essayer ! Les composants Web vous permettent d'étendre le code HTML de manière à ce qu'il fonctionne avec d'autres bibliothèques, outils et frameworks. Ils sont donc parfaits pour partager des éléments d'interface utilisateur au sein d'une grande organisation, pour publier des composants utilisables n'importe où sur le Web ou pour créer des systèmes de conception d'interface utilisateur tels que Material Design.

Vous pouvez utiliser des éléments personnalisés partout où vous utilisez du code HTML: dans votre document principal, dans un CMS, dans Markdown ou dans des vues créées avec des frameworks comme React et Vue. Vous pouvez également combiner des composants LitElement avec d'autres composants Web, qu'ils aient été écrits à l'aide de technologies Web vanilla ou créés à l'aide d'outils tels que Salesforce Lightning Web Components, le Stencil d'Ionic, SkateJS ou la bibliothèque Polymer.

Premiers pas

Vous souhaitez essayer lit-html et LitElement ? Le tutoriel LitElement est un bon point de départ:

Si vous souhaitez utiliser lit-html seul ou intégrer des modèles lit-html dans un autre projet, consultez la documentation lit-html:

Comme toujours, n'hésitez pas à nous donner votre avis. Vous pouvez nous contacter sur Slack ou Twitter. Nos projets sont (évidemment) Open Source. Vous pouvez signaler des bugs, envoyer des demandes de fonctionnalités ou suggérer des améliorations sur GitHub: