Lo scopo di questa serie di blog è approfondire la libreria Lit e acquisire una comprensione completa delle sue caratteristiche uniche e di come si distingue dalle altre librerie e framework sul mercato.

La serie è divisa in tre parti, che coprono argomenti come
1. Come funziona lit-html?
2. In che modo Lit Element esegue gli aggiornamenti batch sul DOM?
3. Un confronto e un benchmarking di Lit con altri framework e librerie, insieme ai suoi potenziali casi d'uso.

In questo particolare blog, ci concentreremo sull'esplorazione di lit-html e dei suoi meccanismi interni. Ma prima di addentrarci in lit-html, diamo prima una panoramica della libreria Lit stessa.

Cos'è Illuminato?

Lit è una libreria di componenti Web leggera con un ingombro ridotto di circa 5 KB.

È specificamente progettato per lo sviluppo efficiente e rapido dei componenti dell'interfaccia utente utilizzando le specifiche dei componenti Web e migliora ulteriormente le prestazioni introducendo aggiornamenti batch al DOM.

Infatti, secondo un benchmark pubblico condotto dahttps://krausest.github.io/js-framework-benchmark/index.html, Lit Element ha dimostrato prestazioni più veloci rispetto a React.

Per saperne di più su Lit Element, puoi visitare il loro sito ufficiale all'indirizzohttps://lit.dev/. Tuttavia, l'obiettivo di questa serie è capire come funziona Lit Element e come viene implementato.

Lit Element è basato su lit-html, che è una libreria di modelli utilizzata per creare modelli e logica di aggiornamento DOM batch. Lit Element estende lit-html fornendo funzionalità aggiuntive per gli aggiornamenti batch.

Creazione del modello lit-html:

lit-html è una libreria di modelli JavaScript che consente la creazione di modelli utilizzando valori letterali con tag JavaScript e funzioni di tag, sfruttando funzionalità JavaScript native e componenti Web.

A differenza di JSX o di altre librerie di modelli, lit-html non richiede una fase di compilazione per convertire modelli o sintassi specifici del framework in modelli o sintassi compatibili con il browser, in quanto utilizza direttamente le funzionalità JavaScript native.

Creiamo un template usando la libreria lit-html:

In questo esempio importiamo due funzioni dalla libreria lit-html:
1. html, che è una funzione tag.
2. render, che viene utilizzato per eseguire il rendering del modello nel DOM.

Successivamente, definiamo una funzione chiamata myTemplateche accetta un argomento name.

Il modello è definito utilizzando la htmlfunzione tag, racchiusa tra apici inversi (``), e contiene uno snippet HTML <div>Hello, ${name}</div>.

è ${name}un segnaposto che può essere sostituito dinamicamente con un valore in fase di esecuzione in base all'argomento passato alla funzione myTemplate.

La htmlfunzione tag restituisce un TemplateResultoggetto, che rappresenta il modello che può essere visualizzato nel DOM.

Nelle prossime sezioni, esploreremo la funzione tag JavaScript e come la funzione tag html è implementata nella libreria lit-html.

Nell'ultima riga di codice, stiamo invocando il rendermetodo, che esegue il rendering del modello.
Il rendermetodo accetta due argomenti:
a) TemplateResultoggetto che rappresenta il template da rendere.
b) Riferimento all'elemento DOM in cui verrà visualizzato il modello.

Funzione tag in JavaScript:

Nota: se hai già familiarità con le funzioni dei tag, puoi saltare questa sezione.

La funzione tag in JavaScript è un tipo speciale di funzione che può essere utilizzata per elaborare i valori letterali del modello, che sono stringhe racchiuse tra apici inversi (``).

La funzione tag viene richiamata immediatamente prima della valutazione del valore letterale del modello e riceve il valore letterale del modello ei relativi valori interpolati come argomenti separati.

Ad esempio, considera il seguente codice:

var name = "Whatfix";
function sayHello(literalString, ...values) {
    console.log(literalString); //Output: ['Hello, ', '', raw: Array(2)]
    console.log(values); //Output: ['Whatfix']
}
sayHello`Hello, ${name}`;

UN. Un array di parti statiche del template literal: literalString.
Nel nostro esempio, il valore del literalStringparametro è['Hello, ', '', raw: Array(2)]

B. Uno o più argomenti corrispondenti al numero di espressioni nel letterale con tag: values. Nel nostro esempio, stiamo usando l'operatore spread ( ...) per rappresentarlo come un array. Il suo valore è ['Whatfix'], che contiene i valori delle espressioni utilizzate nel template literal.

Un tuffo nel metodo html:

Ecco un'implementazione della htmlfunzione tag dal lit-htmlrepository:https://github.com/lit/lit. (Ho apportato alcune migliorie al codice rimuovendo parti superflue per renderlo più comprensibile).

const html =
  <T extends ResultType>(type: T) =>
  (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult<T> => {
    return {
      ['_$litType$']: type,
      strings,
      values,
    };
  };

Quindi forma un oggetto, noto come TemplateResult, con tre parametri e lo restituisce.

I tre parametri di TemplateResultinclude _$litType$, stringhe e valori[].

UN. Il parametro _$litType$ contiene il tipo.
B. Il parametro strings contiene un array delle parti statiche dei letterali.
C. Il parametro values[] contiene i valori delle parti dinamiche del letterale.

Nel nostro esempio precedente (Template — A), myTemplate("whatfix”)il metodo restituirà:

{
  _$litType$: 1,
  strings: ["<div>Hello, ", "</div>", raw: Array(2)],
  values: ["whatfix"]
}

Un'analisi approfondita del metodo di rendering:

Il metodo render in lit-html è responsabile del rendering del componente nell'interfaccia utente.
Accetta tre argomenti:

UN. value — Un TemplateResultvalore generato dalla funzione tag html, come discusso nella sezione precedente.

B. container — Un riferimento all'elemento DOM in cui verrà visualizzato il modello.

C. opzioni — Ai fini della semplificazione, questo argomento può essere ignorato per comprendere meglio il processo.

Possiamo comprendere visivamente il funzionamento del metodo di rendering nel nostro esempio utilizzando un diagramma di flusso.

Successivamente, elaboriamo il nostro componente di esempio, Modello A, utilizzando il diagramma di flusso di cui sopra. Poiché abbiamo già generato un TemplateResultoggetto utilizzando la funzione tag html, come discusso nella sezione precedente, possiamo ora procedere con il processo di rendering.

L' TemplateResultoggetto per il nostro componente di esempio, Template A, assumerà la seguente struttura:

Il passaggio successivo comporta la generazione dell'elemento <template>dall'oggetto TemplateResult.
Nel nostro componente di esempio, Modello A, che include una parte dinamica rappresentata da {name}, generiamo un numero casuale di nove cifre e lo aggiungiamo come nodo di commento al posto di {name}.
Di conseguenza, l' <template>elemento apparirà come segue: