Наблюдения о Svelte

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

Введение

Для тех, кто не знаком с Svelte, это новый вид фреймворка в мире фронтенда. Но это скорее язык, чем фреймворк. В Интернете существует много путаницы по поводу того, что на самом деле представляет собой Svelte и т.д.. Некоторые люди упоминают, что Svelte — это компилятор, который компилирует ваш код в простой Javascript, что не совсем верно. Потому что, как и другие фреймворки, Svelte добавляет внутренний пакет для того, чтобы все работало правильно.

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

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

Одна из основных задач svelte — синхронизация шаблона с кодом. Рассмотрим пример:

<!--- Home.svelte --->
<script>
   let name = "Dani";
</script>

<h1>Hello {name}</h1>
Вход в полноэкранный режим Выход из полноэкранного режима

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

Но как работает эта магия? Ну, одна из вещей, которую Svelte не делает, это использование алгоритма VDOM. У них нет представления DOM, они просто обрабатывают обновления непосредственно в DOM, что в большинстве случаев повышает производительность.

<!--- Home.svelte --->
<script>
    let name = 'Dani';

    function onChange (e) {
        name = e.target.value
    }
</script>

<h1>Hello {name}</h1>

<input type="text" on:change={onChange} />
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте посмотрим, что делает Svelte в этом простом случае:

  • Когда h1 рендерится, они определяют переменную name как зависимость, поэтому h1 подпишется на все обновления, которые будут у name.
  • Когда onChange изменяет значение, компилятор добавляет метод обновления под вашим назначением
// pseudo code
function onChange (e) {
    name = e.target.value
    $$update("name")
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Этот метод получит всех подписчиков переменной name и запустит обновления.

Обратите внимание на слово, которое я использовал ранее, назначение. Это важно, особенно когда вы работаете со сложными типами данных, такими как массивы, объекты и другие.

function updateComplexValue () {
    arr.push(2);
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

function updateComplexValue () {
    arr.push(2);

    // This doesn't do anything. Just tell the compiler that we need a new render
    arr = arr; 
}
Вход в полноэкранный режим Выйти из полноэкранного режима

С точки зрения логики это ничего не меняет. Но теперь компилятор определяет назначение, и он может добавить метод обновления ниже этого назначения.

// pseudo code
function updateComplexValue () {
    arr.push(2);
    arr = arr; 
    $$update("arr");
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Как работает реактивность?

Причина, по которой я считаю, что svelte — это нечто большее, чем простой фреймворк, заключается в следующем. Svelte добавляет реактивное объявление, которое позволяет вам создать новый тип переменной, вычисляемую переменную (как это называется в Vue 😉). Переменные или блоки будут обновляться каждый раз на основе их зависимостей.

Например:

let firstName = "Daniel"
let lastName = "Acuña"

let name = `${firstName} ${lastName}`;
Войти в полноэкранный режим Выйти из полноэкранного режима

name всегда будет «Daniel Acuña», потому что нет механизма, который бы говорил, что каждый раз, когда firstName или lastName меняются, нам нужно перегенерировать переменную. Но но но, Svelte расширяет язык, чтобы сделать это возможным.

let firstName = "Daniel"
let lastName = "Acuña"

$: name = `${firstName} ${lastName}`;
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь у вас будет переменная name, которая является реактивной и зависит от firstName и lastName, каждый раз при их обновлении name будет вычисляться заново.

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

let firstName = "Daniel"
let lastName = "Acuña"

$: {
    console.log(`${firstName} ${lastName}`)
}
Войти в полноэкранный режим Выход из полноэкранного режима

Как расширить возможности реактивности?

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

// count.store.js
import { writable } from 'svelte/store';

export const count = writable(0);

// Counter.svelte
<script>
import { count } from './count.store';

let value = 0;

count.subscribe(newValue => {
    value = newValue;
})
</script>

<span>Count: {value}</span>

// Increment.svelte
<script>
import { count } from './count.store';

function onClick () {
    count.update(n => n + 1);
}
</script>

<button on:click={onClick}>
    +
</button>
Вход в полноэкранный режим Выход из полноэкранного режима

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

// Counter.svelte
<script>
import { count } from './count.store';
</script>

<span>Count: {$count}</span>
Вход в полноэкранный режим Выход из полноэкранного режима

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

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

Если вы хотите усилить реактивность в Svelte, RxJS — хороший выбор. Потому что вы открываете дверь к новым возможностям управления потоками.

Если вам действительно интересно узнать больше о том, как интегрировать RxJS в Svelte, я очень рекомендую этот пост Тима Дешрайвера. https://timdeschryver.dev/blog/unlocking-reactivity-with-svelte-and-rxjs.

Некоторые соображения

Svelte — это фреймворк с открытым исходным кодом, но сообщество не уделяет времени разработке полезных библиотек для работы с ним.

Например, если вы попытаетесь найти библиотеки пользовательского интерфейса для работы с Desing System, вы можете найти несколько библиотек для Material Design с большим количеством проблем с доступностью. Возможно, одним из лучших вариантов является Carbon Desing, но все это зависит от того, какое приложение вы хотите разработать. Кроме того, интеграция этих библиотек требует дополнительного набора дополнительных настроек в вашем проекте, чтобы все работало.

Рекомендации по использованию некоторых библиотек пользовательского интерфейса:

  • Smelte
  • Carbon Desing

Кроме того, у svelte есть tech dep для некоторых полезных функций и компонентов, которые они еще не предоставили. Например, они предоставляют способ динамического рендеринга компонентов (<svelte:component />), но не способ использования динамического элемента (я представляю, что-то вроде <svelte:element/>). Вы можете проверить текущий статус этой возможности в этом выпуске #2324.

Тем не менее, это фреймворк в стадии разработки, и в нем еще много улучшений. В настоящее время Рич Харрис, создатель svelte, переходит в Vercel, так что нам стоит ждать появления новых и крутых вещей. Проверьте новости

Заключение

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

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

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

Оцените статью
devanswers.ru
Добавить комментарий