Что такое 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 не требуется компиляция или сборка, поэтому при желании библиотеку можно использовать практически без инструментов. Вам доступны полноценная поддержка IDE (автодополнение кода, линтинг и другие возможности) и инструменты для продакшена (локализация, минификация шаблонов и другие возможности).

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

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

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

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

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

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

Редактировать эту страницу