Руководство по Svelte.js

Вы когда-нибудь использовали библиотеку или фреймворк и думали: «Вау, мне очень нравится этот фреймворк. Теперь я буду использовать его во всех своих проектах!». Если да, то вам стоит прочитать о Svelte.js.

За последний год Svelte наделал немало шума. Фактически, согласно опросу Stack Overflow, он является самым любимым и пятым по популярности фреймворком. Обычно я не в восторге от новых инструментов, но Svelte — другое дело. Он предлагает уникальную точку зрения и имеет особенности, которые выделяют его среди других.

Например, Svelte автоматически объединяет ваш код для достижения более быстрого времени загрузки, что делает его идеальным для проектов, ориентированных на SEO, и мобильных устройств.

В этом руководстве мы рассмотрим:

• Что такое Svelte
• Разница между Svelte и другими фреймворками
• Когда следует использовать Svelte
• Как создать приложение для составления списка дел с помощью Svelte

Что такое Svelte?

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

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

Примечание: Хотя Svelte является своего рода фреймворком, это не совсем фреймворк. Он обладает функциональными возможностями фреймворка, но поскольку код Svelte компилируется в ванильный JS, его часто рассматривают как компилятор фронтенда или фреймворк. В этой статье и в большинстве статей вы найдете оба термина почти взаимозаменяемыми.

Есть три основные причины, по которым Svelte отличается молниеносной скоростью и удобством для разработчиков:

• Отсутствие виртуального DOM: Svelte достигает большей части той же функциональности, что и React и Vue, без виртуального DOM. Это означает, что вы можете использовать его, не полагаясь на виртуальные элементы, и получить взамен еще больше преимуществ в производительности. Другими словами, Svelte работает непосредственно над кодом без DOM, и переносит большую часть обработки кода на этап компиляции.

• Меньше кода: В Svelte вы достигаете тех же результатов, что и в React, но с меньшим количеством строк кода. Например, этот эксперимент показывает, что для создания одного и того же компонента требуется 442 символа в React, 263 в Vue и 145 в Svelte.

• Реактивность: Svelte, как и React, самостоятельно реагирует на изменения данных. Он не требует от браузера дополнительной работы по преобразованию компонентов в операции DOM, отображая изменения данных в виде кода JavaScript.

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

Теперь, когда мы знаем больше о Svelte, давайте погрузимся глубже и сравним его с другими JavaScript-фреймворками.

Svelte в сравнении с React и Vue.js

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

Проще говоря, Svelte позволяет вам быть более эффективным. Позволяя вам использовать знакомые вам языки и нотации (HTML, CSS и JavaScript), даже новички могут быстро приступить к работе. С другой стороны, React и Vue требуют навыков работы с TypeScript и JSX.

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

В отличие от Vue и React, Svelte практически не требует шаблонов кода, поскольку написан с использованием базовых HTML, CSS и JavaScript. В результате скрипты Svelte выглядят как ванильный JS, поскольку в них используются стандартные теги HTML.

Преимущества использования Svelte.js

Теперь, когда мы более подробно рассмотрели Svelte в сравнении с его альтернативами, давайте поговорим о причинах, которые делают его самым любимым фреймворком:

• Лучший опыт разработчика: Svelte — самый любимый фреймворк, потому что его легко настроить, и он ориентирован на создание среды, в которой разработчики могут писать меньше кода и делать больше.

• Встроенный линтинг доступности: Линтинг доступности Svelte — это большая помощь в создании приложений без ошибок. Svelte автоматически проверяет скомпилированный код перед запуском и сообщает о любых нарушениях, таких как отсутствие alt-текста или слишком малое количество пунктов коэффициента контрастности.

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

• Встроенные анимации: Работа с анимацией в Svelte — это фантастический опыт. Она поставляется встроенной с мощными и восхитительными взаимодействиями без необходимости использования дополнительных пакетов.

Когда следует использовать Svelte.js?

Откровенно говоря, все сводится к тому, что вы собираетесь на нем создавать. То, что он обеспечивает высокую производительность, не делает его волшебным молотком, который решит все ваши проблемы. В целом, я бы рекомендовал использовать Svelte при:

• Создании быстрых, отзывчивых веб-сайтов: небольшой размер пакета Svelte гарантирует, что все, что вы создадите, будет работать быстро. Это делает его идеальным решением для клиентов, которым нужны быстрые, SEO-ориентированные веб-сайты и превосходный веб-опыт.

• Создание веб-приложений для устройств с плохим соединением: Поскольку Svelte использует меньше кода, это означает меньше Кбс для загрузки и выполнения, что делает его идеальным для создания приложений, предназначенных для устройств с ограниченным доступом к Интернету и ограниченной мощностью процесса.

• Создание интерактивных страниц: Анимация и переходы встроены в Svelte. Разработчики могут создавать интерактивный контент с помощью модуля svelte/animate, что является отличным способом привлечь посетителей к вашему контенту, который не повредит скорости загрузки и SEO.

Сложно ли освоить Svelte.js?

