Молниеносные шаблоны и веб-компоненты —lit-html & ЛитЭлемент

Сегодня мы рады объявить о первых стабильных выпусках наших двух библиотек веб-разработки нового поколения: lit-html и LitElement .

lit-html — это крошечная, быстрая и выразительная библиотека для создания шаблонов HTML. LitElement — это простой базовый класс для создания веб-компонентов с помощью шаблоновlit-html.

Если вы следили за проектами, вы, вероятно, знаете, что такоеlit-html и LitElement (и вы можете пропустить их до конца, если хотите). Если вы новичок вlit-html и LitElement, читайте их обзор.

lit-html: маленькая и быстрая библиотека для HTML-шаблонов.

lit-html — это крошечная (чуть более 3 КБ в комплекте, минифицированная и заархивированная) и быстрая библиотека JavaScript для создания HTML-шаблонов. lit-html хорошо работает с подходами функционального программирования, позволяя вам декларативно выражать пользовательский интерфейс вашего приложения в зависимости от его состояния.

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

Отрисовать шаблонlit-html просто:

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

Повторная отрисовка шаблона обновляет только измененные данные:

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

lit-html эффективен, выразителен и расширяем:

  • Эффективный . lit-html работает молниеносно. Когда данные изменяются,lit-html не нужно выполнять какие-либо различия; вместо этого он запоминает, где вы вставили выражения в шаблон, и обновляет только эти динамические части.
  • Выразительный . lit-html предоставляет вам всю мощь JavaScript, декларативного пользовательского интерфейса и шаблонов функционального программирования. Выражения в шаблонеlit-html — это просто JavaScript, поэтому вам не нужно изучать специальный синтаксис, и в вашем распоряжении вся выразительность языка. lit-html изначально поддерживает множество типов значений: строки, узлы DOM, массивы и многое другое. Сами шаблоны представляют собой значения, которые можно вычислять, передавать в функции и из них, а также вкладывать.
  • Расширяемость :lit-html также можно настраивать и расширять — это ваш собственный набор для создания шаблонов. Директивы настраивают способ обработки значений, обеспечивая асинхронность значений, эффективное повторение ключей, границы ошибок и многое другое. lit-html включает в себя несколько готовых к использованию директив и позволяет легко определить свои собственные.

Ряд библиотек и проектов уже включилиlit-html. Список некоторых из этих библиотек можно найти в репозитории Awesome-lit-html на GitHub.

Если шаблонизация — это все, что вам нужно, вы можете начать работу с документамиlit-html прямо сейчас. Если вы хотите создать компоненты для использования в своем приложении или поделиться ими со своей командой, читайте дальше, чтобы узнать больше.

LitElement: облегченный базовый класс веб-компонентов.

LitElement — это легкий базовый класс, который упрощает создание и совместное использование веб-компонентов.

LitElement используетlit-html для рендеринга компонентов и добавляет API для объявления реактивных свойств и атрибутов. Элементы обновляются автоматически при изменении их свойств. И они обновляются быстро , без различий.

Вот простой компонент LitElement в TypeScript:

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

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

(У нас также есть отличный ванильный API JavaScript.)

Это создаст элемент, который вы можете использовать везде, где вы используете обычный элемент HTML:

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

Если вы уже используете веб-компоненты, вы будете рады узнать, что теперь они изначально поддерживаются в Chrome, Safari и Firefox. Поддержка Edge скоро появится, а полифилы необходимы только для устаревших версий браузера.

Если вы новичок в веб-компонентах, вам стоит попробовать! Веб-компоненты позволяют расширять HTML таким образом, чтобы он мог взаимодействовать с другими библиотеками, инструментами и платформами. Это делает их идеальными для совместного использования элементов пользовательского интерфейса в большой организации, публикации компонентов для использования в любом месте в Интернете или создания систем проектирования пользовательского интерфейса, таких как Material Design.

Вы можете использовать пользовательские элементы везде, где используете HTML: в основном документе, в CMS, в Markdown или в представлениях, созданных с помощью таких платформ, как React и Vue. Вы также можете смешивать и сопоставлять компоненты LitElement с другими веб-компонентами, независимо от того, написаны ли они с использованием ванильных веб-технологий или созданы с помощью таких инструментов, как веб-компоненты Salesforce Lightning , Ionic's Stencil , SkateJS или библиотека Polymer .

Начать

Хотите попробоватьlit-html и LitElement? Хорошей отправной точкой является учебник LitElement:

Если вы хотите использоватьlit-html отдельно или интегрировать шаблоныlit-html в другой проект, см. документациюlit-html:

Как всегда, дайте нам знать, что вы думаете. Вы можете связаться с нами в Slack или Twitter . Наши проекты имеют открытый исходный код (конечно!), и вы можете сообщать об ошибках, отправлять запросы на добавление функций или предлагать улучшения на GitHub: