Крупный гайд по Svelte

Svelte — веб-фреймворк, который отличается принципом работы от React и Vue.

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

У Svelte нет Virtual DOM, то есть он напрямую работает с DOM в браузере и изменяет его по мере необходимости.

Использовать сам фреймворк можно с помощью нескольких способов:

С помощью Vite
С помощью npm create svelte@latest

Каждый компонент в Svelte — SFC (Single File Component). Как и во Vue или React внутри SFC можно разместить:

Стили
Верстку
Логику

Все что находится внутри <script> выполняется во время создания компонента.

Внутри <script> также есть дополнительные правила, которые будет рассмотрены ниже.

Важно помнить что Svelte — фреймворк, который компилирует исходный код, а значит у Svelte может быть дополнительные значения у привычных для нас вещей (напр. export, который описан ниже)

Состояния внутри Svelte объявляются с помощью let и const. Все верно, каждая переменная объявленная в глобальном скоупе является состоянием🫡

На случай, если это ваш первый реактивный фреймворк:
Состояния нужны для обновления интерфейса. Как только состояние обновляется — обновляется и интерфейс приложения, который показывает актуальные данные.

Шаблон компонента можно писать прямо в файле .svelte:

Для того чтобы использовать состояния внутри шаблона нужно укзаать на имя состояния в фигурных скобках:

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

Также мы можем вставлять HTML с помощью модификатора @html:

Интерполяция работает с атрибутами точно также, как и с текстом внутри элемента:

В HTML нет условий, в Svelte они есть. Использовать условный рендеринг можно следующим образом:

Также мы можем использовать {:else if <условие>}, для того чтобы задать дополнительный логический блок. Прямо как `else if` в JS👀

Также как и с условным рендерингом — в Svelte есть цикличный рендеринг. Он позволяет проходится по спискам и для каждого элемента рендерить одну и ту же верстку:

Данный кусок кода выведет следующий список в HTML:

<div> Список имен: <ul> <li>Alex</li> <li>Alexo</li> <li>Nina</li> <li>Jeff</li> </ul> </div>

В случае если список изменяется — нужно дать каждом элементу id, для того чтобы Svelte лучше управлялся с такими элементами и рендерил все правильно:

Svelte позволяет нам отрисовывать разный шаблон по мере жизнедеятельности промиса:

Обратите внимание, что:

# в начале названия блока используется для объвления блока
: в начале названия блока используется для того чтобы продлить блок
/ в начале названия блока используется для того чтобы закрыть блок

Можно импортировать компоненты в другие компоненты:

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

С помощью ключевого слова export мы можем объявлять пропсы (по сути просто экспортируя переменную):

<script> export let name = 'John'; export let age = 0; </script> <div> Hello, { name } Your age is { age } </div>

Когда мы будем использовать компонент Hello. svelte — мы будем передавать имя через name=«значение». Если мы не передадим значение, то будет использоваться значение, с которым переменная name инициализировалась (John).

<script> import Hello from './Hello.svelte'; </script> <div>  <Hello name="Daniil" age=20 />  <Hello /> </div>

Важно
Нужно обязательно инициализировать пропс с дефолтным значением (даже если это undefined). Если мы просто напишем следующее, то Svelte будет жаловаться:

Если мы хотим передать сразу несколько пропсов, которые находятся внутри объекта и имена свойств совпадают с именами пропсов, то мы можем использовать spread-оператор:

<script> import Hello from './Hello.svelte'; const person = { name: 'Daniil', age: 20 }; </script> <div> <Hello {...person} /> </div>

Все переменные которые объявлены внутри <script> по умолчанию являются реактивными🚀

То есть, если мы инициализируем переменную для счетчика, которая будет отображать число кликов и с помощью метода прибавим к ней 1, то значение сразу же отрисуется в верстке:

Если вас смущает on:click={}, то не стоит сейчас об этом думать, мы рассмотрим привязку ивентов чуть позже. Если вкратце, то тут мы привязываем на клик функцию increment👇

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

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

Функция niceRender перерисует значения на странице, так как мы присваиваем новое значение переменой foodList🍗

Блок <script> внутри компонента выполняется полностью только однажды (при создании компонента). Это значит что после того как компонент примонтируется, внутренние состояния, которые зависят от пропсов не будут обновляться:

Если мы используем компонент и в процессе взаимодействия с интерфейсом пользователь изменит имя, которое передается в пропс компонента вверху, то переменная uppercaseName не обновится (хоть name и обновится), так как весь код был выполнен при создании компонента.

Прослушиватели в Svelte сделаны с помощью лэйблов в JS. Для реактивного блока создан специальный лэйбл $.

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

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

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

В «Обновлении значений» мы говорили о том, что при инициализации переменной с помощью пропса — она не будет меняться, даже если значение пропса изменилось. Это можно исправить с помощью вычисляемого значения. Сделать так, чтобы переменная пересчитывалась каждый раз, как меняется пропс можно следующим образом:

Нужно обратить внимание, что перед uppercaseName не используется let 🤓

Мы уже видели как используется on:click 👀

on используется для того чтобы определить какой-то ивент. Например:

`on:click` — сработает при клике
`on:keydown` — сработает при нажатии кнопки
`on:drag` — сработает при переносе чего-либо
`on:mouseenter` — сработает, когда мышь окажется внутри какого-то элемента

Мы можем использовать в качестве обработчиков событий функции внутри компонента или писать стрелочные функции прямо внутри скобок:

