Создайте список для чтения с помощью Svelte

Svelte получил много похвал за последние два года и далек от того, чтобы быть «просто еще одним интерфейсным фреймворком». Он стал «прорывом года» в опросе State of JS 2019, а затем возглавил рейтинг удовлетворенности в 2020 году. Он также был признан самым любимым веб-фреймворком в опросе Stack Overflow 2021.

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

Предыстория

Но сначала немного предыстории Svelte. Хотя он стал популярным только в начале 2020-х годов, Svelte существует гораздо дольше.

Первый коммит на GitHub был сделан в конце 2016 года. Его создателем является Рич Харрис, волшебник с открытым исходным кодом, самым выдающимся другим изобретением которого является Rollup, современный сборщик. Рич Харрис в то время работал графическим редактором в новостном журнале The Guardian. Его ежедневной рутиной было создание интерактивных визуализаций для веб-сайта, и он хотел иметь инструмент, который позволял бы ему легко создавать их без ущерба для размера пакета или скорости. В то же время он хотел что-то доступное, чтобы другие менее технически подкованные коллеги могли быстро создавать визуализации.

Из этих потребностей родился Svelte. Начав с отдела новостей, Svelte быстро набрал небольшую аудиторию в сообществе разработчиков открытого исходного кода. Но только в апреле 2019 года Svelte действительно стал известен миру. Эта дата ознаменовала выпуск версии 3, которая была полностью переписана с упором на опыт разработчиков и доступность. С тех пор популярность Svelte сильно возросла, к команде присоединилось больше сопровождающих, а Рич Харрис даже присоединился к Vercel, чтобы работать над Svelte на постоянной основе.

Создание простого списка книг

Давайте погрузимся в Svelte! Мы создадим небольшой список книг, который позволит нам добавлять и удалять книги из нашего списка для чтения. Окончательный результат будет выглядеть примерно так, как показано на изображении ниже.

Мы начнем с создания нашего проекта из шаблона проекта. Мы будем использовать официальный шаблон Svelte. В качестве альтернативы можно было бы использовать шаблон на базе Vite или использовать SvelteKit, фреймворк поверх Svelte для создания полноценных приложений со встроенной маршрутизацией, но в этом руководстве мы сохраним его как можно более простым.

После загрузки шаблона перейдите в его папку и запустите npm install, которая загрузит все пакеты, которые нам нужны для работы. Затем мы переключимся на App.svelte, где заменим содержимое HTML-версией, чтобы разместить нужные нам визуальные элементы:

<h4>Add Book</h4>
<input type="text" />
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul>

Мы можем написать приведенный выше код непосредственно на верхнем уровне файла Svelte; нам не нужно добавлять какие-либо элементы-оболочки. Синтаксис Svelte является расширенным набором HTML, поэтому все, что допустимо внутри файла HTML, допустимо и внутри файла Svelte.

Теперь вопрос в том, как вставить туда динамические части. Мы начнем с добавления статического списка в скрипт и отрисовки его через цикл:

<script>
  let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
</script>

<label>
  <h4>Add Book</h4>
  <input type="text" />
</label>
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li>{book}</li>
  {/each}
</ul>

Мы добавили scriptтег, в который мы поместили нашу логику JavaScript, связанную с компонентом. Эта логика выполняется каждый раз при монтировании компонента. Мы также улучшили HTML с помощью специального синтаксиса Svelte, чтобы создать цикл и вывести название каждой книги. Как видите, Svelte имеет отдельный синтаксис для блоков потока управления, в отличие от Vue или Angular, которые добавляют такую ​​функциональность в виде специальных атрибутов. Это делает код более читабельным, так как его легче обнаружить. Это также делает ненужным создание элементов-оболочек, если вы хотите содержать более одного элемента верхнего уровня в блоке потока управления.

Название книги выводится путем окружения переменной фигурными скобками. В общем, всякий раз, когда вы сталкиваетесь с фигурной скобкой в ​​​​шаблоне, вы знаете, что вводите что-то, связанное со Svelte. Мы рассмотрим синтаксис шаблона более подробно во второй части этой серии руководств.

Реакция на ввод данных пользователем

Теперь мы можем отображать произвольный список названий книг, определяемый нашей books переменной. Как насчет добавления новой книги? Для этого нам нужно усилить нашу логику в <script> теге и подключить его к <input> элементу:

<script>
  let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
  let newBook = '';

  function addBook(evt) {
    if (evt.key === 'Enter') {
      books = [...books, newBook];
      newBook = '';
    }
  }
</script>

<label>
  <h4>Add Book</h4>
  <input type="text" bind:value={newBook} on:keydown={addBook} />
</label>
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li>{book}</li>
  {/each}
</ul>

Мы добавили новую переменную с именем newBook, которая должна отражать входное значение. Для этого мы привязываем его к <input>, написав bind:value={newBook}. Это устанавливает двустороннюю привязку, поэтому каждый раз, когда пользователь вводит текст в <input>, newBookобновляется, и если newBookобновляется в <script>теге, отображаемое значение <input>изменяется. Мы могли бы сделать то же самое с простыми динамическими атрибутами, но таким образом мы сэкономим немного кода — шаблон мышления, который вы часто будете встречать в Svelte.

Когда пользователь нажимает enter, мы хотим добавить новое название книги в список. Для этого мы добавляем прослушиватель событий DOM. Чтобы указать Svelte подключиться к событию, мы просто добавляем двоеточие между onи остальной частью имени события — в данном случае это on:keydown. После этого используем фигурные скобки и помещаем внутрь имя функции. Функция вызывается каждый раз, когда событие срабатывает. Подробнее о синтаксисе этого шаблона можно узнать во второй части этой серии руководств.

В этом случае вызывается функция addBook, в которой мы проверяем событие клавиатуры, и если пользователь действительно нажал enter, мы обновляем booksпеременную. Обратите внимание на отсутствие thisконтекста, как в Angular или Vue 2, или на отсутствие объектов со специальными значениями, как в Vue 3, или на отсутствие setStateв React. В этом случае Svelte не нужен дополнительный синтаксис, чтобы знать, что переменная обновилась. Это может показаться волшебством, но в то же время и «простым простым JavaScript».

Чтобы понять, как Svelte достигает этого, нам нужно заглянуть под капот. Что на самом деле Svelte делает с .svelteфайлом и когда он его обрабатывает? Ответ: Svelte на самом деле является компилятором! Он выполняет большую часть работы еще до того, как ваш код загрузится в браузер. Svelte анализирует код и преобразует его в обычный JavaScript. Во время синтаксического анализа он может видеть, что newBookв шаблоне используются такие переменные, поэтому присвоение ему значения вызовет повторную визуализацию. Таким образом, выходные данные компиляции будут оборачивать эти назначения вызовами$$invalidateфункция, которая запланирует повторный рендеринг именно этого компонента для следующей отрисовки браузера. В этом секрет отличной производительности Svelte: он заранее знает, какие части могут вызвать повторную визуализацию, а затем должен работать только в этих точных местах, хирургически обновляя DOM. Это также причина того, почему размеры пакетов приложений Svelte настолько малы: все, что не нужно, просто не будет частью вывода, поэтому Svelte может исключить каждую часть своей крошечной среды выполнения, которая не нужна. Стройный привет, мир! приложение имеет размер пакета всего 2,5 КБ!

Единственное, на что следует обратить внимание, это то, что Svelte ищет только задания. Вот почему нам нужно сделать books = [...books, newBook];или books.push(newBook); books = books;. В противном случае Svelte не знал бы, что booksон обновился.

Последние штрихи

Мы сделали это! Теперь мы можем просматривать и добавлять книги в наш список! Однако это выглядит не очень красиво, поэтому давайте добавим несколько последних штрихов в наш пользовательский интерфейс. Во-первых, мы добавим немного CSS для стилизации наших элементов:

<!-- script and html code... -->

<style>
  input {
    padding: 5px 10px;
  }
  li {
    list-style: none;
  }
  ul {
    padding: 5px 0;
  }
</style>

Как видите, мы просто добавляем <style>тег в наш .svelteфайл и продолжаем писать в нем обычный CSS. Если вы опасаетесь, что приведенный выше код будет стилизовать все <input>или <li>теги <ul>во всем приложении, будьте уверены, что этого не произойдет. Svelte использует стили областей действия по умолчанию, поэтому они применяются только к тому компоненту, в котором они определены. Если вы хотите определить что-то глобально, оберните селектор :globalфункцией. Если, например, вы хотите стилизовать все <input>s в приложении, код будет иметь вид :global(input) { padding: 5px 10px; }.

Сейчас стиль лучше. Давайте закончим переходом для лучшего UX: мы хотим, чтобы новые элементы списка исчезали. Для этого нам просто нужно использовать один из встроенных переходов и анимаций Svelte и применить их:

<script>
  import { fade } from 'svelte/transition';
  // ..
</script>

<!-- input ... -->
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li transition:fade>{book}</li>
  {/each}
