Всем привет.
Это отчёт в продолжение статьи "Уйти от jQuery к Svelte, без боли".
Ниже я расскажу о трудностях с которыми столкнулся, их было не много, и только одна была настолько фундаментальной, где без поддержки сообщества я бы не справился.
Введение
Я планировал переписывать фронтэнд по кусочкам, это не то что бы совсем не получилось, получилось не совсем — переписывать пришлось большими кусками.
Во первых потому что подход JQuery — императивный, подход Svelte — декларативный.
Во вторых потому, что с использованием JQuery у нас масштаб (область видимости) всегда глобальный, из любой строки кода нам доступны все элементы веб-страницы, мы к ним обращаемся по ID или CSS селектору, в то время как Svelte рекомендует использование компонентов и внутри компонента мы видим только сам компонент, ни внешних элементов ни внутренних у нас нет, и мы не имеем возможности обратиться к ним напрямую.
Со Svelte получается настоящее ООП: мы не можем внести изменения сами, мы можем только сообщить компоненту о необходимости изменений. Как эти изменения будут сделаны, знает только код внутри компонента.
И это прекрасно :)
Для сообщения с компонентами у Svelte есть два механизма.
Связывание переменных (бинды, мапинг)
Мы объявляем переменную и мапим её на атрибут компонента:
<script>
import DetailTaskView from './DetailTaskView.svelte';
let task = {};
let isModal = false;
function renderTask(data) {
const isSuccess = data.hasOwnProperty(0);
if (isSuccess) {
isModal = true;
task = data[0];
}
}
import {fade} from 'svelte/transition';
</script>
{#if isModal}
<div transition:fade>
<DetailTaskView bind:isModal="{isModal}" {...task}/>
</div>
{/if}
Что мы сделали ?
Мы объявили две локальные переменные «task» и «isModal», «task» это информация для отображения в компоненте, данные только выводятся, изменяться не будут, «isModal» это флаг видимости компонента, если пользователь нажал крестик на компоненте, то компонент должен исчезнуть, крестик принадлежит компоненту, поэтому о нажатии мы ни чего не узнаем, но узнаем что значение переменной «isModal» изменилось и благодаря реактивности отработаем это новое значение.
Если нам необходимо двустороннее связывание, то мы пишем «bind:», изменение значения внутри компонента будет сообщено «родительскому» компоненту.
Можно использовать сокращённую форму, если нам надо только сообщить компоненту значения, и если имя атрибута компонента совпадают с именем переменной, мы можем написать "{task}" или использовать деструктор "{...task}".
Удобно.
Но если у нас в один компонент вложен другой, а там ещё и третий, то конечно появляется болерпллейт по прокидыванию значения вверх и вниз по иерархии вложенности.
Всплытие событий
С терминологией могу ошибаться, сильно не пинайте.
Родительский компонент может обрабатывать события дочернего компонента, но только те события о которых дочерний компонент сообщит.
<!-- App.svelte компонент Приложения -->
<script>
import SearchForm from './SearchForm.svelte';
async function applySample(event) {
const sample = event.detail.sample;
if(sample){
search(sample);
}
if(!sample){
renderPage();
}
}
</script>
<div class="container">
<h1>Трекер рабочих заданий</h1>
<SearchForm on:search={applySample}/>
</div>
<!-- SearchForm.svelte компонент Строка поиска -->
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
let sample = '';
function search(event) {
event.preventDefault();
dispatch('search', {
sample: sample
});
}
</script>
<form class="form-horizontal" id="search"
on:submit={search}>
<div class="form-group">
<label class="control-label col-sm-2" for="sample">
Поиск
</label>
<div class="col-sm-10">
<input id="sample" class="form-control" type="search"
placeholder="Введите наименование задачи"
autocomplete="on" bind:value={sample}
/>
</div>
</div>
</form>
Что тут происходит ?
По событию «on:search» дочернего компонента «SearchForm» выполняется функция «applySample», эта функция из объекта события получает параметры и обрабатывает их.
Что происходит в компоненте ?
Атрибут «value» элемента input замаплен на переменную «sample», по событию «on:submit» (элемента «form») выполняется функция «search», которая создаёт событие 'search' и в свойство «detail» записывает объект {sample: sample} — то есть значение строки поиска.
Таким образом значение строки поиска передаётся в родительский компонент и именно он решает что ему с этим значением делать.
Компонент несёт ответственность только за отображение формы вводы и передачу введённого значения, компонент не реализует выполнение поиска и отображение результатов, разделяем ответственность.
Красота!
Переход от императивности к декларативности
Тут к сожалению не получиться так же наглядно показать разницу. На словах это звучит так: если при использовании jQuery я создавал html разметку и потом вставлял её в нужное место, то со Svelte я генерирую массив с атрибутами компонентов и потом в цикле добавляю компоненты с заранее рассчитанными атрибутами:
<!-- Paging.svelte компонент для перехода между страницами поисковой выдачи -->
<script>
import {createEventDispatcher} from 'svelte';
import OrdinalPlace from './OrdinalPlace.svelte';
let pagingPlaces;
// бизнес логика расчёта атрибутов для массива pagingPlaces
function addPlace(
paging = [], index = Number.NEGATIVE_INFINITY,
text = "", css = "") {
paging.push({index:index,text:text,css:css});
return paging;
}
const dispatch = createEventDispatcher();
function browsePage(event) {
const pageIndex = event.detail.index;
dispatch('move', {
index: pageIndex
});
}
</script>
{#if pagingPlaces.length}
<table class = "table table-hover-cells table-bordered">
<tbody>
<tr>
{#each pagingPlaces as place (place.index)}
<OrdinalPlace on:move="{browsePage}"
{...place}>
</OrdinalPlace>
{/each}
</tr>
</tbody>
</table>
{/if}
<!-- OrdinalPlace.svelte компонент для отображения элемента "страницы" в списке страниц для перехода -->
<script>
export let index = -1;
export let text = "";
export let css = "";
let number = index +1;
function skip() {
return !(text === "");
}
let letSkip = skip();
let noSkip = !letSkip;
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
function moveTo() {
if(noSkip){
dispatch("move", {index:index});
}
}
</script>
<td class="{css}" on:click="{moveTo}">
{#if letSkip}
{text}
{/if}
{#if noSkip}
{number}
{/if}
</td>
Как это работает ?
При создании компонента Paging мы формируем массив «элементов» для перехода к определённым страницам — «pagingPlaces», далее циклом пробегаем по всем элементам и вставляем компонент для отображения одной позиции пейджинга — «OrdinalPlace».
Опять же декларативный подход, мы не формируем каждую позицию сами, мы сообщаем компоненту что нам необходимо отображение позиции с такими то атрибутами.
Тут мы видим замороченный случай всплытия события. Для перехода к странице поисковой выдачи пользователь кликает по компоненту «OrdinalPlace», этот компонент не умеет загружать страницу, поэтому он создаёт событие «move» с параметром индекс страницы и это событие подхватывает родительский компонент — «Paging», который тоже не умеет загружать страницу поэтому он создаёт событие 'move', и его уже подхватывает следующий родительский компонент и каким то образом обрабатывает.
Svelte и компонентный подход подталкивают нас к разделению ответственности и следованию SOLID.
Самая большая засада
В примере выше показано решение фундаментальной проблемы с которой я бы без подсказки не справился. Svelte кеширует все компоненты и надо ему помогать отслеживать изменения в этих компонентах.
Вот код, о котором идёт речь:
{#each pagingPlaces as place (place.index)}
<OrdinalPlace on:move="{browsePage}"
{...place}>
</OrdinalPlace>
{/each}
Для вывода списка страниц в пейджинге мы бежали по массиву и Svelte каждому компоненту сопоставил какой то индекс массива, теперь решение, о перерисовке компонента, Svelte принимает, исходя из этого индекса, если индекс во время перебора элементов массива не указать, то получиться не пойми что, я сутки пытался понять, потом обратился за помощью зала и в зале не сразу нашёлся человек хорошо знакомый с этими граблями, но мне помогли, спасибо ребятам.
При работе с массивами имейте это в виду: любой проход по массиву должен использовать индекс, ещё раз:
{#each pagingPlaces as place (place.index)}
«pagingPlaces as place (place.index)» — используйте обязательно.
Конечно если вы ранее работали с React/Vue, то наверное вы уже знакомы с этой особенностью.
Визуальные эффекты
В моём приложении использовались модальные окна. jQuery для этого устанавливает требования к разметке, без неё, метод jQuery.modal(), работать не будет.
У Svelte с этим проще:
{#if isModal}
<div transition:fade>
<DetailTaskView bind:isModal="{isModal}" {...task}/>
</div>
{/if}
Конкретно «transition:fade» отвечает за исчезновение / появление элементов на странице.
Нам ни кто не диктует какая у нас должна быть разметка.
Это хорошо.
Кроме этой анимации Svelte имеет ещё парочку: fly и tweened, примеры по ссылкам в учебнике.
Прочее
Нет выражений в разметке
Из мелочей, как следствие декларативного подхода, в директивах типа "#if" нельзя использовать выражения, только ранее вычисленные значения.
Поэтому мне вместо того что бы писать:
{#if letSkip}
{text}
{/if}
{#if !letSkip}
{number}
{/if}
Пришлось завести ещё одну переменную:
let letSkip = skip();
let noSkip = !letSkip;
И конечно настоящая беда с именованием переменных/параметров/атрибутов, приходиться один словом называть и свойство объекта и переменную которую туда записываешь, правило телефонной трубки, когда ты по телефону должен рассказать о коде, так что бы на том конце не запутались и всё поняли, такие повторяющиеся имена нарушают.
AJAX
Это не касается Svelte, но касается отказа от использования jQuery, jQuery.ajax можно заменить на fetch(), я такую замену сделал, можно посмотреть в репозитории.
Заключение
Переход от использования jQuery к использованию Svelte потребует переписать логику создания разметки, но это не так сложно и долго как может показаться, особенно если ваш код этим не грешит.
Svelte упрощает вашу разметку и сокращает JS код, использование Svelte делает ваш код более переиспользуемым и устойчивым к случайным ошибкам.
Используйте Svelte, это будет хорошо для вас и ваших заказчиков!
Ссылки
Официальный сайт Svelte
Репозиторий с переходом от использования jQuery к использованию Svelte
Канал русскоязычного сообщества Svelte в Телеграм
Спасибо, что прочитали.
P.S.: Не знаю почему Хабр вырезает двоеточие из ссылки на канал сообщества: tg://resolve?domain=sveltejs
Автор: SbWereWolf
