Создание в Svelte приложения списка дел

Создание в Svelte приложения списка дел

От автора: ходят слухи, что новая среда JS создается каждые 6 минут. Неудивительно, что лишь немногие из них вышли на первые места, и самым последним в этой группе стал Svelte. Итак, в этом руководстве я хотел бы рассказать вам о ваших первых шагах в мире Svelte, создав простое приложение списка дел. Надеюсь, вам понравится!

Настройка

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

npx degit sveltejs/template svelte-todo
cd svelte-todo
npm install

В противном случае, если у вас есть время, вы можете сконфигурировать практически любой из самых популярных JS-пакетов (Rollup, Webpack, Parcel) с дополнительным плагином / загрузчиком Svelte. Вы можете проверить список почти всех интеграций Svelte в этом репо.

Код

В любом случае, независимо от того, какой метод установки вы использовали, вся наша работа будет происходить в одном файле App.svelte. Давайте сначала выполним некоторые приготовления:

<script></script> <svelte:head> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" /> <script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</svelte:head> <main class="container is-fluid"> <div class="columns is-centered is-vcentered is-mobile"> <div class="column is-narrow" style="width: 70%"> <h1 class="has-text-centered title">Svelte TODO</h1> <form></form> <ul></ul> </div> </div>
</main>

Наш код состоит из 3 основных разделов:

<script> — блок, содержащий весь необходимый код JavaScript.

<svelte:head> — специальный блок, предоставленный Svelte, который позволяет нам вставлять элементы в тег head, не покидая зону комфорта компонента Svelte.

<main> — блок, который является частью шаблона нашего приложения.

Теперь я использую элемент <svelte:head> для импорта CSS-фреймворка Bulma и библиотеки Font Awesome из внешних CDN. Первый будет использоваться для того, чтобы сделать наше приложение более стильным, а второй дает нам доступ ко всем бесплатным иконкам Font Awesome. Вы также можете импортировать эти ресурсы, используя NPM или другие методы (которые перечислены на веб-сайтах соответствующих проектов), но CDN, безусловно, является самым простым и, следовательно, лучшим для нашего использования.

Есть одно замечание по поводу использования CSS-фреймворка. Поскольку Svelte является довольно молодой платформой и не имеет своей собственной «установленной» библиотеки компонентов, как Vue или React, CSS-фреймворки — это самый простой способ сделать приложение Svelte хорошо выглядящим без необходимости писать весь код самостоятельно. Вот почему мы используем здесь Bulma, и поэтому я рекомендую вам также использовать этот или другие CSS-фреймворки в ваших собственных приложениях Svelte.

JavaScript

Теперь мы можем начать писать собственно код JS. Удивительно, но его не так много!

let todos = [];
let input = ""; function addTodo() { if (input) { todos = [ ...todos, { text: input, id: Math.random() .toString(36) .substr(2, 9) } ]; } input = "";
} function removeTodo(id) { const index = todos.findIndex(todo => todo.id === id); todos.splice(index, 1); todos = todos;
}

Поскольку Svelte является компилятором, его система реактивности может основываться на простых локальных переменных. В нашем случае их всего 2:

todos, которая хранит все объекты TODO.

input, которая хранит пользовательский ввод.

В дополнение к этим двум переменным, у нас есть 2 простых функций — addTodo() и removeTodo(), которые делают именно то, что следует из их названия.

Здесь стоит отметить одну важную деталь — странное назначение todos = todos в функции removeTodo(). В vanilla JS такая операция была бы бессмысленной, но Svelte полагается на такие назначения, чтобы определить, следует ли обновить представление или нет. Svelte не распознает такие методы, как splice() (которые мы используем для удаления TODO из массива) или push() — только для присваивания переменных и свойств. Вот почему мы должны выполнить операцию todos = todos — запустить обновление представления.

С другой стороны, в функции addTodo() мы могли бы использовать push() и выполнить тот же прием присваивания, что и в removeTodo(), но вместо этого мы используем гораздо более приятный и понятный синтаксис распространения, где присваивание просто импортируется.

Форма

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

<form class="field has-addons" style="justify-content: center" on:submit|preventDefault="{addTodo}"
> <div class="control"> <input bind:value="{input}" class="input" type="text" placeholder="TODO" /> </div> <div class="control"> <button class="button is-primary"> <span class="icon is-small"> <i class="fas fa-plus"></i> </span> </button> </div>
</form>

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

В самом верхнем элементе form мы используем директиву on: для прослушивания события формы submit. Синтаксис |[modifier] позволяет применить к прослушивателю модификаторы, такие как preventDefault, для того, чтобы предотвратить перегрузку страницы. Затем мы используем директиву bind: в элементе input для привязки свойства value элемента к переменной input. Это все, что нам нужно сделать, поскольку Svelte позаботится об остальном самостоятельно.

Список дел

Прямо сейчас осталось создать сам список дел. К счастью, со Svelte это довольно просто!

<ul class:list={todos.length > 0}> {#each todos as todo (todo.id)} <li class="list-item" transition:slide="{{duration: 300, easing: elasticInOut}}"> <div class="is-flex" style="align-items: center"> <span class="is-pulled-left">{todo.text}</span> <div style="flex: 1"></div> <button class="button is-text is-pulled-right is-small" on:click={()=> removeTodo(todo.id)}> <span class="icon"> <i class="fas fa-check"></i> </span> </button> </div> </li> {:else} <li class="has-text-centered" transition:slide="{{delay: 600, duration: 300, easing: elasticInOut}}"> Nothing here! </li> {/each}
</ul>

Сначала мы добавим директиву class: к верхнему элементу ul. Это необходимо для запуска определенного имени класса — в данном случае list — когда выполняется указанное условие. Мы используем его, так как не хотим применять класс list , когда у нас нет дел для отображения. Это необходимо, так как мы хотим красиво вывести сообщение «Ничего нет!».

Далее мы видим наш первый и единственный используемый блок Svelte — {#each}. Он перебирает массив значений (здесь это массив todo) и отображает предоставленный шаблон, передавая объект данных с указанным именем (todo). Последним является ключевое выражение ((todo.id)), которое помогает Svelte оптимизировать процесс рендеринга списка, назначая указанный ключ каждому элементу.

Мы также используем оператор {:else} , который будет отображаться, когда длина переданного массива равна 0. Это идеальное место для нашего сообщения «Ничего нет!».

Каждый элемент, отображаемый с использованием блока {#each} , имеет доступ к данным элемента через объект todo . Мы используем это при отображении текста TODO с помощью {todo.text} и прослушивании события click с помощью директивы on: и встроенного обработчика.

Наконец, чтобы сделать приложение немного более привлекательным, мы используем встроенный переход Svelte slide, чтобы плавно анимировать все элементы и сообщение «Ничего нет!».

Для этого нам сначала нужно в верхней части кода JS импортировать необходимые функции transition и easing из библиотеки Svelte:

import { slide } from "svelte/transition";
import { elasticInOut } from "svelte/easing";

Затем мы можем использовать их в шаблоне через директиву transition:. Она принимает функцию перехода (встроенную или собственную функцию Svelte) и объект конфигурации, который меняется в зависимости от перехода. В нашем случае конфигурация позволяет устанавливать такие значения, как задержка анимации, продолжительность и функция замедления (elasticInOut).

Результат

Все готово, вот наше приложение во всей своей красе:

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

Заключение

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

Автор: Areknawo

Источник: https://dev.to

Редакция: Команда webformyself.