Oggi siamo lieti di annunciare le prime release stabili delle nostre due librerie di sviluppo web di nuova generazione: lit-html e LitElement.
lit-html è una libreria piccola, veloce ed espressiva per i modelli HTML. LitElement è una semplice classe di base per la creazione di componenti web con modelli lit-html.
Se hai seguito i progetti, probabilmente sai cosa sono lit-html e LitElement (e puoi saltare fino alla fine, se vuoi). Se non hai mai utilizzato lit-html e LitElement, continua a leggere per una panoramica.
lit-html: una libreria piccola e veloce per la creazione di modelli HTML
lit-html è una libreria JavaScript piccola (poco più di 3000 KB in bundle, compressa e con gzip) e veloce per la creazione di modelli HTML. lit-html funziona bene con gli approcci di programmazione funzionale, consentendoti di esprimere l'interfaccia utente della tua applicazione in modo dichiarativo, in funzione del suo stato.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
È semplice eseguire il rendering di un modello lit-html:
render(myTemplate('Ada'), document.body);
Il nuovo rendering di un modello aggiorna solo i dati modificati:
render(myTemplate('Grace'), document.body);
lit-html è efficiente, espressivo ed estensibile:
- Efficace. lit-html è superveloce. Quando i dati cambiano, lit-html non deve eseguire alcun confronto. Ricorda invece dove hai inserito le espressioni nel modello e aggiorna solo queste parti dinamiche.
- Espressivo. lit-html offre tutta la potenza di JavaScript, dell'interfaccia utente dichiarativa e dei pattern di programmazione funzionale. Le espressioni in un modello lit-html sono solo JavaScript, quindi non devi imparare una sintassi personalizzata e hai a disposizione tutta l'espressività del linguaggio. lit-html supporta nativamente molti tipi di valori: stringhe, nodi DOM, array e altro ancora. I modelli stessi sono valori che possono essere calcolati, trasmessi a e da funzioni e nidificati.
- Estendibile: lit-html è anche personalizzabile ed estensibile, il tuo kit di costruzione di modelli. Le direttive personalizzano il modo in cui vengono gestiti i valori, consentendo valori asincroni, ripetizioni con chiave efficienti, limiti di errore e altro ancora. lit-html include diverse direttive pronte all'uso e semplifica la definizione di direttive personalizzate.
Diverse librerie e progetti hanno già incorporato lit-html. Puoi trovare un elenco di alcune di queste librerie nel repository awesome-lit-html su GitHub.
Se hai bisogno solo di modelli, puoi iniziare subito con la documentazione di lit-html. Se vuoi creare componenti da utilizzare nella tua app o da condividere con il tuo team, continua a leggere per saperne di più.
LitElement: una classe di base leggera per i componenti web
LitElement è una classe di base leggera che semplifica la creazione e la condivisione di componenti web.
LitElement utilizza lit-html per eseguire il rendering dei componenti e aggiunge API per dichiarare proprietà e attributi reattivi. Gli elementi vengono aggiornati automaticamente quando le relative proprietà cambiano. Inoltre, si aggiornano rapidamente, senza confronti.
Ecco un semplice componente LitElement in TypeScript:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
Abbiamo anche un'ottima API JavaScript standard.
Viene creato un elemento che puoi utilizzare ovunque utilizzeresti un normale elemento HTML:
<name-tag name="Ida"></name-tag>
Se utilizzi già i componenti web, ti farà piacere sapere che ora sono supportati in modo nativo in Chrome, Safari e Firefox. Il supporto di Edge sarà disponibile a breve e i polyfill sono necessari solo per le versioni legacy del browser.
Se non hai mai utilizzato i componenti web, ti consigliamo di provarli. I componenti web ti consentono di estendere l'HTML in modo che interagisca con altre librerie, strumenti e framework. Questo li rende ideali per condividere elementi dell'interfaccia utente all'interno di una grande organizzazione, pubblicare componenti da utilizzare ovunque sul web o creare sistemi di progettazione dell'interfaccia utente come Material Design.
Puoi utilizzare gli elementi personalizzati ovunque utilizzi HTML: nel documento principale, in un CMS, in Markdown o nelle visualizzazioni create con framework come React e Vue. Puoi anche combinare i componenti LitElement con altri componenti web, che siano stati scritti utilizzando tecnologie web standard o realizzati con l'aiuto di strumenti come Salesforce Lightning Web Components, Stencil di Ionic, SkateJS o la libreria Polymer.
Inizia
Vuoi provare lit-html e LitElement? Un buon punto di partenza è il tutorial su LitElement:
Se ti interessa utilizzare lit-html da solo o integrare i modelli lit-html in un altro progetto, consulta la documentazione di lit-html:
Come sempre, facci sapere cosa ne pensi. Puoi contattarci su Slack o Twitter. I nostri progetti sono open source (ovviamente!) e puoi segnalare bug, inviare richieste di funzionalità o suggerire miglioramenti su GitHub: