Wir freuen uns, heute die erste stabile Version unserer beiden Webentwicklungsbibliotheken der nächsten Generation ankündigen zu können: lit-html und LitElement.
lit-html ist eine kleine, schnelle und aussagekräftige Bibliothek für HTML-Vorlagen. LitElement ist eine einfache Basisklasse zum Erstellen von Webkomponenten mit Lit-HTML-Vorlagen.
Wenn Sie die Projekte verfolgt haben, wissen Sie wahrscheinlich, worum es bei lit-html und LitElement geht. Sie können zum Ende springen, wenn Sie möchten. Wenn Sie mit lit-html und LitElement noch nicht vertraut sind, finden Sie hier eine Übersicht.
lit-html: eine kleine, schnelle Bibliothek für HTML-Vorlagen
Lit-HTML ist eine kleine (etwa 3.000 gebündelte, reduzierte und mit gzip komprimierte JavaScript-Bibliothek) und schnelle JavaScript-Bibliothek für die Erstellung von HTML-Vorlagen. Lit-HTML eignet sich gut für funktionale Programmieransätze, sodass Sie die UI Ihrer Anwendung je nach Status deklarativ ausdrücken können.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
Es ist einfach, eine Lit-HTML-Vorlage zu rendern:
render(myTemplate('Ada'), document.body);
Beim erneuten Rendern einer Vorlage 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 keinen Unterschied machen. Stattdessen merkt es sich, wo Sie Ausdrücke in der Vorlage eingefügt haben, und aktualisiert nur diese dynamischen Teile.
- Ausdrucksstark. Lit-HTML bietet Ihnen die volle Leistung von JavaScript, deklarativer UI und funktionalen Programmiermustern. Die Ausdrücke in einer Lite-HTML-Vorlage sind nur JavaScript, sodass Sie keine benutzerdefinierte Syntax erlernen müssen und Ihnen die Ausdruckskraft der Sprache zur Verfügung steht. Lit-HTML unterstützt viele Arten von Werten nativ: Strings, DOM-Knoten, Arrays und mehr. Vorlagen selbst sind Werte, die berechnet, an und von Funktionen übergeben und verschachtelt werden können.
- Erweiterbar: Lit-HTML ist außerdem anpassbar und erweiterbar – Ihr eigenes Vorlagenkonstruktionskit. Mit Anweisungen lässt sich die Verarbeitung von Werten anpassen. Dies ermöglicht asynchrone Werte, wiederholte Schlüsselwiederholungen, Fehlergrenzen und mehr. Lit-HTML umfasst mehrere einsatzbereite Anweisungen und macht es einfach, eigene zu definieren.
Lit-HTML wurde bereits in eine Reihe von Bibliotheken und Projekten integriert. Eine Liste einiger dieser Bibliotheken finden Sie im Repository awesome-lit-html auf GitHub.
Wenn Sie lediglich Vorlagen benötigen, können Sie mithilfe der lit-html-Dokumente gleich loslegen. Wenn Sie Komponenten für Ihre App erstellen oder mit Ihrem Team teilen möchten, lesen Sie weiter.
LitElement: eine einfache Web Component-Basisklasse
LitElement ist eine einfache Basisklasse, die das Erstellen und Freigeben von Webkomponenten vereinfacht.
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 ohne Unterschiede aktualisiert.
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 ein großartiges einfaches JavaScript-API.)
Dadurch wird ein Element erstellt, das Sie überall verwenden können, wo Sie ein reguläres HTML-Element verwenden würden:
<name-tag name="Ida"></name-tag>
Falls Sie Webkomponenten bereits verwenden, freuen Sie sich darüber, dass sie jetzt in Chrome, Safari und Firefox nativ unterstützt werden. Edge-Unterstützung ist bald verfügbar und Polyfills werden nur für Legacy-Browserversionen benötigt.
Wenn Sie noch keine Erfahrung mit Webkomponenten haben, sollten Sie sie unbedingt ausprobieren. Mit Webkomponenten können Sie HTML so erweitern, dass es mit anderen Bibliotheken, Tools und Frameworks zusammenarbeitet. Daher sind sie ideal, um UI-Elemente innerhalb einer großen Organisation zu teilen, Komponenten zur Verwendung überall im Web zu veröffentlichen oder UI-Designsysteme wie Material Design zu erstellen.
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 einfachen Webtechnologien geschrieben wurden oder mit Tools wie Salesforce Lightning Web Components, Stencil von Ionic, SkateJS oder der Polymer-Bibliothek erstellt wurden.
Erste Schritte
Möchten Sie lit-html und LitElement ausprobieren? Ein guter Ausgangspunkt ist das LitElement-Tutorial:
Wenn Sie daran interessiert sind, lit-html alleine zu verwenden oder Lit-HTML-Vorlagen in ein anderes Projekt zu integrieren, lesen Sie die lit-html-Dokumente:
Wie immer freuen wir uns auf dein Feedback. Sie können uns über Slack oder Twitter erreichen. Unsere Projekte sind (natürlich!) Open-Source-Projekte. Auf GitHub können Sie Programmfehler melden, Funktionsanfragen stellen oder Verbesserungen vorschlagen: