Краткий обзор фреймворка Svelte29.02.2024 09:30

Привет, Хабр!

Svelte, в его сущности, предлагает нам подход меньше значит больше. Вместо того чтобы полагаться на виртуальный DOM, как большинство фреймворков, Svelte переносит эту работу на этап сборки. Результат? Более чистый и эффективный код, который выполняется непосредственно в браузере. Каждый компонент в Svelte компилируется в самодостаточный JavaScript.

Установка

Svelte требует Node.js версии не ниже 10.

Самый простой способ начать работу с Svelte — использовать оф.шаблон Svelte, который можно склонировать с помощью degit:

npx degit sveltejs/template svelte-app

Команда создаст новую директорию svelte-app с базовой структурой проекта Svelte.

Установим зависимости в директории:

cd svelte-app
npm install

Запуск сервера:

npm run dev

Серв доступен в браузере по адресу http://localhost:5000, все изменения автоматом применяются

Основные файлы проекта находятся в директории src, App.svelte является основным компонентом приложения.

Основной синтаксис

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

Пример простого компонента Greeting.svelte:

Hello {name}!

Компонент принимает проп name и отображает приветствие. Стили внутри компонента изолированы.

Для использования компонента в другом компоненте или приложении его нужно импортировать и затем разместить в разметке как тег:

Компоненты в Svelte могут реагировать на изменения своих пропсов и внутренних переменных, автоматически переписываясь при их изменении:

 count += 1}>
  Clicked {count} {count === 1 ? 'time' : 'times'}

Компонент отображает кнопку, которая увеличивает счетчик при каждом клике.

Слоты позволяют компонентам принимать произвольный контент, который может быть определен в момент использования компонента:

Использование компонента Modal с пользовательским содержимым:

  
This is a modal window

Svelte имеет хуки жизненного цикла компонента, такие как onMount, onDestroy, beforeUpdate и afterUpdate, т.е можно выполнять код в определенные моменты жизни компонента:

Маршрутизация и управление состоянием

SvelteKit использует файловую систему для определения маршрутов. Каждый файл в директории src/routes становится частью маршрутизации приложения. Например, файл src/routes/about.svelte автоматически соответствует маршруту /about:

{data.message}

Функция load юзается для загрузки данных до рендеринга компонента

Управление состоянием обычно достигается с помощью реактивных хранилищ:

  Clicked {$count} { $count === 1 ? 'time' : 'times' }

Создали реактивное хранилище count, которое изменяется при каждом клике на кнопку.

Реализацию аутентификации и обработки форм на svetle предоставляет интеграцию на стороне сервера и клиента:

  
  
  Login

При отправке формы выполняется функция handleSubmit, которая отправляет данные на сервер для аутентификации пользователя.

Логические блоки

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

{#if loggedIn}
  
Welcome back!
{:else}
  
Please log in.
{/if}

Текст »Welcome back! » будет отображаться, если loggedIn истина; иначе, будет отображаться »Please log in.».

Блок each используется для итерации по массивам или объектам и отображения элементов списка:

  {#each cats as cat}
    
{cat}
  {/each}

Для каждого элемента массива cats создается элемент списка

{#await promise}
  
Loading...
{:then data}
  
{data.message}
{:catch error}
  
Error: {error.message}
{/await}

{#key user.id}
  
{user.name}
{/key}

{#if depth > 0}
  
{/if}