Перейти к содержанию

Что такое Lit?

Lit Logo

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

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

Что я могу создать с помощью Lit?

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

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

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

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

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

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

Каково это — разрабатывать на Lit?

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

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

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

Некоторые моменты, на которые стоит обратить внимание:

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

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

Почему я должен выбрать Lit?

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

Lit также:

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

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

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

Следующие шаги

Комментарии