Svelte — это фреймворк, не похожий ни на какой другой, и, согласно Stack Overflow, это самый любимый фреймворк в мире в 2021 году [1]. Документация по Svelte написана очень хорошо, и есть даже интерактивная IDE, которая поможет вам приступить к изучению Svelte. Основной акцент фреймворка сделан на том, чтобы позволить вам писать меньше кода, оставаясь при этом очень универсальным, легким и позволяя компилятору Svelte Kit делать всю тяжелую работу. Это компонентный фреймворк, использующий HTML-шаблоны, которые позволяют писать javascript или typescript непосредственно в файле .svelte.
Вы можете получить доступ к написанию Svelte, используя ссылку CDN или установив проект через node. Самый простой способ установить svelte — выполнить команды:
npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open
Это даст вам шаблон для начала вашего первого проекта. Создать простой «Hello World» так же просто, как написать обычный HTML, и вот вы уже написали свой первый svelte. Он обрабатывает javascript в тегах in script и передает переменную в HTML, обернув имя переменной в {}.
<script>
const name = "Jorge"
</script>
<p>Hello {name}!</p>
Вот так просто на вашей странице появится надпись «Hello Jorge». Стили записываются внутри тега style, и на него не влияют другие импорты, которые могут использовать те же теги. Это помогает модульности Svelte. Все в одном файле svelte. Чтобы понять, как добавлять обработчики событий, вот ссылка на то, что я сделал в Svelte REPL. Действие on:click с именем функции вызовет эту функцию, когда будет сделан щелчок. В Svelte также есть специальный синтаксис для записи непосредственно в HTML, который может использовать логику типа IF блоков, что выглядит следующим образом:
<script>
let toggler = { on: false };
function toggle() {
toggler.on = !toggler.on;
}
</script>
{#if toggler.on}
<button on:click={toggle}>
ON
</button>
{/if}
{#if !toggler.on}
<button on:click={toggle}>
OFF
</button>
{/if}
Этот код содержит две кнопки, которые переключают друг друга, когда нажимается кнопка on, она переключается на кнопку off, используя логику блока if в коде.
Компоненты Svelte — это просто отдельные файлы svelte, которые экспортируются из одного файла в другие. При экспорте просто используйте ключевое слово export, и теперь у вас есть доступ к экспортированному файлу svelte в файл, в который вы его импортировали. Импортированный файл также имеет доступ к переменным, которые вы, возможно, захотите использовать в своем коде. Это выглядит примерно так. Это может привести к очень модульному процессу проектирования, похожему на React.
Это лишь краткое введение в Svelte, но есть еще много интересного, и все это можно изучить с легкостью. Уэс Бос — отличный источник информации по этой теме, и я советую вам ознакомиться с его подкастом Syntax и страницей с учебниками. У Svelte также есть Discord с отличным сообществом. Надеюсь, эта статья подтолкнет вас к более глубокому погружению во фреймворк.
Некоторые полезные ссылки:
Официальный сайт Svelte
Сайт SvelteKit
MDN Docs