Мы можем использовать следующие модификаторы:

preventDefault — вызывает event. preventDefault() перед тем как выполнить хэндлер.
stopPropagation — вызывает event. stopPropagation(), чтобы предотвратить всплытие.
passive — улучшает производительность при скролле (Svelte сам будет добавлять данный модификатор где это уместно).
nonpassive — отключает модификатор passive.
capture — вызывает хэндлер во время фазы захвата, а не всплытия
once — хэндлер сработает только один раз
self — тригерит ивент, если пользователь взаимодействовал только с элементом, на котором висит данный ивент (избегание всплытия)
trusted — тригерит ивент, если event. isTrusted === true

Модификаторы указываются следующим образом:

Иногда нам нужны кастомные ивенты, которые бы тригерили функции извне компонента. В Vue для этого есть emit, в Svelte — eventDispatcher 💁🏻‍♂

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

<script> import Subcomponent from './Subcomponent.svelte' function handleMessage(message) { alert(message); } </script> <Subcomponent on:message={handleMessage} />

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

<script> // Импортируем специальный метод, который создает dispatcher // с помощью которого мы будем посылать наш ивент import {createEventDispatcher} from 'svelte'; const dispatch = createEventDispatcher(); function handleClick() { const message = 'Hello, World!'; dispatch('message', {message}); } </script> <button on:click={handleClick}>Click me!</button>

Теперь при клике на кнопку мы создадим специальный ивент, который вызовет коллбэк handleMessage из родительского компонента и передаст ему все данные, которые нам нужны 🙌

> К слову мы могли назвать ивент как хотим. Важно, чтобы первый аргумент в dispatch() и слово после on: совпадали.

Кастомные ивенты не всплывают, но если нам нужно, чтобы они всплывали, то у каждого дочернего компонента в иерархии нужно указывать `on:message`. Это довольно редкий кейс, однако подробнее можно узнать тут.

Биндинги существуют для того чтобы облегчать двухстороннее связывание 🥂

Двухстороннее связывание — техника, которую в основном применяют к инпутам. Она связывает value и событие oninput, таким образом чтобы пользовательский ввод все время обновлял value.

В Svelte это выглядит следующим образом:

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

Хуки — это методы, которые цепляются за жизненный цикл компонента🪝

В Svelte существует следующие хуки:

onMount — хук, который выполняется как только компонент примонтировался к DOM.
beforeUpdate — хук, который работает перед тем как в компонент придут новые данные (например из пропсов)
afterUpdate — хук, который работает после того, как в компонент пришли новые данные
onDestroy — хук, который работает когда компонент размонтируется (удаляется из DOM)

Обычно хук onMount используют для того, чтобы подтянуть какие-то данные со сторонних сервисов с помощью fetch и использовать их внутри компонента.

Если использовать SvelteKit (для рендеринга на стороне сервера) и расположить fetch внутри onMount, то данные будут запрашиваться на стороне клиента, а если просто внутри <script>, то запрос отправится еще на сервере.

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

1. Сбор операций которые нужно выполнить пачкой

2. Подбор времени для выполнения

3. Оптимизация собраного стека

4. Выполнение этих операций (тик)

В Svelte тоже есть тики. Например, если мы используем специальный метод tick внутри хука beforeUpdate, то после выполнения мы уже будем находиться на ивенте afterUpdate:

Как уже понятно — мы можем объявлять состояния внутри компонентов. Однако бывают ситуации, когда нам нужно использовать глобальные состояния, при обновлении которых компоненты также будут обновляться (перерендериваться). Для этого сторы и придумали.

Самый простой стор, который можно придумать — счетчик, однако в сторы можно запихнуть и сложных структуры данных, тут стор используется для примера.

Допустим что у нас есть два разных компонента:

В одном из них мы управляем нашим счетчиком
В другом мы используем значения из этого счетчика

Мы можем объявлять счетчики вне компонентов в отдельных файлах JS/TS:

import {writable} from 'svelte'; export const counter = writable(0);

В данном компоненте мы будем управлять счетчиком:

<script> import { counter } from './counter.js' /** * Инкрементирует значение в сторе */ function increment() { counter.update(n => n + 1); } /** * Декрементирует значение в сторе */ function decrement() { counter.update(n => n - 1); } </script> <button on:click={increment}>Увеличить</button> <button on:click={decrement}>Уменьшить</button>

В данном компоненте мы будем отрисовывать счетчик:

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

Чтобы не делать этого мы можем просто использовать стор добавив к его названию $ — $counter.

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

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

Еще обязательно увидимся в следующих гайдах и туториалах ❤

31 комментарий

Ияза Гара

11.02.2023

Выглядит как 💩
Какой-то убогий искусственно выдуманный синкаксис, странная структура документов, переменные, странные методы, которые откуда-то появляются - видимо тоже объявлены в глобальной области видимости.
Это точно кому-то надо?
Пишут что виртуальный дом - это плохо. Чем плохо? Медленно работает или тем что некоторые криворукие разрабы не включают голову?
Хоть какие-то есть внятные доводы использовать этот велосипед вместо реакта?

Ответить

Даниил Шило

Автор

В статье же нигде не сказано: “Юзайте Svelte вместо React”👀

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

Svelte компилирует исходники и отдает часть уже готовой статики. VDOM ему не нужен не потому что “Virtual DOM плохой”, а потому что весь код подготавливается и проверяется на стадии компиляции)

Про синтаксис можно холиварить сколько угодно, это ведь индивидуально))