Błyskawiczne szablony i komponenty internetowe – lit-html i LitElement

Justin Fagnani
Twitter GitHub Strona główna

Z przyjemnością ogłaszamy pierwsze stabilne wersje naszych dwóch nowych bibliotek do tworzenia stron internetowych: lit-html i LitElement.

lit-html to niewielka, szybka i ekspresywna biblioteka do tworzenia szablonów HTML. LitElement to prosta klasa bazowa do tworzenia komponentów sieciowych za pomocą szablonów lit-html.

Jeśli śledzisz projekty, zapewne wiesz, czym są lit-html i LitElement (jeśli chcesz, możesz przeskoczyć na koniec). Jeśli dopiero zaczynasz poznawać lit-html i LitElement, przeczytaj dalszą część artykułu.

lit-html: niewielka, szybka biblioteka do tworzenia szablonów HTML

lit-html to niewielka (ponad 3 tys. w pakiecie, zminifikowana i skompresowana) biblioteka JavaScript do tworzenia szablonów HTML. Lit-html dobrze współpracuje z programami funkcjonalnymi, umożliwiając deklaratywne przedstawienie interfejsu aplikacji jako funkcji jej stanu.

const myTemplate = (name) => html`
    <div>
      Hi, my name is ${name}.
    </div>
`;

Szablon lit-html można łatwo wyrenderować:

render(myTemplate('Ada'), document.body);

Ponowne renderowanie szablonu powoduje zaktualizowanie tylko tych danych:

render(myTemplate('Grace'), document.body);

lit-html to język wydajny, ekspresyjny i uniwersalny:

  • Wydajny. lit-html jest niezwykle szybki. Gdy dane się zmieniają, lit-html nie musi wprowadzać żadnych różnic. Zamiast tego zapamiętuje miejsce wstawione w szablonie i aktualizuje tylko te części dynamiczne.
  • Ekspresywny. lit-html udostępnia pełne możliwości JavaScriptu, deklaratywnego interfejsu i funkcjonalnych wzorców programowania. Wyrażenia w szablonie lit-html są po prostu JavaScriptem, więc nie trzeba uczyć się niestandardowej składni i dysponujesz pełną ekspresyjnością języka. lit-html obsługuje wiele rodzajów wartości natywnie: ciągi, węzły DOM, tablice i nie tylko. Same szablony są wartościami, które można obliczać, przekazywać do funkcji i z nich, a także zagnieżdżać.
  • Extensible: lit-html można też dostosować i rozbudować – własny zestaw do tworzenia szablonów. Dyrektywy dostosowują sposób obsługi wartości, umożliwiając między innymi wartości asynchroniczne, efektywne powtarzanie za pomocą klucza, granice błędów i wiele innych. lit-html zawiera kilka gotowych dyrektyw i ułatwia definiowanie własnych.

Wiele bibliotek i projektów korzysta już z lit-html. Listę niektórych z tych bibliotek znajdziesz w repozytorium awesome-lit-html na GitHubie.

Jeśli potrzebujesz jedynie szablonów, możesz skorzystać z dokumentów lit-html. Jeśli chcesz tworzyć komponenty, których chcesz używać w aplikacji lub chcesz je udostępnić swojemu zespołowi, czytaj dalej.

LitElement: uproszczona klasa bazowa komponentu internetowego

LitElement to lekka klasa podstawowa, która ułatwia niż kiedykolwiek tworzenie i udostępnianie komponentów sieciowych.

LitElement wykorzystuje kod lit-html do renderowania komponentów i dodaje interfejsy API do deklarowania właściwości i atrybutów reaktywnych. Elementy są aktualizowane automatycznie, gdy zmienią się ich właściwości. Aktualizują się one szybko i niczym się nie różnią.

Oto prosty komponent LitElement w języku TypeScript:

@customElement('name-tag')
class NameTag extends LitElement {
  @property()
  name = 'a secret';

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}

(Mamy też świetny interfejs w stylu vanilla JavaScript API).

Spowoduje to utworzenie elementu, którego możesz używać wszędzie tam, gdzie można używać zwykłego elementu HTML:

<name-tag name="Ida"></name-tag>

Jeśli korzystasz już z komponentów sieciowych, ucieszy Cię informacja, że są one teraz natywnie obsługiwane w Chrome, Safari i Firefoksie. Obsługa Edge będzie dostępna wkrótce, a elementy polyfill będą potrzebne tylko w starszych wersjach przeglądarek.

Jeśli nie masz doświadczenia z komponentami internetowymi, wypróbuj je. Komponenty internetowe umożliwiają rozszerzanie kodu HTML w sposób, który współdziała z innymi bibliotekami, narzędziami i platformami. Dzięki temu idealnie nadają się do udostępniania elementów interfejsu w dużej organizacji, publikowania komponentów do użytku w dowolnym miejscu w sieci i tworzenia systemów interfejsu użytkownika, takich jak Material Design.

Elementów niestandardowych możesz używać wszędzie tam, gdzie używasz HTML: w głównym dokumencie, w systemie CMS, w formacie Markdown lub w widokach utworzonych za pomocą platform, takich jak React czy Vue. Komponenty LitElement można też łączyć z innymi komponentami internetowymi, niezależnie od tego, czy zostały napisane z wykorzystaniem technologii vanilla lub przy użyciu takich narzędzi jak komponenty w Salesforce Lightning Web, Stencil Ionic, SkateJS czy biblioteka Polymer.

Rozpocznij

Chcesz wypróbować lit-html i LitElement? Warto zacząć od samouczka LitElement:

Jeśli chcesz używać samego języka lit-html lub zintegrować go z innym projektem, zapoznaj się z dokumentacją lit-html:

Daj nam znać, co o tym myślisz. Możesz skontaktować się z nami na Slacku i na Twitterze. Nasze projekty to oczywiście oprogramowanie open source, więc na GitHubie możesz zgłaszać błędy, zgłaszać prośby o dodanie funkcji lub proponować ulepszenia: