Vandaag zijn we verheugd om de eerste stabiele releases aan te kondigen van onze twee webontwikkelingsbibliotheken van de volgende generatie: lit-html en LitElement .
lit-html is een kleine, snelle, expressieve bibliotheek voor HTML-sjablonen. LitElement is een eenvoudige basisklasse voor het maken van webcomponenten met lit-html-sjablonen.
Als je de projecten hebt gevolgd, weet je waarschijnlijk waar lit-html en LitElement over gaan (en je kunt naar het einde gaan als je wilt). Als je nieuw bent bij lit-html en LitElement, lees dan verder voor een overzicht.
lit-html: een kleine, snelle bibliotheek voor HTML-sjablonen
lit-html is een kleine (iets meer dan 3k gebundeld, verkleind en gzipped) en snelle JavaScript-bibliotheek voor HTML-sjablonen. lit-html werkt goed met functionele programmeerbenaderingen, waardoor u de gebruikersinterface van uw applicatie declaratief kunt uitdrukken, als functie van de staat ervan.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
Het is eenvoudig om een lit-html-sjabloon weer te geven:
render(myTemplate('Ada'), document.body);
Als u een sjabloon opnieuw rendert, worden alleen de gewijzigde gegevens bijgewerkt:
render(myTemplate('Grace'), document.body);
lit-html is efficiënt, expressief en uitbreidbaar:
- Efficiënt . lit-html is razendsnel. Wanneer gegevens veranderen, hoeft lit-html geen verschil te maken; in plaats daarvan onthoudt het waar u expressies in uw sjabloon hebt ingevoegd en werkt het alleen deze dynamische delen bij.
- Expressief . lit-html geeft u de volledige kracht van JavaScript, declaratieve gebruikersinterface en functionele programmeerpatronen. De expressies in een lit-html-sjabloon zijn slechts JavaScript, dus u hoeft geen aangepaste syntaxis te leren en u beschikt over alle expressiviteit van de taal. lit-html ondersteunt vele soorten waarden: strings, DOM-knooppunten, arrays en meer. Sjablonen zelf zijn waarden die kunnen worden berekend, doorgegeven aan en van functies en kunnen worden genest.
- Uitbreidbaar : lit-html is ook aanpasbaar en uitbreidbaar: uw eigen sjabloonbouwpakket. Richtlijnen passen de manier aan waarop waarden worden verwerkt, waardoor asynchrone waarden, efficiënte ingetoetste herhalingen, foutgrenzen en meer mogelijk zijn. lit-html bevat verschillende kant-en-klare richtlijnen en maakt het gemakkelijk om uw eigen richtlijnen te definiëren.
Een aantal bibliotheken en projecten hebben lit-html al geïntegreerd. Je kunt een lijst van enkele van deze bibliotheken vinden in de awesome-lit-html repository op GitHub.
Als u alleen maar sjablonen nodig heeft, kunt u nu aan de slag met de lit-html-documenten . Als u componenten wilt bouwen om in uw app te gebruiken of te delen met uw team, lees dan verder voor meer informatie.
LitElement: een lichtgewicht basisklasse voor webcomponenten
LitElement is een lichtgewicht basisklasse die het eenvoudiger dan ooit maakt om webcomponenten te bouwen en te delen.
LitElement gebruikt lit-html om componenten weer te geven en voegt API's toe om reactieve eigenschappen en attributen te declareren. Elementen worden automatisch bijgewerkt wanneer hun eigenschappen veranderen. En ze worden snel bijgewerkt, zonder verschil.
Hier is een eenvoudige LitElement-component in TypeScript:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(We hebben ook een geweldige JavaScript-API.)
Hiermee wordt een element gemaakt dat u overal kunt gebruiken waar u een gewoon HTML-element zou gebruiken:
<name-tag name="Ida"></name-tag>
Als u al webcomponenten gebruikt, zult u blij zijn te horen dat ze nu standaard worden ondersteund in Chrome, Safari en Firefox. Edge-ondersteuning komt binnenkort en polyfills zijn alleen nodig voor oudere browserversies.
Als u nieuw bent bij Web Components, moet u het eens proberen! Met webcomponenten kunt u HTML uitbreiden op een manier die samenwerkt met andere bibliotheken, tools en frameworks. Dit maakt ze ideaal voor het delen van UI-elementen binnen een grote organisatie, het publiceren van componenten voor gebruik overal op internet, of het bouwen van UI-ontwerpsystemen zoals Material Design.
U kunt aangepaste elementen overal gebruiken waar u HTML gebruikt: in uw hoofddocument, in een CMS, in Markdown of in weergaven die zijn gebouwd met raamwerken zoals React en Vue. U kunt LitElement-componenten ook mixen en matchen met andere webcomponenten, of ze nu zijn geschreven met behulp van standaardwebtechnologieën of gemaakt met behulp van tools zoals Salesforce Lightning Web Components , Ionic's stencil , SkateJS of de Polymer-bibliotheek .
Begin
Wil je lit-html en LitElement proberen? Een goed startpunt is de LitElement-tutorial:
Als je geïnteresseerd bent in het gebruik van lit-html op zichzelf, of in het integreren van lit-html-sjablonen in een ander project, bekijk dan de lit-html-documenten:
Laat ons, zoals altijd, weten wat u ervan vindt. U kunt ons bereiken op Slack of Twitter . Onze projecten zijn open source (natuurlijk!) en je kunt bugs melden, functieverzoeken indienen of verbeteringen voorstellen op GitHub: