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

Что такое Свелте?

Начиная с основ, слово svelte имеет следующие значения: элегантный, тонкий, изящный, стильный.

Svelte — это инфраструктура пользовательского интерфейса, которая помогает нам создавать автономные компоненты многократного использования на простом HTML, CSS и JavaScript. Когда вы создаете компонент, используя расширение .svelte, все, что вам нужно, это включить ваш тег ‹script›, HTML-теги, такие как ‹div›обогащен дополнительными функциями и тегом ‹style› с локальной областью действия для написания вашего CSS, как в старые добрые времена Vanilla JS (JS в HTML).

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

Большинство фреймворков, таких как ReactJS и VueJS, интерпретируют наш декларативный код приложения во время выполнения . Это означает, что браузер должен выполнить дополнительную работу по преобразованию нашего декларативного кода в DOM (используя сравнение VirtualDOM), что не освобождает от снижения производительности.

Кроме того, Svelte имеет значительно меньший размер пакета, как видно здесь. Если вы посмотрите на файл package.json проекта Svelte, он содержит только devDependencies при запуске приложения, имея нулевые зависимости на стороне клиента!

Основные функции Svelte

  • Нет виртуального DOM
  • Действительно реактивный
  • Пишите меньше кода

Нет виртуального DOM

VirtualDOM — это виртуальное представление логики нашего приложения в памяти, которое используется для сравнения и синхронизации с «настоящим» DOM браузера. Это концепция, реализованная библиотеками в JavaScript поверх API-интерфейсов браузера.

Основным преимуществом vDOM на момент его изобретения было то, что он был быстрее и проще в управлении. Так что это было просто быстро по сравнению с «настоящим» DOM.

В то время как такие библиотеки, как React, используют ReactDOM для достижения такого согласования, Svelte идет совершенно другим путем, полностью удаляя концепцию vDOM.

Svelte просто компилирует наш код в крошечный бескаркасныйванильный JS-код, который манипулирует DOM напрямую и при этом работает быстро. Эти манипуляции с DOM не что иное, как операторы if(stateChanges).

Здесь — более подробное объяснение того, как Svelte достигает этого.

Действительно реактивный

Svelte синхронизирует DOM с состоянием нашего приложения с помощью реактивности. Этот реактивный характер Svelte поддерживается «из коробки», поэтому обычно нам нужно написать меньше кода, чтобы наше приложение отражало изменения состояния (смотря на вас, useState👀).

Как это работает?

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

Чтобы продемонстрировать это, простая функция, которая увеличивает переменную count, выглядит в Svelte следующим образом:

<script>
 let count = 0;

 function handleCount(){
  count+=1;
 }
</script>

<h1>Count is {count}</h1>
<button on:click={handleCount}>
 Click me!
</button>

Svelte автоматически определяет, что наш компонент должен отражать изменения count, и украшает наш оператор присваивания функцией invalidate. Часть скомпилированного вывода будет выглядеть примерно так:

function instance($$self, $$props, $$invalidate) {
 let count = 0;

 function handleCount() {
  $$invalidate(0, count += 1); // Here
 }

 return [count, handleCount];
}

Функция invalidate просто сообщает компоненту, что нужно знать об изменениях в переменной count.

Для сравнения, вот как будет выглядеть та же функция счетчика в React:

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleCount = () => {
  setCount(count+1);
  }
  
  return (
    <>
    <h1>{count}</h1>
    <button onClick={handleCount}> Click Me! </button>
    </>
  
  )
 }

— мы пишем слишком много кода для такого простого функционала.

2. Производное состояние

Предположим, что у нас есть переменные в наших компонентах, которые являются производными от некоторой части состояния приложения (это происходит почти всегда). Каждый раз, когда наш компонент выполняет повторную визуализацию, эти производные состояния пересчитываются снова и снова, независимо от того, изменилось состояние или нет. В React мы используем хуки, такие как useMemo, чтобы избежать именно этой ситуации. Расскажите о создании кода.

В Svelte мы объявляем производные состояния, используя $ как таковые:

<script>
 let count = 0;
 $: doublCount = count * 2; //Derived State
 function handleCount(){
  count+=1;
 }
</script>

<h1>Count is {count}</h1>
<h2>
 Double Count is {doubleCount}
</h2>
<button on:click={handleCount}>
 Click me!
</button>

Мы говорим Svelte, вот реактивное значение, которое зависит от другого реактивного значения, и их значения связаны. Это часть того, что выводит компилятор:

function instance($$self, $$props, $$invalidate) {
 let doubleCount;
 let count = 0;

 function handleCount() {
  $$invalidate(0, count += 1);
 }

 $$self.$$.update = () => {
  if ($$self.$$.dirty & /*count*/ 1) { // Recalculation happens if count changed
   $: $$invalidate(1, doubleCount = count * 2);
  }
 };

 return [count, doubleCount, handleCount];
}

Он просто заключает наше условие в оператор if, и если наш счетчик изменяется, мы пересчитываем doubleCount.

Меньше кода

По словам Рича Харриса, создателя Svelte, самый эффективный способ ускорить ваш код — избавиться от него.

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

Кроме того, Svelte предлагает гораздо большую гибкость в разметке наших компонентов, позволяя использовать несколько элементов верхнего уровня, а не возвращать один элемент верхнего уровня с помощью фрагмента (‹› ) в случае React и ‹template› в случае Vue.

Это также сокращает шаблонный код при обработке событий в наших компонентах, например, простая ситуация обработки ввода будет выглядеть так:

<script>
 let show = 'world';
</script>

<h1> Hello, {show}</h1>
<input bind:value={show} />

🤯

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

Некоторые варианты использования Svelte

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

Грубый обзор Svelte Kit

«Svelte должен реагировать так же, как SvelteKit реагирует на следующий JS»

Svelte Kit — это продуманная структура веб-приложений, которая помогает структурировать наш код Svelte и предоставляет множество функций для Svelte, таких как:

  • Маршрутизация на основе папок
  • Встроенные функции загрузки для получения данных перед запуском компонента.
  • ССР
  • SEO-улучшение
  • Государственное управление
  • Работа с файлами окружения
  • Управление активами
  • Обработка формы
  • макеткомпонент для макетов приложений по умолчанию (нижний колонтитул, заголовок и т. д.) с использованием ‹slot›

Подробнее читайте здесь.

Заключение

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

С его растущим сообществом нет никаких сомнений в том, что у Svelte светлое будущее.

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