Aujourd'hui, nous sommes ravis d'annoncer les premières versions stables de nos deux bibliothèques de développement Web de nouvelle génération: lit-html et LitElement.
lit-html est une bibliothèque de création de modèles HTML petite, rapide et expressive. 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 ce que sont lit-html et LitElement (et vous pouvez passer à la fin si vous le souhaitez). Si vous ne connaissez pas encore lit-html et LitElement, lisez la suite pour obtenir une présentation.
lit-html: petite bibliothèque rapide pour la création de modèles HTML
lit-html est une petite bibliothèque JavaScript (un peu plus de 3 ko empaquetés, minifiés et compressés) et rapide pour la création de modèles HTML. lit-html fonctionne bien avec les approches de programmation fonctionnelle, ce qui vous permet d'exprimer l'UI de votre application de manière déclarative, en fonction de son état.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
Il est simple d'afficher un modèle lit-html:
render(myTemplate('Ada'), document.body);
Le rendu à nouveau d'un modèle ne met à jour que les données qui ont changé:
render(myTemplate('Grace'), document.body);
lit-html est efficace, expressif et extensible:
- Efficacité : lit-html est ultra-rapide. Lorsque les données changent, lit-html n'a pas besoin d'effectuer de comparaison. Au lieu de cela, il se souvient de l'emplacement où vous avez inséré des expressions dans votre modèle et ne met à jour que ces parties dynamiques.
- Expressif : lit-html vous offre toute la puissance de JavaScript, de l'UI déclarative et des modèles de programmation fonctionnelle. 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 avez à votre disposition toute l'expressivité du langage. lit-html est compatible avec de nombreux types de valeurs en mode natif: chaînes, nœuds DOM, tableaux, etc. Les modèles eux-mêmes sont des valeurs qui peuvent être calculées, transmises depuis et vers des fonctions, et imbriquées.
- Extensible: lit-html est également personnalisable et extensible. Il s'agit de votre propre kit de création de modèles. Les directives personnalisent la manière dont les valeurs sont gérées, ce qui permet d'utiliser des valeurs asynchrones, des répétitions par clé efficaces, des limites d'erreur, etc. lit-html inclut plusieurs directives 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 vous n'avez besoin que de modèles, vous pouvez commencer dès maintenant avec la documentation lit-html. Si vous souhaitez créer des composants à utiliser dans votre application ou à partager avec votre équipe, lisez la suite pour en savoir plus.
LitElement: classe de base de composant Web léger
LitElement est une classe de base légère qui facilite la création et le partage de composants Web.
LitElement utilise lit-html pour afficher les composants et ajoute des API pour déclarer des propriétés et des attributs réactifs. Les éléments sont automatiquement mis à jour lorsque leurs propriétés changent. Elles sont également rapides, sans comparaison.
Voici un composant LitElement simple en TypeScript:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(Nous proposons également une excellente API JavaScript standard.)
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 ravi d'apprendre qu'ils sont désormais compatibles en mode natif avec Chrome, Safari et Firefox. La compatibilité avec Edge sera bientôt disponible, et les polyfills ne sont nécessaires que pour les anciennes versions de navigateur.
Si vous ne connaissez pas encore les composants Web, essayez-les ! Les composants Web vous permettent d'étendre le code HTML de manière à interagir 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 entreprise, publier des composants à utiliser partout sur le Web ou 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 tels que 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 standards ou créés à l'aide d'outils tels que les composants Web Lightning de Salesforce, Stencil d'Ionic, SkateJS ou la bibliothèque Polymer.
Commencer
Vous souhaitez essayer lit-html et LitElement ? Un bon point de départ est le tutoriel sur LitElement:
Si vous souhaitez utiliser lit-html seul ou intégrer la création de modèles lit-html à un autre projet, consultez la documentation lit-html:
Comme toujours, n'hésitez pas à nous faire part de vos commentaires. Vous pouvez nous contacter sur Slack ou Twitter. Nos projets sont Open Source (bien sûr) et vous pouvez signaler des bugs, demander l'ajout de fonctionnalités ou suggérer des améliorations sur GitHub: