Краткий обзор фреймворка 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 рассказывают в рамках практических онлайн-курсов.