Что такое Lit?

Lit — это простая библиотека для создания быстрых и легковесных веб-компонентов.

В основе Lit лежит базовый класс компонентов, избавляющий от шаблонного кода и предоставляющий реактивное состояние, изолированные стили и декларативную систему шаблонов — компактную, быструю и выразительную.

С помощью Lit можно создавать практически любые пользовательские интерфейсы для веба!

Прежде всего нужно знать, что каждый компонент Lit — это стандартный веб-компонент. Веб-компоненты обладают суперспособностью взаимодействовать с другими технологиями: браузеры поддерживают их изначально, поэтому их можно использовать в любой среде HTML, с любым фреймворком или вообще без него.

Поэтому Lit идеально подходит для разработки компонентов для повторного использования или дизайн-систем. Компоненты Lit можно использовать в разных приложениях и на разных сайтах, даже если они созданы на основе различных фронтенд-технологий. Разработчикам сайтов, использующим компоненты Lit, не нужно писать или даже видеть код Lit: они могут просто использовать компоненты так же, как встроенные элементы HTML.

Lit также отлично подходит для постепенного расширения возможностей обычных HTML-сайтов. Браузеры распознают компоненты Lit в вашей разметке и автоматически инициализируют их — независимо от того, создан ли ваш сайт вручную, управляется ли он через CMS, построен ли на серверном фреймворке или сгенерирован таким инструментом, как Jekyll или eleventy.

Разумеется, из компонентов Lit можно создавать и высокоинтерактивные, функционально насыщенные приложения — так же, как с помощью фреймворков вроде React или Vue. Возможности Lit и удобство разработки сопоставимы с этими популярными альтернативами, но Lit сводит к минимуму зависимость от конкретной технологии, обеспечивает максимальную гибкость и способствует удобству сопровождения, используя встроенную в браузер модель компонентов.

Создавая приложение с Lit, вы можете без труда добавить в него обычные веб-компоненты или веб-компоненты, созданные с помощью других библиотек. Можно даже перейти на новую основную версию Lit или мигрировать на другую библиотеку постепенно, по одному компоненту за раз, не прерывая разработку продукта.

Если вы занимались современной компонентной веб-разработкой, Lit покажется вам привычным. Даже если раньше вы не разрабатывали компоненты, мы уверены, что освоить Lit будет несложно.

Каждый компонент Lit — это автономный элемент пользовательского интерфейса, собранный из небольших строительных блоков: стандартных элементов HTML и других веб-компонентов. В свою очередь, каждый компонент Lit сам является строительным блоком, который можно использовать в HTML-документе, другом веб-компоненте или компоненте фреймворка для создания более крупных и сложных интерфейсов.

Вот небольшой, но достаточно содержательный компонент (таймер обратного отсчёта), который показывает, как выглядит код Lit, и демонстрирует несколько ключевых возможностей:

На что стоит обратить внимание:

• Главная особенность Lit — базовый класс LitElement, удобное и универсальное расширение встроенного в браузер HTMLElement. Наследуйтесь от него, чтобы создавать собственные компоненты.
• Выразительные декларативные шаблоны Lit (использующие шаблонные строки JavaScript с тегами) позволяют легко описать, как должен отображаться компонент.
• Реактивные свойства представляют публичный API компонента и/или его внутреннее состояние; компонент автоматически перерисовывается при изменении любого реактивного свойства.
• Стили по умолчанию изолированы: это упрощает CSS-селекторы и гарантирует, что стили компонента не повлияют на окружающий контекст и не будут затронуты им.
• Lit отлично работает с обычным JavaScript, а для ещё большего удобства можно использовать TypeScript, декораторы и объявления типов.

Для разработки с Lit не требуется компиляция или сборка, поэтому при желании его можно использовать практически без инструментов. Для Lit доступны полноценная поддержка в IDE (автодополнение кода, линтинг и т. д.) и инструменты для production-сборки (локализация, минификация шаблонов и т. д.).

Как мы уже отмечали, Lit отлично подходит для создания самых разных веб-интерфейсов: он сочетает преимущества веб-компонентов, обеспечивающих совместимость, с современным и удобным процессом разработки.

Кроме того, Lit — это:

• Простота. Опираясь на стандарты веб-компонентов, Lit добавляет только то, что помогает работать с удовольствием и продуктивно: реактивность, декларативные шаблоны и несколько продуманных возможностей, сокращающих шаблонный код и упрощающих вашу работу.
• Скорость. Обновления выполняются быстро, поскольку Lit отслеживает динамические части пользовательского интерфейса и обновляет только их при изменении состояния — не нужно заново строить всё виртуальное дерево и сравнивать его с текущим состоянием DOM.
• Легковесность. При размере около 5 КБ (после минификации и сжатия) Lit помогает уменьшить размер сборок и сократить время загрузки.

Команда Lit участвует в развитии веб-компонентов с самого начала. Мы помогаем Google поддерживать десятки тысяч компонентов, предлагаем полный набор полифиллов для веб-компонентов и активно участвуем в работе над стандартами и жизни сообщества.

Каждая возможность Lit тщательно продумана с учётом развития веб-платформы. Мы стремимся помочь вам в полной мере использовать всё, что платформа предлагает сегодня, и писать код, готовый к будущим улучшениям.

• Начало работы: подготовьтесь к разработке с Lit.
• Компоненты: узнайте о модели компонентов Lit.
• Шаблоны: создавайте шаблоны с помощью синтаксиса lit-html.
• Организация кода: пишите повторно используемый и удобный в сопровождении код.

Изменить эту страницу