</ul>

<!-- styling ... -->

Вот и все! Просто импортировав один из встроенных переходов и применив его, добавив transition:fadeк элементу, мы получим этот плавный плавный переход. Наше мини-приложение готово. Он еще не содержит верхней панели и фонового градиента, но теперь вам должно быть легко добавить и это. Это конечный результат:

<script>
  import { fade } from 'svelte/transition';

  let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
  let newBook = '';

  function addBook(evt) {
    if (evt.key === 'Enter') {
      books = [...books, newBook];
      newBook = '';
    }
  }
</script>

<label>
  <h4>Add Book</h4>
  <input type="text" bind:value={newBook} on:keydown={addBook} />
</label>
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li transition:fade>{book}</li>
  {/each}
</ul>

<style>
  input {
    padding: 5px 10px;
  }
  li {
    list-style: none;
  }
  ul {
    padding: 5px 0;
  }
</style>

Архитектурные соображения

Мы увидели, как написать небольшое приложение на Svelte, используя всего 32 строки кода. Мы только поцарапали поверхность, конечно. Полноценному приложению требуется какое-то управление состоянием, несколько компонентов и способы интеграции этих компонентов друг с другом.

Например, было бы целесообразно выделить отображение одного элемента списка дел в отдельный компонент, так как мы добавим такие функции, как редактирование имени на месте или пометка его как выполненного. Наличие всего этого в одном компоненте со временем стало бы трудным поддерживать. К счастью, использовать другие компоненты так же просто, как импортировать их как импорт по умолчанию из другого файла Svelte и взаимодействовать с ними аналогично тому, что мы уже видели с обычными элементами DOM. Мы рассмотрим взаимодействие компонентов более подробно в части 5 этой серии.

Другим примером может быть управление задачами. Прямо сейчас они обрабатываются внутри компонента и нет связи с серверной частью. Если бы мы добавили вызовы API, мы бы смешали логику пользовательского интерфейса с взаимодействием с серверной частью, которое обычно лучше обрабатывается вне компонентов для лучшего разделения задач. Для этого мы можем использовать магазины Svelte, которые мы рассмотрим в части 4.

Как видите, у Svelte есть решения для всех наших требований, и мы рассмотрим их в ходе этой серии статей.

Ready, Set … Svelte?

Итак, безопасно ли использовать Svelte для вашего следующего проекта? Ваш менеджер может спросить, будет ли Svelte существовать в ближайшие годы или выгорит, как предыдущие звезды фреймворка. Нет ни одной крупной компании, поддерживающей всю разработку Svelte, как это делается для Angular и React, но Vue уже показал, что это не проблема. Более того, как было сказано в начале, Рич Харрис, создатель Svelte, теперь работает над ним на постоянной основе. Учитывая непрерывный рост популярности Svelte, нет никаких признаков того, что в ближайшие годы он никуда не денется.

Еще одним аспектом выбора фреймворка является экосистема и ее инструменты. Экосистема все еще мала по сравнению с React, но новые библиотеки появляются каждый день, и уже есть несколько очень хороших библиотек компонентов. В то же время, поскольку Svelte настолько близок к ванильному HTML и JavaScript, очень легко интегрировать любую существующую обычную библиотеку HTML/JavaScript в вашу кодовую базу без необходимости использования библиотек-оболочек.

Что касается инструментов, Svelte выглядит неплохо. Существует официальное расширение VS Code, которое активно поддерживается, а также базовый языковой сервер, который может использоваться многими другими IDE для интеграции Intellisense. IntelliJ также имеет плагин для Svelte и недавно нанял его создателя для работы в JetBrains. Также существуют различные инструменты для интеграции Svelte с различными упаковщиками. И да, вы также можете использовать TypeScript со Svelte.

Если вы хотите создать полноценный веб-сайт или веб-приложение, вам также может быть интересно проверить SvelteKit (см. наше Руководство для начинающих по SvelteKit ). Он обеспечивает превосходный опыт разработки и поставляется с гибким маршрутизатором на основе файловой системы. Он также позволяет выполнять развертывание на многих различных платформах, таких как Vercel, Netlify, на вашем собственном сервере Node или просто на старом добром статическом файловом сервере, в зависимости от функций и потребностей вашего приложения.

Краткие факты о Svelte

Вкратце, вот важные моменты, которые следует помнить о Svelte:

• у него есть штатный сопровождающий
• у него хорошая оснастка
• его характеристики стабильны
• его экосистема растет
• SvelteKit доступен для быстрого создания приложений