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

Z przyjemnością ogłaszamy, że udostępniliśmy pierwsze stabilne wersje 2 bibliotek do tworzenia stron internetowych nowej generacji: lit-html i LitElement.

lit-html to niewielka, szybka i wyrazista biblioteka do tworzenia szablonów HTML. LitElement to prosta klasa podstawowa do tworzenia komponentów internetowych za pomocą szablonów lit-html.

Jeśli śledzisz te projekty, pewnie wiesz, czym są lit-html i LitElement (jeśli chcesz, możesz przejść od razu do końca). Jeśli dopiero zaczynasz korzystać z lit-html i LitElement, zapoznaj się z ich ogólnym omówieniem.

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

lit-html to niewielka (nieco ponad 3 KB po skompilowaniu, zminiaturyzowaniu i skompresowaniu) i szybka biblioteka JavaScript do tworzenia szablonów HTML. lit-html dobrze współpracuje z podejściami do programowania funkcyjnego, umożliwiając deklarowanie interfejsu użytkownika w sposób deklaratywny, jako funkcję stanu aplikacji.

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

Wyrenderowanie szablonu lit-html jest bardzo proste:

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

Ponowne wyrenderowanie szablonu powoduje zaktualizowanie tylko zmienionych danych:

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

lit-html jest wydajny, ekspresyjny i rozszerzalny:

  • Wydajna. Biblioteka lit-html jest błyskawicznie szybka. Gdy dane się zmieniają, lit-html nie musi wykonywać żadnych porównań. Zamiast tego pamięta, gdzie w szablonie wstawiono wyrażenia, i tylko aktualizuje te części dynamiczne.
  • Wyrazisty. Biblioteka lit-html zapewnia pełną moc JavaScriptu, deklaratywnego interfejsu użytkownika i funkcjonalnych wzorów programowania. Wyrażenia w szablonie lit-html to po prostu JavaScript, więc nie musisz uczyć się niestandardowej składni i masz do dyspozycji wszystkie możliwości tego języka. lit-html obsługuje wiele typów wartości: ciągi znaków, węzły DOM, tablice itp. Szablony to wartości, które można obliczać, przekazywać do funkcji i z nich oraz umieszczać w strukturze osadzonej.
  • Rozszerzalność: lit-html można też dostosować i rozszerzyć – to Twój własny zestaw do tworzenia szablonów. Dyrektywy umożliwiają dostosowywanie sposobu obsługi wartości, co pozwala na stosowanie wartości asynchronicznych, wydajnych powtórzeń z kluczem, granic błędów i innych elementów. Biblioteka lit-html zawiera kilka gotowych dyrektyw i ułatwia definiowanie własnych.

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

Jeśli potrzebujesz tylko szablonów, możesz zacząć od dokumentacji lit-html. Jeśli chcesz tworzyć komponenty do wykorzystania w aplikacji lub udostępniania ich swojemu zespołowi, przeczytaj ten artykuł.

LitElement: lekka klasa podstawowa WebComponent

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

LitElement używa lit-html do renderowania komponentów i dodaje interfejsy API do deklarowania reaktywnych właściwości i atrybutów. Elementy są aktualizowane automatycznie, gdy zmieniają się ich właściwości. A do tego aktualizują się błyskawicznie, bez porównywania.

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ż świetne podstawowe interfejsy JavaScript API).

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

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

Jeśli korzystasz już z komponentów internetowych, ucieszy Cię wiadomość, że są one teraz obsługiwane natywnie w Chrome, Safari i Firefox. Wkrótce udostępnimy obsługę przeglądarki Edge, a polyfille są potrzebne tylko w przypadku starszych wersji przeglądarek.

Jeśli nie znasz jeszcze komponentów internetowych, warto je wypróbować. Komponenty internetowe umożliwiają rozszerzanie HTML w sposób umożliwiający współpracę z innymi bibliotekami, narzędziami i platformami. Dzięki temu są one idealne do udostępniania elementów interfejsu w dużej organizacji, publikowania komponentów do użycia w dowolnym miejscu w internecie lub tworzenia systemów projektowania interfejsu, takich jak Material Design.

Elementów niestandardowych możesz używać wszędzie tam, gdzie używasz HTML: w dokumencie głównym, w systemie CMS, w Markdownie lub w widokach utworzonych za pomocą frameworków takich jak React i Vue. Możesz też łączyć komponenty LitElement z innymi komponentami internetowymi, niezależnie od tego, czy zostały one napisane przy użyciu standardowych technologii internetowych czy za pomocą narzędzi takich jak Salesforce Lightning Web Components, Stencil Ionic, SkateJS czy bibliotek Polymer.

Rozpocznij

Chcesz wypróbować lit-html i LitElement? Dobrym punktem wyjścia jest samouczek LitElement:

Jeśli chcesz używać lit-html samodzielnie lub zintegrować szablony lit-html z innym projektem, zapoznaj się z dokumentacją lit-html:

Jak zawsze, podziel się z nami swoją opinią. Możesz się z nami skontaktować na Slacku lub na Twitter. Nasze projekty są oczywiście dostępne w wersji open source. Możesz zgłaszać błędy, przesyłać prośby o dodanie funkcji lub sugerować ulepszenia na GitHubie: