На этой неделе я решил попробовать Svelte и создать приложение. Хотел ответить на несколько вопросов, а именно что это? Что это дает? Стоит ли рассматривать это в своем следующем проекте? Я никогда раньше не использовал Svelte, так что для меня это тоже будет полезным опытом. Это будет первая часть из двух частей моего путешествия по Svelte. Я хотел сделать все в одном посте, но чувствую, что у меня слишком много, о чем нужно написать, и я предпочел бы немного об этом рассказать.

Краткая история

Прежде чем мы начнем, я хотел немного узнать о Svelte. Мы начнем с его первоначального выпуска еще в ноябре 2016 года. Парень по имени Рич Харрис придумал этот замечательный интерфейсный компилятор. Если имя Рич Харрис звучит для вас знакомо, это может быть связано с тем, что он также ранее создал Reactive.js, который является предшественником Svelte. Основная цель, похоже, заключалась в создании чего-то, что позволяло бы писать чистый реактивный код на JavaScript. Некоторым из вас может быть интересно, что такое реактивное программирование?

Я постараюсь быть кратким, чтобы не уйти слишком далеко от темы. Реактивное программирование - это, по сути, программа, которая реагирует на события с течением времени. По сути, это означает, что ваша программа реагирует на серию событий, которые происходят в течение определенного периода времени. Как вы понимаете, реактивное программирование в основном имеет дело с довольно большим количеством асинхронных данных. И Reactive.js, и Svelte предназначены для того, чтобы вы могли лучше писать реактивные интерфейсы. Разработчики Svelte утверждают, что Svelte позволяет писать действительно реактивный код на простом старом JavaScript.

Итак, теперь мы знаем, что Svelte основан на Reactive.js и что одна из его целей состоит в том, чтобы обеспечить лучший реактивный интерфейс. Теперь нам нужно поговорить о хлебе и масле Svelte: компиляторе. В отличие от других библиотек и фреймворков, основная концепция Svelte - переложить большую часть работы, выполняемой вашим приложением, с браузера на компилятор. Основная идея Svelte заключается в том, что он скомпилирует ваш код до не более чем ванильного JS без каких-либо ссылок на фреймворк. Это позволит сделать окончательный пакет очень маленьким, а ваше приложение будет запускаться очень быстро. Если вы хотите узнать об этом больше, я настоятельно рекомендую прочитать «Переосмысление реактивности» на сайте Svelte.



Svelte 3: переосмысление реактивности
Наконец-то он здесь Спустя несколько месяцев, оставшихся всего в нескольких днях, мы на седьмом небе от счастья, чтобы объявить о стабильном выпуске… svelte. разработчик



Так что, избавившись от этого небольшого урока истории, я очень взволнован, чтобы в него попасть!

Начало работы и первые впечатления

Часто люди не знают, с чего начать путь к новым технологиям. Я решил начать с веб-сайта Svelte, где есть удобные ссылки на документацию, примеры кода и удобный учебник. Я решил, что лучше всего сразу перейти к их интерактивному руководству.



Учебное пособие по Svelte
Добро пожаловать в учебное пособие по Svelte. Это научит вас всему, что нужно знать для создания быстрых небольших веб-приложений… svelte.dev



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

То, что мне понравилось

Одна из функций, которые мне очень нравятся, - это то, что Svelte предупреждает вас о проблемах с доступностью. Учитывая количество недоступных веб-сайтов, мне нравится тот факт, что это помогает мне сделать мое приложение доступным для такой широкой базы пользователей. Вы видите, что такие компании, как Toys «R» Us и Dominos, подаются в суд (вполне справедливо), потому что их сайты / приложения не могут использоваться людьми с нарушениями зрения. Я думаю, что именно Toys «R» Us на самом деле использовали изображения для отображения блоков текста, что просто ужасно (пожалуйста, никогда не делайте этого).

Что мне показалось очень интересным, так это их реактивный синтаксис. Если вы не проходили обучение, вот пример:

<script>
 let count = 0;
 $: console.log(`the count is ${count}`);
 $: double = count * 2;
function handleClick() {
  count += 1;
 }
</script>
<button on:click={handleClick}>
 Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {double}</p>

Странный синтаксис $: в основном говорит Svelte, что при изменении состояния вашего компонента перезапустите эту вещь. Таким образом, каждый раз, когда мы нажимаем кнопку, он будет повторно запускать count * 2, а также консоль, регистрирующую текущее значение count. Что произойдет, если мы заменим $: на let или удалим его? Абсолютно ничего, по-прежнему не пойдет. журнал консоли будет запущен один раз, как и count * 2. Он никогда не будет запущен повторно. Я уже могу сказать, что это приведет к значительному повышению производительности, поскольку все это не перерисовывается при каждом изменении состояния.

Что мне действительно понравилось, так это их синтаксис логики разметки. Если вы хотите добавить блок if / else, Svelte позволяет объединять блоки if / else, как в любом языке программирования. Мне также очень понравилось, как они обрабатывают динамические списки. Давайте посмотрим на несколько примеров:

Это взято прямо из учебника Svelte. Если вы не изучили руководство, позвольте мне объяснить одну вещь об экспорте. Когда вы объявляете «имя экспорта», теперь вы можете передать имя этому компоненту в качестве опоры.

Теперь вы можете увидеть пример переключения чего-либо в представлении на основе переменной, например, если пользователь вошел в систему или нет. Мне очень нравится, как мы объединяем эти операторы if-else в цепочку, а синтаксис прост, что упрощает понимание.

Давайте также посмотрим, как он обнаруживает изменения для списков, таких как блок {# each}. Во-первых, синтаксис для всех этих вещей в основном будет одинаковым, что сделает написание кода более простым и предсказуемым. Другое дело, что когда вы делаете (thing.id) в конце, вы говорите Svelte, что thing.id - это ключ, которому мы должны следовать, подобно передаче ключа в опору в React или использовании функции trackBy в Angular, за исключением того, что это способ в Svelte проще.

Поговорим об асинхронности. Что касается моих предпочтений, мне действительно нравятся Angular и RxJS. Я чувствую, что они упрощают асинхронность. В частности, мне нравится тот факт, что в Angular я могу легко дождаться обещания или наблюдаемого с помощью канала вроде этого:

<p>{{someAsyncValue | async}}</p>

Посмотрев на реализацию Svelte, мне ДЕЙСТВИТЕЛЬНО нравится, как она работает. Вот их пример:

<script>
 async function getRandomNumber() {
  const res = await fetch(`tutorial/random-number`);
  const text = await res.text();
  if (res.ok) {
   return text;
  } else {
   throw new Error(text);
  }
 }
let promise = getRandomNumber();
 function handleClick() {
  promise = getRandomNumber();
 }
</script>
<button on:click={handleClick}>
 generate random number
</button>
<!-- replace this element -->
{#await promise}
<p>loading...</p>
{:then number}
<p> the number is {number} </p>
{:catch error}
<p> {error.message} </p>
{/await}

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

Я хочу включить сюда гораздо больше, но я не хочу превращать этот пост в целую книгу, поэтому на данном этапе я настоятельно рекомендую вам пройти обучение на их веб-сайте (извините, если я не перечислил ваши любимая вещь в Svelte). Я гарантирую, используете ли вы обычный JavaScript, Angular, Vue или React, вы будете приятно удивлены тем, насколько вам нравится Svelte, и, как и я, он в целом впечатлит.

Вещи, которые мне не нравились

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

<script>
 let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{@html string}</p>

Используя тег @html, я могу гарантировать, что любой HTML-тег будет запускаться в браузере без какой-либо очистки. В своем руководстве они даже говорят, что вам нужно будет очистить его самостоятельно, чтобы избежать возможности атаки с использованием межсайтовых сценариев (XSS). Мне это не нравится, потому что если кто-то начинает со Svelte и не понимает, какой здесь риск, он может создать серьезные уязвимости в своем коде, и ничто не может помешать этому.

Другой вид связан с тем, как работает реактивность. Я бы сказал, что мне это более безразлично. Я кратко рассмотрел, как их реактивность работает с символом $:, но есть небольшая загвоздка. Для работы требуется задание:

<script>
 let numbers = [1, 2, 3, 4];
 function addNumber() {
   numbers.push(numbers.length + 1);
   numbers = number; // assigning so $: sum will re-run
 }
 $: sum = numbers.reduce((t, n) => t + n, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>
 Add a number
</button>

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

numbers = [...numbers, numbers.length + 1];

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

И последнее, что мне не понравилось, это то, что для того, чтобы все это работало в моей локальной среде разработки, мне нужно использовать веб-пакет или накопительный пакет. Хотя реализации обоих официально поддерживаются, и есть много документации и примеров, одна вещь, которую я абсолютно НЕНАВИЖУ, - это писать / выяснять конфигурацию. Это, наверное, больше личное дело, но я просто хочу сосредоточиться на своем продукте. Я не хочу тратить свое время на написание шаблонных конфигураций. Я бы предпочел, чтобы все было сделано за меня, поскольку они обычно довольно стандартные. Если вы человек, который не против делать такие вещи, это может не относиться к вам, но, по крайней мере, я так понимаю. Это лениво? Может быть. Лично мне кажется, что я предпочитаю работать над своим проектом, а не над конфигурацией моего проекта.

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

Создание собственного проекта

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