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: