Краткий обзор фреймворка Svelte

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

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:

<script>
  export let name = 'world';
</script>

<style>
  p {
    color: purple;
  }
</style>

<p>Hello {name}!</p>

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

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

<script>
  import Greeting from './Greeting.svelte';
</script>

<Greeting name="Svelte" />

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

<script>
  export let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

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

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

<!-- File: Modal.svelte -->
<div class="modal">
  <slot></slot>
</div>

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

<Modal>
  <p>This is a modal window</p>
</Modal>

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

<script>
  import { onMount } from 'svelte';
  onMount(() => {
    console.log('Компонент был примонтирован');
  });
</script>

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

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

<script context="module">
  export async function load({ fetch }) {
    const res = await fetch('/api/data');
    const data = await res.json();

    return {
      props: { data }
    };
  }
</script>

<script>
  export let data;
</script>

<p>{data.message}</p>

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

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

<script>
  import { writable } from 'svelte/store';

  const count = writable(0);
</script>

<button on:click={$count += 1}>
  Clicked {$count} { $count === 1 ? 'time' : 'times' }
</button>

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

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

<script>
  let email = '';
  let password = '';

  async function handleSubmit() {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });

    if (response.ok) {
      // oбработка успешного входа
    } else {
      // oбработка ошибок
    }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <input type="email" bind:value={email} placeholder="Email">
  <input type="password" bind:value={password} placeholder="Password">
  <button type="submit">Login</button>
</form>

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

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

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

<script>
  let loggedIn = true;
</script>

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

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

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

<script>
  let cats = ['Whiskers', 'Bob', 'Tom'];
</script>

<ul>
  {#each cats as cat}
    <li>{cat}</li>
  {/each}
</ul>

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

await позволяет работать с асинхронными операциями, отображая различный контент в зависимости от состояния промиса:

<script>
  async function fetchData() {
    const res = await fetch('https://api.example.com/data');
    return res.json();
  }

  let promise = fetchData();
</script>

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

key используется для управления перерисовкой компонентов или элементов при изменении ключа:

<script>
  let user = { id: 1, name: 'cat' };
</script>

{#key user.id}
  <p>{user.name}</p>
{/key}

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

Спец теги

Тег <svelte:self> позволяет компоненту ссылаться на самого себя, что полезно для создания рекурсивных структур:

<!-- Component.svelte -->
<script>
  export let depth = 1;
</script>

{#if depth > 0}
  <svelte:self depth="{depth - 1}" />
{/if}

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

<script>
  import ComponentA from './ComponentA.svelte';
  import ComponentB from './ComponentB.svelte';
  let whichComponent = Math.random() > 0.5 ? ComponentA : ComponentB;
</script>

<svelte:component this={whichComponent} />

svelte:window и svelte:body позволяют добавлять обработчики событий непосредственно к window и body без необходимости использования js в <script> блоке:

<svelte:window on:keydown={handleKeydown} />

<svelte:body on:click={handleBodyClick} />

<svelte:head> позволяет добавлять элементы непосредственно в <head> документа HTML:

<svelte:head>
  <title>Page Title</title>
</svelte:head>

svelte:options предоставляет области видимости CSS с помощью immutable={true} или accessors={true} для автоматического создания геттеров и сеттеров для компонентных пропсов:

<svelte:options immutable={true} />

---

Подробнее с документацией можно ознакомиться здесь.

А про другие инструменты Web-разработки эксперты OTUS рассказывают в рамках практических онлайн-курсов.