React — это здорово… но вам стоит попробовать Lit.

Кому-нибудь еще нужен небольшой перерыв в работе с React? Может быть, всего на несколько минут?

Я использую React уже несколько лет, и я скучаю по тем дням, когда он казался новым и захватывающим. В моем мозгу React превратился из спортивного автомобиля в минивэн. Он по-прежнему очень хорош в своем деле, но мне он немного надоел. Я больше не испытываю особого восторга от его использования. Можно сказать, мы потеряли искру.

Поэтому я решил попробовать что-то новое и на некоторое время завести Лит.

Вы меня слышали.

Так что же такое Lit? Согласно разделу «о» на их странице на github: Lit — это простая библиотека для создания быстрых, легких веб-компонентов.

Их девиз таков:

Если вы не знаете, что такое веб-компонент, сделайте шаг назад и почитайте о веб-компонентах на MDN».

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

Ваш следующий вопрос может быть таким:

  • Это совсем не то, что делает React… так действительно ли Lit можно сравнить?

  • Могу ли я использовать Lit для создания веб-приложений, веб-сайтов и пользовательских интерфейсов так же, как и React? Для этого ли вообще предназначен Lit?

Да, Lit во многом сравним с React. Да, вы можете использовать его для создания веб-сайтов, веб-приложений и пользовательских интерфейсов. И да, он предназначен для этих целей.

Он даже делает некоторые вещи, которые React не может делать (задыхаясь).

Давайте начнем рассматривать различия между компонентом React и компонентом Lit. Я сделал маленький глупый компонент, который принимает строку из пользовательского ввода и выдает ее в обратном порядке. Импорт не включен. И просто предположим, что reverseString делает то, о чем говорит, в обоих случаях.

Компонент React:

