Краткое введение в Svelte 3

Борис Кисов

<a href="https://www.linkedin.com/in/kisovboris/">IT Expert & Project Manager</a>

Svelte — это не совсем фреймворк в том смысле, к которому мы привыкли, и, пожалуй, лучше рассматривать его как компилятор.

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

Инициализация проекта Svelte 3

Начните работать с Svelte, используя пакет degit. Вы можете сделать это в командной строке, просто вызвав degit с помощью npx. Давайте создадим простое say-something приложение:

			$ npx degit sveltejs/template say-something

# перейти в созданный каталог
$ cd say-something

# установка зависимостей
$ npm install # или установите yarn если требуется такая зависимость
		

И с помощью этой команды вы можете запустить сервер разработки:

$ npm run dev

А теперь вы можете зайти на http://localhost:5000, чтобы получить доступ к своему приложению.

Структура Svelte приложения

package.json

Откройте проект в вашем любимом редакторе кода и посмотрите файл package.json. Обратите внимание, что существуют только dev-зависимости и нет других традиционных зависимостей! Вот тут-то и появляется понимание, что вы работаете с чем-то совершенно новым. Здесь нет обычных зависимостей, потому что фреймворк компилирует ваш код в чистый код JavaScript при сборке для производства.

Точка входа JavaScript: main.js

Если вы посмотрите в папку src, вы увидите корневой компонент, App.svelte, и точку входа JavaScript, main.js. Как и в случае с React или Vue, приложения Svelte строятся с использованием компонентов, и в большинстве случаев у вас будет компонент App который действует в качестве корневого компонента для остальной части дерева компонентов, формирующего ваше приложение. main.js просто берет этот компонент App и инстанцирует его, используя целевой элемент в Вашем файле index.html и опциональные параметры, которые может получить компонент App.

Общая папка

При разработке общая папка будет содержать незавершенную версию пакета приложения и файл index.html, в котором выполняется пакет.

Svelte файлы

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

Типичный файл Svelte будет выглядеть так:

			<script>
  // логика для вашего компонента
</script>

<style>
  /* стиль вашего компонента */
</style>

<!-- HTML-разметка для вашего компонента -->
		

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

Создание компонента счетчика Counter

Давайте создадим простой компонент Counter и узнаем о некоторых специфических для Svelte синтаксисах. Для простоты здесь мы будем отказываться от стилей, так как блоки стиля и скриптов в файле .svelte в любом случае являются необязательными.

Вот наша отправная точка:

			<script>
  let count = 0;
</script>

<div>Текущий счет: {count}
		

Фигурные скобки в вашей разметке предназначены для интерполяции значений. Подойдет любой допустимый однострочный JavaScript-код, но чаще всего его просто интерполировать значения из нашего JavaScript-кода.

Привязка к событиям

Давайте добавим несколько кнопок, чтобы мы могли увеличивать или уменьшать счетчик:

			<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<div>Текущее количество: {count}</div>

<button on:click={increment}>Увеличение</button>
<button on:click={decrement}>Уменьшение</button>
		

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

Условные выражения

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

			<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<div>Текущее количество: {count}</div>

{#if count > 5}
  <p>⚠️ Это немного, тебе не кажется?</p>
{:else if count < -5}
  <p>? Как низко вы можете пойти!</p>
{/if}
  

<button on:click={increment}>Увеличение</button>
<button on:click={decrement}>Уменьшение</button>
		

Выражение :else if является необязательным, и вы также можете использовать выражение :else.

Двустороннее связывание значений

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

			<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<div>Текущее количество: <input bind:value={count} type="number" /></div>

{#if count > 10}
  <p>⚠️ Это немного, тебе не кажется?</p>
{:else if count < -10}
  <p>? Как низко вы можете пойти!</p>
{/if}
  

<button on:click={increment}>Увеличение</button>
<button on:click={decrement}>Уменьшение</button>
		

Двухстороннее связывание осуществляется с помощью синтаксиса bind:value={myVal}. Обратите внимание, что мы ввели число, и Svelte автоматически преобразует введенное значение в числовой тип.

Запуск приложения

Когда будете готовы собрать приложение, просто выполните команду build:

$ npm run build

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