Oggi siamo lieti di annunciare le prime versioni stabili delle nostre due librerie di sviluppo web di nuova generazione: lit-html e LitElement.
lit-html è una libreria ridotta, rapida ed espressiva per i modelli HTML. LitElement è una classe base semplice per la creazione di componenti web con modelli lit-html.
Se hai seguito i progetti, probabilmente sai già cosa sono lit-html e LitElement (e se vuoi puoi passare alla fine). Se non hai mai utilizzato lit-html e LitElement, continua a leggere per consultare una panoramica.
lit-html: una piccola libreria veloce per la creazione di modelli HTML
lit-html è una piccola libreria JavaScript in bundle, minimizzata e compressa con gzip (poco più di 3 kB) per i modelli HTML. lit-html funziona bene con 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>
`;
Il rendering di un modello lit-html è semplice:
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:
- Efficiente. lit-html è ultraveloce. Quando i dati cambiano, lit-html non richiede alcuna differenza, ma memorizza il punto in cui hai inserito le espressioni nel modello e aggiorna solo queste parti dinamiche.
- Espressivo. lit-html ti 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 è necessario imparare una sintassi personalizzata e hai a disposizione tutta l'espressività del linguaggio. lit-html supporta molti tipi di valori in modo nativo: stringhe, nodi DOM, array e altro ancora. I modelli stessi sono valori che possono essere calcolati, trasmessi a e dalle funzioni e nidificati.
- Extensible: il tag lit-html è inoltre personalizzabile ed estensibile: il tuo kit di creazione di modelli. Le direttive personalizzano il modo in cui vengono gestiti i valori, consentendo valori asincroni, ripetizioni di chiavi efficienti, limiti di errore e altro ancora. lit-html include diverse istruzioni pronte all'uso e ne semplifica la definizione.
Il codice lit-html è già stato incorporato in diverse librerie e progetti. Puoi trovare un elenco di alcune di queste librerie nel repository awesome-lit-html su GitHub.
Se ti serve solo un modello, puoi iniziare subito con i documenti lit-html. Se vuoi creare componenti da usare nella tua app o condividerli con il team, continua a leggere.
LitElement: una classe base di componenti web leggeri
LitElement è una classe base leggera che rende più semplice che mai 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 loro proprietà cambiano. Inoltre, si aggiornano rapidamente, senza differenze.
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 vanilla.)
In questo modo viene creato un elemento che puoi utilizzare ovunque in cui utilizzi 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 Edge sarà presto disponibile e i polyfill sono necessari solo per le versioni precedenti del browser.
Se non hai mai utilizzato i componenti web, ti consigliamo di provarli. I componenti web ti consentono di estendere il codice HTML in modo da interagire con altri strumenti, librerie e framework. Per questo sono ideali per la condivisione di elementi dell'interfaccia utente all'interno di una grande organizzazione, per la pubblicazione di componenti da utilizzare ovunque sul web o per la creazione di sistemi di progettazione dell'interfaccia utente come Material Design.
Puoi utilizzare gli elementi personalizzati ovunque usi HTML: nel documento principale, in un CMS, in Markdown o in viste realizzate con framework come React e Vue. Puoi anche combinare componenti LitElement con altri componenti web, sia che siano stati scritti utilizzando tecnologie web vanilla o con l'aiuto di strumenti come Salesforce Lightning Web Componenti, Stencil di Ionic, SkateJS o la libreria Polymer.
Inizia
Vuoi provare lit-html e LitElement? Un buon punto di partenza è il tutorial di LitElement:
Se ti interessa utilizzare lit-html da solo o integrare i modelli lit-html in un altro progetto, consulta la documentazione 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: