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

cd8f74af87d3228141b2dba31bc77324.png

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

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 могут реагировать на изменения своих пропсов и внутренних переменных, автоматически переписываясь при их изменении:

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

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

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


  
This is a modal window

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

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

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






{data.message}

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

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

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

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

При отправке формы выполняется функция 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 позволяет работать с асинхронными операциями, отображая различный контент в зависимости от состояния промиса: 

    

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

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

    

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

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

    Спец теги

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

    


{#if depth > 0}
  
{/if}

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

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

    Рейтинг@Mail.ru