Svelte — идеальная платформа для новичков, которые только начинают кодировать. Обладая лишь навыками HTML/CSS и JavaScript, вы сможете начать создание своего первого сайта с нуля без дополнительных знаний.

Это делает кривую обучения очень легкой, в отличие от большинства альтернатив. Кроме того, Svelte предлагает солидные учебные ресурсы, которые гарантируют, что вы освоите специфику всего за несколько дней, а не недель или месяцев, как в случае с React, Vue или Angular.

Начало работы с Svelte.js

К этому моменту я уверен, что вы уже хотите испачкать руки и начать возиться со Svelte.

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

Полное разоблачение: я не самый организованный человек, и я создаю этот список дел в надежде, что он поможет мне стать таким.

Присоединяйтесь ко мне в этом духовном путешествии, и давайте вместе создадим это приложение.

Необходимые условия

Вот что вам нужно, чтобы начать работу с Storybook:

• Базовое понимание HTML, CSS и JavaScript
• Редактор кода, например Visual Studio Code
• Node.js, установленный на вашей машине
• npm установлен на вашей машине
• Git и degit

Если вы не знакомы с Node.js и npm, вот руководство по установке Node.js и npm.

Для начала работы с этим учебником нам нужно установить две вещи: git и degit. Git позволяет нам искать пакеты непосредственно в GitHub без реестра, а degit позволяет нам делать копии git-репозиториев и использовать их в наших собственных проектах.

Поскольку мы будем использовать шаблон Svelte для нашего списка дел, перед началом работы нам понадобится и то, и другое.

Чтобы установить Git, выполните команду :

npm install -g git-install

Обратите внимание: если вы используете Windows, вам, возможно, придется скачать и установить Git для Windows, а не использовать CLI.

Чтобы установить degit, выполните следующую команду в CLI:

npm install -g degit

1. Создание приложения Svelte.js

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

npx degit sveltejs/template svelte-app Я назвал его svelte-app, но вы можете назвать его как угодно.

После клонирования проекта у вас должен появиться новый каталог ‘svelte-app’. Эта директория содержит файлы шаблонов, которые понадобятся нам для создания списка дел.

Перейдите к вашей папке в терминале с помощью команды cd your-folder-path/ и установите все зависимости проекта, выполнив команду :

npm install

После установки зависимостей давайте запустим наше приложение-шаблон следующей командой:

npm run dev

Эта команда запускает нашу среду разработки Svelte и подготавливает наше приложение. Вы можете посмотреть, как выглядит шаблон, перейдя по ссылке http://localhost:8080. Если мы все сделали правильно, у нас должна получиться страница, которая выглядит следующим образом:

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

2. Создание контейнера Svelte

Чтобы создать контейнер, в котором будет находиться наше приложение, нам нужно перейти в src/App.svelte. Именно здесь происходит волшебство. Контейнер обычно состоит из следующих частей:

<script>: Блок, содержащий исполняемый код JavaScript.

<html tag>: Блок, содержащий основную функциональность приложения.

<style>: Блок, содержащий стили CSS.

Как только мы окажемся в файле, замените существующий код на следующий:

<script>
</script>
<main>
</main>
<style>
</style>

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

Теперь, когда у нас есть пустой контейнер, давайте создадим форму.

3. Создание формы для отправки дел

Чтобы создать форму, в которой мы будем отправлять наши дела, нам нужно добавить следующие строки кода внутри тега:

<!-- Form -->
<form on:submit|preventDefault={add}>
    <input bind:value={newItem} placeholder="Enter to-do" />
    <button class="add-todo" on:click={add}><span>+</span></button>
    </form>

Этот контейнер выполняет событие JavaScript при отправке формы.

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

let newItem = "";
let todoList = [];
function add() {
  if (newItem !== "") {
    todoList = [
      ...todoList,
      {
        task: newItem,
        completed: false,
      },
    ];
    newItem = "";
  }
}

Эта функция JavaScript вызывается каждый раз, когда пользователь взаимодействует с кнопкой отправки нашей формы, что вызывает событие on:submit, которое мы создали ранее. Затем она отображает содержимое под кнопкой отправки.

4. Стилизация формы

Теперь, когда мы создали форму для отправки наших дел, давайте добавим ей немного стиля. Для этого. Добавим следующее внутри тега <style>:

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    padding: 5vmin;
    box-sizing: border-box;
    background: antiquewhite;
    }

5. Стилизация кнопки формы

Теперь, когда у нас есть рабочая форма, пришло время добавить к ней некоторые стили. Итак, добавим следующий код в тег <style>:

form {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }

  input {
    flex-grow: 1;
    width: 0;
    border: none;
    border-bottom: 1px solid black;
    background: transparent;
    box-shadow: none;
    font-size: 1.2rem;
    margin: 0;
    outline: none;
  }

6. Рендеринг и стилизация списка дел

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

Для этого мы воспользуемся функцией #each от Svelte, которая позволяет нам перебирать списки данных и заставлять их появляться в нашем списке.

Добавим следующую строку кода в App.svelte в раздел под тегом формы:

<!-- To-dos -->
<div class="todos">
    {#each todoList as item, index}
        <span class="todo__text">{item.task}</span>
        <div class="todo__buttons"></div>
    {/each}
</div>

После этого мы добавим немного стиля нашему списку дел. Для этого перейдем в тег <style> и добавим новый CSS-стиль:

.todos {
    width: 100%;
    max-width: 500px;
}

.todo {
    display: flex;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
    background-color: hsla(0, 0%, 100%, 0.2);
    margin-top: 1rem;
    font-size: 1.2rem;
    justify-content: space-between;
    align-items: center;
}

.todo__buttons {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.todo button {
    width: 32px;
    height: 32px;
    padding: 4px;
    margin: 0;
    flex-shrink: 0;
}

7. Добавление заголовка к списку

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

Во-первых, давайте добавим заголовок H1 к нашему списку. Разместите его прямо под

<!-- Header -->
<h1>My to-do list</h1>
To style the header, let’s add the following code to our <style> tag:

h1 {
    text-align: center;
    font-size: 1.5rem;
    margin: 2em 0;
}

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

8. Добавление функций завершения и удаления с помощью иконок

Давайте сделаем его более функциональным, добавив кнопки удаления и завершения.

Чтобы добавить кнопки, сначала создадим компонент, содержащий иконки, которые мы будем использовать в качестве кнопок. Создадим файл Icon.svelte в каталоге /src и добавим следующий код:

<script>
  export let name;
  const icons = [
    {
      name: "check-mark",
      path: '<path d="M19.77 4.93l1.4 1.4L8.43 19.07l-5.6-5.6 1.4-1.4 4.2 4.2L19.77 4.93m0-2.83L8.43 13.44l-4.2-4.2L0 13.47l8.43 8.43L24 6.33 19.77 2.1z" fill="currentColor"></path>',
    },
    {
      name: "delete",
      path: '<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z" fill="currentColor"></path>',
    },
  ];
  let icon = icons.find((item) => item.name === name);
</script>

<svg viewBox="0 0 24 24" class={$$props.class}>
  {@html icon.path}
</svg>
This component can receive an icon name and displays the associated SVG so they can be used by other components with the import statement.

Feel free to change the icons if you want something different.

Now, let’s do take advantage of the #each function we created earlier to show the icons in our app. Under the <span class="todo__text">{item.task}</span> tag in the todos class inside the App.svelte file replace the content with the following code just before the closing </div>:

<div class="todo__buttons">
          <button class="complete" on:click={() => complete(index)}>
            <Icon name="check-mark" />
          </button>
          <button class="delete" on:click={() => remove(index)}>
            <Icon name="delete" />
          </button>
        </div>
      </div>
    {/each}

После этого импортируем компонент Icon из компонента /Icon.svelte, добавив следующую строку кода под <script> в файле App.svelte:

import Icon from "./Icon.svelte";

Теперь, чтобы создать функцию delete, давайте добавим ее ниже нашей функции add:

function remove(index) {
    todoList.splice(index, 1);
    todoList = todoList;
  }
Finally, let’s add some styling to make our buttons look great. To do it, go to the <style> tag in the same file and add the following code:

button.delete,
button.delete:hover {
  color: brown;
  transition: color 100ms ease-out;
}
button.complete,
button.complete:hover {
  color: cadetblue;
  transition: color 100ms ease-out;
}

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

Приложение Svelte to-do с иконками на кнопках

Хотя мы могли бы оставить наш список дел в таком виде, давайте сделаем еще одну вещь, чтобы наш список дел выглядел еще лучше.

9. Подчеркивание завершенных дел

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

Для этого добавим новую функцию в элемент <script>:

function complete(index) {
  todoList[index].completed = !todoList[index].completed;
}
This function adds a style element to the items in your to-do list, striking them if the item is completed.

Now we need to add some styles to our new element by going to <style> and adding the following code:

.todo.completed {
  color: slategray;
}

.todo.completed .todo__text {
  text-decoration: line-through;
}

.todo.completed button {
  color: silver;
}

Если вы следовали шагам, у вас должно получиться что-то вроде этого.

Приложение Svelte to-do с зачеркнутым заданием, когда оно выполнено

Вот и все. Мы успешно создали список дел в Svelte.

Дай пять!

Живая демонстрация и репозиторий GitHub

Попробуйте живую демонстрацию здесь
Смотрите репозиторий GitHub здесь

Заключение

После использования Svelte я понял, почему разработчики любят его. Это перспективный компилятор (или фреймворк), который, хотя и не идеально подходит для каждого проекта, может помочь вам создать что-то быстрое и интерактивное.

Он менее запутанный, чем другие инструменты, и позволяет начать работу за считанные минуты. Кроме того, в Интернете вы найдете множество ресурсов, которые помогут вам, если вы столкнетесь с трудностями, а сообщество дружелюбно относится к новичкам.

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

Вы уже использовали Svelte? Расскажите мне, что вы думаете о нем в комментариях.