Heute freuen wir uns, die ersten stabilen Releases unserer beiden Webentwicklungsbibliotheken der nächsten Generation ankündigen zu können: lit-html und LitElement.
lit-html ist eine kleine, schnelle und ausdrucksstarke Bibliothek für HTML-Templates. LitElement ist eine einfache Basisklasse zum Erstellen von Webkomponenten mit lit-html-Vorlagen.
Wenn Sie die Projekte verfolgt haben, wissen Sie wahrscheinlich, was lit-html und LitElement sind. Sie können zum Ende springen, wenn Sie möchten. Wenn Sie mit lit-html und LitElement noch nicht vertraut sind, lesen Sie weiter.
lit-html: eine kleine, schnelle Bibliothek für HTML-Templates
lit-html ist eine kleine (nur über 3 KB gebündelt, minimiert und komprimiert) und schnelle JavaScript-Bibliothek für HTML-Templates. lit-html eignet sich gut für funktionale Programmiermethoden, sodass Sie die Benutzeroberfläche Ihrer Anwendung deklarativ als Funktion ihres Zustands ausdrücken können.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
Das Rendern einer lit-html-Vorlage ist ganz einfach:
render(myTemplate('Ada'), document.body);
Wenn Sie eine Vorlage neu rendern, werden nur die geänderten Daten aktualisiert:
render(myTemplate('Grace'), document.body);
lit-html ist effizient, ausdrucksstark und erweiterbar:
- Effizient: lit-html ist blitzschnell. Wenn sich Daten ändern, muss lit-html keine Differenzberechnung durchführen. Stattdessen wird gespeichert, wo Sie Ausdrücke in Ihre Vorlage eingefügt haben, und nur diese dynamischen Teile werden aktualisiert.
- Ausdrucksstark: Mit lit-html stehen Ihnen die volle Leistung von JavaScript, deklarativer Benutzeroberfläche und funktionalen Programmiermustern zur Verfügung. Die Ausdrücke in einer lit-html-Vorlage sind nur JavaScript. Sie müssen also keine benutzerdefinierte Syntax lernen und haben die volle Ausdruckskraft der Sprache zur Verfügung. lit-html unterstützt viele Arten von Werten nativ: Strings, DOM-Knoten, Arrays und mehr. Vorlagen selbst sind Werte, die berechnet, an Funktionen übergeben und von Funktionen empfangen sowie verschachtelt werden können.
- Erweiterbar: lit-html ist außerdem anpassbar und erweiterbar – Ihr eigenes Vorlagen-Baukastensystem. Mithilfe von Direktiven lässt sich anpassen, wie Werte verarbeitet werden. So sind beispielsweise asynchrone Werte, effiziente Schlüsselwiederholungen und Fehlergrenzen möglich. lit-html enthält mehrere vordefinierte Direktiven und ermöglicht es, eigene zu definieren.
Eine Reihe von Bibliotheken und Projekten haben lit-html bereits implementiert. Eine Liste einiger dieser Bibliotheken finden Sie im awesome-lit-html-Repository auf GitHub.
Wenn Sie nur Vorlagen benötigen, können Sie jetzt mit der lit-html-Dokumentation beginnen. Wenn Sie Komponenten erstellen möchten, die Sie in Ihrer App verwenden oder für Ihr Team freigeben möchten, lesen Sie weiter.
LitElement: eine einfache Basisklasse für Webkomponenten
LitElement ist eine schlanke Basisklasse, mit der sich Webkomponenten einfacher denn je erstellen und freigeben lassen.
LitElement verwendet lit-html zum Rendern von Komponenten und fügt APIs hinzu, um reaktive Eigenschaften und Attribute zu deklarieren. Elemente werden automatisch aktualisiert, wenn sich ihre Eigenschaften ändern. Außerdem werden sie schnell aktualisiert, ohne dass ein Vergleich erforderlich ist.
Hier ist eine einfache LitElement-Komponente in TypeScript:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(Wir haben auch eine hervorragende Vanilla-JavaScript API.)
Dadurch wird ein Element erstellt, das Sie überall dort verwenden können, wo Sie ein reguläres HTML-Element verwenden würden:
<name-tag name="Ida"></name-tag>
Wenn Sie bereits Webkomponenten verwenden, werden Sie sich freuen, dass sie jetzt nativ in Chrome, Safari und Firefox unterstützt werden. Edge wird demnächst unterstützt. Polyfills sind nur für ältere Browserversionen erforderlich.
Wenn Sie Webkomponenten noch nicht kennen, sollten Sie sie ausprobieren. Mit Web-Komponenten können Sie HTML so erweitern, dass es mit anderen Bibliotheken, Tools und Frameworks interagieren kann. Das macht sie ideal für die Freigabe von UI-Elementen innerhalb einer großen Organisation, die Veröffentlichung von Komponenten für die Verwendung überall im Web oder die Erstellung von UI-Designsystemen wie Material Design.
Sie können benutzerdefinierte Elemente überall dort verwenden, wo Sie HTML verwenden: in Ihrem Hauptdokument, in einem CMS, in Markdown oder in Ansichten, die mit Frameworks wie React und Vue erstellt wurden. Sie können LitElement-Komponenten auch mit anderen Webkomponenten kombinieren, unabhängig davon, ob sie mit Standard-Webtechnologien oder mithilfe von Tools wie Salesforce Lightning Web Components, Stencil von Ionic, SkateJS oder der Polymer-Bibliothek erstellt wurden.
Jetzt starten
Möchten Sie lit-html und LitElement ausprobieren? Ein guter Ausgangspunkt ist das LitElement-Tutorial:
Wenn Sie lit-html alleine verwenden oder lit-html-Vorlagen in ein anderes Projekt einbinden möchten, lesen Sie die lit-html-Dokumentation:
Wie immer freuen wir uns über Feedback. Du kannst uns über Slack oder Twitter erreichen. Unsere Projekte sind natürlich Open Source. Sie können Fehler melden, Funktionsanfragen stellen oder Verbesserungen auf GitHub vorschlagen: