LIT

hannadev

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

Что такое Lit простыми словами

Lit - это небольшая JS‑библиотека (~5–6 КБ gzipped), которая помогает писать быстрые веб‑компоненты с реактивным состоянием и декларативными шаблонами.

Каждый компонент на Lit полноценный веб-компонент, который можно использовать где угодно: в ванильном HTML, в React, Vue, Angular и т.д.

Кстати на GitHub используется Lit, а еще к примеру на сайте blizzard, проверить можете через Wappalyzer:

Основная идея: берем стандарты (Custom Elements, Shadow DOM, ES‑модули) и добавляем тонкий слой синтаксического сахара - реактивные свойства, шаблоны через html и удобные lifecycle‑хуки.

Ключевые фичи, которые продают Lit:

Нативные веб-компоненты. Компонент это обычный custom element с Shadow DOM, который живёт без сборки и фреймворка, если нужно.
Реактивные свойства: изменил поле класса → Lit сам перерисовал шаблон, без ручного document.querySelector.
Шаблоны через tagged template literals (html\``) вместо JSX, без виртуального DOM.
Инкапсулированные стили через static styles = css и Shadow DOM, плюс поддержка constructable stylesheets.
Минимальный размер бандла и хорошая производительность по памяти и скорости рендера.

Минимальный пример компонента на Lit

А теперь посмотри как lit выглядит в коде:

import { LitElement, html, css } from 'lit';

class MyCounter extends LitElement {
  static properties = {
    count: { type: Number },
  };

  static styles = css`
    .counter {
      display: inline-flex;
      align-items: center;
    }
    button {
      cursor: pointer;
      background: #4f46e5;
      color: #e5e7eb;
    }
  `;

  constructor() {
    super();
    this.count = 0;
  }

  #inc() {
    this.count++;
  }

  #dec() {
    this.count--;
  }

  render() {
    return html`
      <div class="counter">
        <button @click=${this.#dec}>−</button>
        <span>${this.count}</span>
        <button @click=${this.#inc}>+</button>
      </div>
    `;
  }
}

customElements.define('my-counter', MyCounter);

Похож чем-то на реакт)) Подключаем этот скрипт - и дальше в любом HTML пишем:

<my-counter></my-counter>

Весь прикол заключается в том что мы создаем кастомный элемент:

customElements.define('my-counter', MyCounter);

Никакого ReactDOM.render, createApp и прочих церемоний, компонент это обычный HTML‑тег.

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

С порогом входа там все довольно гуманно: если комфортно чувствуешь себя в современном JS и понимаешь, как работают веб-компоненты, Lit воспринимается как логичное, аккуратное расширение платформы, а не как очередной «мир в мире».

А также по мимо Lit с это задачей прекрасно справится Svelte, так что если требуется внедрить какие ни будь кастомные виджеты то смело можно брать что-то из этих двух.

Simple. Fast. Web Components.

lit.dev (lit.dev)

kirilljsx

@hannadev А ты чо шарить начала что-ли?
Ща призову @aladdin он тебе за Светли пояснит раз на раз

hannadev

@kirilljsx Не душни старче, а lit рил прикольненький так что хватит свой ракт с некстом мучить

Dinozaur

Aladdin

@kirilljsx вот сравнение svelte и lit
я работал больше с svelte и внедрял в проект next.js как веб компонент и че хочу сказать

интеграция не очень удобная если честно, но работает неплохо. Это решение более легкое, чем если бы я вставлял один фреймворк в другой из большой тройки фреймворком.
Сам svelte показался довольно удобным, новый синтаксис на рунах норм, тайпскрит тоже завезли, что есть хорошо, и мне нравится больше чем в lit.
Веб компоненты делать можно, но подрастает размер, бандла примерно на 10 кб.

kirilljsx

@Aladdin Спасибо ща чекну