export default function TextReverser() {
  const [revText, setRevText] = useState("");
  const inputElem = useRef();

  const handleClick = () => {
    setRevText(reverseString(inputElem.current.value));
  };

  return (
    <div>
      <input ref={inputElem} type="text"></input>
      <button onClick={handleClick}>Reverse Me!</button>
      {revText && <h2>{revText}</h2>}
    </div>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Вот то же самое, что и в Lit-компоненте:

@customElement('text-reverser')
export class TextReverser extends LitElement {
  @state()
  private revText: string = '';

  @query('#input')
  inputElem!: HTMLInputElement;

  handleClick() {
   this.revText = reverseString(this.inputElem.value)
  }

  render() {
    return html`
     <div>
      <input id="input" type="text"></input>
      <button @click=${this.handleClick}>Reverse Me!</button>
      ${this.revText && html`<h2>${this.revText}</h2>`}
     </div>
    `;
  }
}
Войти в полноэкранный режим Выход из полноэкранного режима

Вот это да! Вот это да! Так много нового, о чем можно поговорить и на что посмотреть.

Во-первых, Lit использует TypeScript. Это не обязательно, но поощряется, и это здорово. Он экономит время на некоторых синтаксических элементах, позволяя использовать декораторы. Он также обеспечивает сильную типизацию. Он также дает возможность завершать код.

Почему бы вам не захотеть этого?

Во-вторых, компоненты Lit основаны на классах. Меньше вау, если синтаксис классов вам не по душе. Но если бы мне пришлось гадать, я бы подумал, что Lit со временем получит поддержку компонентов Lit, основанных на функциях. Я имею в виду, что нужно идти в ногу со временем.

Чтобы сравнить, что происходит…

В React:

  • Я использовал useState для управления состоянием для значения revText.
  • Я использовал useRef для получения ссылки на DOM-узел элемента ввода.
  • Я написал функцию handleClick, которая вызывается при нажатии на кнопку. Она инвертирует строку и устанавливает новое значение для revText с помощью setRevText, что вызывает повторный рендеринг компонента.
  • Я рендерил html, возвращая JSX. Если revText имеет значение, он отображает его в h2.

В Lit:

  • Я использовал декоратор @state для инициализации некоторого внутреннего состояния компонента: revText. Я обращаюсь к нему в других местах компонента, используя this.revText.
  • Я использовал декоратор @query, чтобы получить ссылку на DOM-узел элемента ввода.
  • Я написал метод handleClick, который вызывается при нажатии на кнопку. Он изменяет строку и переназначает this.revText на новое значение. Поскольку this.revText был инициализирован с помощью декоратора @state, при переназначении его значения компонент перерендерится.
  • Я рендерил html в методе render компонента, возвращая тегированный литерал шаблона, используя функцию тега Lit’s html. Если this.revText имеет значение, он отображает его в h2.

Итак, что мы только что узнали?

Они оба инкапсулируют состояние и поведение.

Lit и компоненты React в целом реализуют одну и ту же концепцию: инкапсуляция состояния и поведения в маленькие интерактивные кусочки пользовательского интерфейса.

Мммм…. маленькие кусочки.

Они оба компонуемые

Lit и React основаны на компонентах. Для каждой библиотеки вы можете создавать более сложные пользовательские интерфейсы, компонуя ваши компоненты вместе. Я не показал, как это делается в примерах кода выше, так что если вы хотите углубиться в эту тему, вот несколько статей:

  • Компоновка компонентов Lit
  • Компоновка компонентов React

Они оба реактивны.

Есть жизненный цикл Lit-компонента (виртуальный DOM не требуется) и есть жизненный цикл React-компонента. Когда состояние компонента меняется, пользовательский интерфейс отражает это изменение.

ОБРАТИТЕ ВНИМАНИЕ: они оба могут использовать redux. Ознакомьтесь с этой статьей, чтобы узнать, как настроить его для Lit.

После небольшого распаковывания Lit начинает казаться похожим на React.

Чем же отличается Lit?

Lit ближе к браузеру

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

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

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

Lit совместим (может быть использован в других вещах).

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

Это особенно интересно, например, для реализации системы дизайна. На одном из моих предыдущих мест работы я помогал работать над конкретной реализацией системы дизайна нашей компании — той, которая использовалась в нашей CMS. Люди из других команд, которые использовали React, должны были создать свою собственную реализацию системы дизайна на основе React. И так далее, и так далее для всех других фреймворков, которые мы использовали, а их было немало. Вы можете себе представить, сколько времени разработчики тратили на перестройку одних и тех же компонентов для разных фреймворков.

Что если бы вы могли просто реализовать систему проектирования один раз? И повторно использовать ее везде? Это то, что может предложить Lit. Если вам нужно использовать один из компонентов вашей системы проектирования в React, сначала создайте его с помощью Lit. А затем вставьте этот компонент Lit в React и приступайте к работе.

Для дальнейшего чтения:

  • Ознакомьтесь с этой статьей о том, как интегрировать компонент Lit в компонент React.
  • У Lit также есть отдельный пакет @lit-labs/react, который предоставляет утилиту для создания обертки React-компонента для компонента Lit.

Размышления на прощание

Главное, что я хочу, чтобы вы вынесли из этой статьи: Lit — это круто, и вам стоит попробовать! Пожалуйста, послушайте меня, когда я говорю это: React также отлично справляется со своими задачами, и эта статья не должна рассматриваться как рекомендация никогда больше не использовать React.

Иногда просто полезно разветвляться, вот и все.

Как разработчик, обучение должно быть постоянным приоритетом. Так что если вы чувствуете то же самое, что и я по отношению к React, и хотите снова почувствовать эту искру, я рекомендую изучить Lit! У них, кстати, невероятная документация и интерактивные учебники.

Спасибо за чтение! Если вы хотите прочитать другие мои статьи, вы можете найти их на quickwinswithcode.com.

Роберт Тейт

Разработчик программного обеспечения, живущий в Нэшвилле, штат Теннесси. Мне нравится писать статьи о JavaScript, и я стараюсь сделать их в некоторой степени дружественными для начинающих.

Оцените статью
devanswers.ru
Добавить комментарий