Краткое руководство по Svelte 3

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

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

Если вы веб-разработчик, то, скорее всего, в последние месяцы работали с такими фреймворками, как Angular, React, Vue. Теперь появляется новая звезда, которая очень быстро набирает обороты и наверняка является альтернативой этим фреймворкам: Svelte!

Если вам нравится CodingTheSmartWay, подумайте о поддержке нас через Patreon. С вашей помощью мы сможем чаще выпускать руководства для разработчиков. Большое спасибо!

Svelte (https://svelte.dev/) предлагает новый подход к веб-разработке на основе JavaScript: вместо того, чтобы выполнять большую часть работы в браузере (на стороне клиента), Svelte переключает эту работу на этап компиляции, который выполняется во время разработки. Это означает, что клиенту не нужно доставлять код фреймворка. Вместо этого Svelte может создавать высокооптимизированный простой код JavaScript, который может напрямую интерпретироваться браузером. Нет необходимости загружать дополнительные библиотеки и код, чтобы иметь возможность запускать веб-приложение.

Такой подход делает веб-приложения Svelte очень быстрыми и эффективными. В этом руководстве вы познакомитесь с основами Svelte. Мы пройдем все этапы, необходимые для создания вашего собственного веб-приложения Svelte от начала до конца.

Если вам еще не нравится Svelte, это идеальное руководство для начала ... Давайте приступим!

Предпосылки

Прежде чем войти в Svelte и создать первый проект, нам нужно убедиться, что в системе установлен Node.js (и соответствующий менеджер пакетов Node.js NPM).

Установить Node.js очень просто. Вам просто нужно перейти на сайт Node.js https://nodejs.org/en/:

Загрузите установщик текущей версии для вашей платформы. Запустите установщик и следуйте инструкциям. Установщик проведет вас через шаги, необходимые для установки Node.js и NPM.

Кроме того, вам необходимо выбрать редактор кода. Рекомендуется использовать Visual Studio Code (https://code.visualstudio.com/):

Вы можете бесплатно скачать и использовать Visual Studio Code. Кроме того, вы можете установить плагин Visual Studio Code Svelte, который поможет вам с IntelliSense и подсветкой синтаксиса:

Создание вашего первого проекта Svelte

Теперь мы готовы создать наш первый проект Svelte с нуля. Создать новый проект очень просто, откройте новый терминал и выполните следующую команду:

$ npx degit sveltejs/template my-first-svelte-project

Эта команда создает новую папку проекта my-first-svelte-project и загружает в эту папку шаблон проекта svelte по умолчанию. Затем перейдите во вновь созданную папку проекта:

$ cd my-first-svelte-project

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

$ npm install

Эта команда гарантирует, что все пакеты, перечисленные в devDependencies в package.json, устанавливаются в папку node_modules. В следующем листинге вы можете увидеть раздел devDependencies в package.json:

devDependencies": {
    "npm-run-all": "^4.1.5",
    "rollup": "^1.10.1",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-node-resolve": "^4.2.3",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^4.0.4",
    "sirv-cli": "^0.4.0",
    "svelte": "^3.0.0"
  },

Особенностью Svelte является тот факт, что есть только devDependencies и нет раздела dependencies. Поскольку Svelte работает как компилятор, все необходимое обрабатывается и транслируется в простой код JavaScript во время разработки. По этой причине при запуске приложения никаких дополнительных зависимостей не требуется.

Теперь мы готовы запустить веб-сервер разработки с помощью следующей команды:

$ npm run dev

Нажав return, вы должны увидеть результат, аналогичный тому, что вы видите на следующем снимке экрана:

Здесь вы можете видеть, что приложение теперь работает на порту 5000, а веб-сервер вносит изменения с включенной перезагрузкой в реальном времени. Доступ к http: // localhost: 5000 в браузере приведет к следующему результату:

Структура проекта

Теперь, когда у нас есть запущенный первый проект Svelte, давайте подробнее рассмотрим структуру проекта:

Сначала мы видим, что папка node_modules включена. Эта папка содержит все пакеты, перечисленные в разделе devDependencies в package.json.

Папка public содержит результат компиляции, выполненной Svelte. Доступны файлы bundle.js и bundle.css, содержащие оптимизированный код JavaScript и CSS. Вы также найдете файл index.html, в который включен код JavaScript для bundle.js:

<!doctype html>
<html>
<head>
    <meta charset='utf8'>
    <meta name='viewport' content='width=device-width'>
    <title>Svelte app</title>
    <link rel='icon' type='image/png' href='favicon.png'>
    <link rel='stylesheet' href='global.css'>
    <link rel='stylesheet' href='bundle.css'>
</head>
<body>
    <script src='bundle.js'></script>
</body>
</html>

Папка src - это место, в котором вы будете хранить весь свой собственный код Svelte. Кроме того, папка по умолчанию содержит файлы main.js и App.svelte. Давайте посмотрим на эти fildes:

Внутри main.js вы должны найти следующие строки кода:

import App from './App.svelte';
const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});
export default app;

Это отправная точка приложения Svelte. Основной компонент приложения импортируется из App.svelte, и создается новый экземпляр приложения. В вызов конструктора передается объект конфигурации, содержащий следующие два свойства:

target: имеет значение document.body, чтобы указать, что выходные данные HTML, генерируемые компонентом приложения, должны быть вставлены в тело документа.
props: назначается объект, содержащий свойства, которые должны быть переданы в компонент приложения.

Теперь давайте посмотрим на код, доступный в App.svelte:

<script>
    export let name;
</script>
<style>
    h1 {
        color: purple;
    }
</style>
<h1>Hello {name}!</h1>

Это типичная реализация компонента Svelte, которая разделена на три блока:

Раздел сценария: Этот раздел содержит код JavaScript компонента. В этом случае переменная name определяется как свойство (с помощью ключевого слова export).
Раздел стиля: Раздел стиля содержит код CSS, который привязан к компоненту.
Раздел шаблона: Раздел шаблона содержит код разметки (и специальные улучшения Svelte), которые используются для генерации вывода HTML компонента.

Создание вашего первого компактного компонента

Теперь, когда у вас есть первый обзор исходной структуры проекта, мы готовы добавить в проект дополнительный пользовательский компонент Svelte, создав новый файл src / Greeting.svelte и вставив следующую строку кода :

<h2>Hello World!</h2>

Это очень простой компонент, состоящий только из одной строки кода шаблона, выводящей текст «Hello World!» как заголовок.

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

<script>
    import Greeting from './Greeting.svelte';
    export let name;
</script>
<style>
    h1 {
        color: purple;
    }
</style>
<h1>Hello {name}!</h1>
<Greeting/>

Во-первых, необходимо добавить соответствующий оператор импорта в раздел сценария, а во-вторых, HTML-элемент ‹Greeting /› необходимо вставить в код шаблона компонента App.

Используя этот HTML-элемент, мы гарантируем, что HTML-вывод компонента Greeting вставлен в вывод компонента App.

Укладка

Добавить код CSS в компонент Svelte очень просто. Как было показано ранее, единственное, что необходимо, - это блок сценария с соответствующим кодом CSS внутри. Например. измените содержимое Greeting.svelte на следующее, чтобы добавить дополнительный стиль к выходным данным:

<style>
    h2 {
        color: purple;
        font-family: 'Comic Sans MS';
        font-size: 2em;
    }
</style>
<h2>Hello World!</h2>

Свойства и вычисленные свойства

Каждый компонент может получать данные через компоненты. Чтобы добавить компоненты к компоненту, вам просто нужно добавить переменные в раздел сценария и объявить эти переменные с помощью ключевого слова export. Например. добавьте следующие два свойства в компонент Приветствие:

<script>
    export let first_name;
    export let last_name;
</script>

Также измените код шаблона на:

<h2>Hello {first_name} {last_name}</h2>

После внесения этих изменений вы готовы передавать значения при использовании компонента в App.svelte:

<Greeting first_name="Steve" last_name="Smith"/>

Кроме того, Svelte также поддерживает вычисляемые свойства. Ниже вы можете увидеть, что добавлено вычисляемое свойство name:

<script>
    export let first_name;
    export let last_name;
    $: name = first_name + " " + last_name; 
</script>
<style>
    h2 { 
        color: purple;
        font-family: 'Comic Sans MS';
        font-size: 2em;
    }
</style>
<h2>Hello {name}</h2>

Вычисленные свойства полностью реактивны. Это означает, что при изменении некоторых зависимых переменных (first_name или last_name) значение имени обновляется автоматически.

Логика

В Svelte можно напрямую добавить логику в шаблон. Посмотрим, что это значит:

Если-Блок

Ниже вы можете увидеть новый компонент, созданный в src / LogIn.svelte:

<script>
    let user = { loggedIn: false };
    function toggle() {
        user.loggedIn = !user.loggedIn;
    }
</script>
{#if user.loggedIn}
    <button on:click={toggle}>
        Log out
    </button>
{/if}
{#if !user.loggedIn}
    <button on:click={toggle}>
        Log in
    </button>
{/if}

Этот компонент выводит простую кнопку. При нажатии на кнопку состояние меняется с входа в систему на выход из системы. В зависимости от состояния кнопка отображается либо с текстом «Выйти» (если состояние зарегистрировано), либо «Войти» (если состояние вышло из системы).

Состояние отслеживается переменной с именем user, которая является логическим свойством loggedIn. В зависимости от значения этого свойства шаблон выводит кнопку с соответствующим текстом. Это контролируется с помощью синтаксиса {#if [condititon]} ... {/if} в коде шаблона.

Чтобы увидеть вывод компонента LogIn, не забудьте включить соответствующий оператор импорта в src / App.svelte:

import LogIn from './LogIn.svelte';

И добавьте HTML-элемент <LogIn /> в код шаблона:

<LogIn />

If-Else-Block

В предыдущем примере для управления выводом кнопок используются два блока {#if [condititon]} ... {/if}. Это полностью работает, и вы можете переключаться между двумя состояниями, нажимая кнопку. Однако код можно изменить так, чтобы он содержал только один блок {#if [condititon]} ... {/if}, добавив также ветку {:else}:

<script>
    let user = { loggedIn: false };
    function toggle() {
        user.loggedIn = !user.loggedIn;
    }
</script>
{#if user.loggedIn}
    <button on:click={toggle}>
        Log out
    </button>
{:else}
    <button on:click={toggle}>
        Log in
    </button>
{/if}

Каждый блок

Svelte предоставляет вам доступ к другому элементу шаблона, который упрощает создание вывода для списка. Давайте посмотрим на следующий пример, который вставляется в новый файл FrameworkList.svelte:

<script>
    let frameworks = [
        {id: 1, name: 'Svelte'},
        {id: 2, name: 'Angular'},
        {id: 3, name: 'React'},
        {id: 4, name: 'Vue'}
    ]
</script>
<h1>List of Frameworks</h1>
<ul>
    {#each frameworks as {id, name}}
        <li>
            {id}: {name}
        </li>
    {/each}
</ul>

Прежде всего создается массив и назначается переменной frameworks. Каждый элемент массива представляет собой объект, состоящий из двух свойств.

Для вывода данных используется блок {#each}… {/ each}. Для каждого элемента в вывод HTML добавляется элемент ‹li›.

Чтобы включить этот новый компонент FrameworkList в App.svelte, добавьте следующий оператор import:

import FrameworkList from './FrameworkList.svelte';

И не забудьте добавить соответствующий HTML-элемент в код шаблона:

<FrameworkList />

События

Далее давайте посмотрим на события в Svelte. В предыдущих примерах мы уже видели первый пример реакции на событие нажатия кнопки:

<button on:click={toggle}>

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

Давайте посмотрим на второй пример, который вставляется в новый файл компонента EventDemo.svelte:

<script>
    let m = { x: 0, y: 0 };
    function handleMousemove(event) {
        m.x = event.clientX;
        m.y = event.clientY;
    }
</script>
<style>
    div {
        width: 300px;
        height: 300px;
        color: purple;
        background: lightseagreen;
    }
</style>
<div on:mousemove={handleMousemove}>
    The mouse position is {m.x} x {m.y}
</div>

Здесь мы реагируем на событие перемещения мыши в области div, добавляя к элементу следующий атрибут:

on:mousemove={handleMousemove}

Функция handleMousemove зарегистрирована как обработчик события mousemove. Каждый раз, когда мышь перемещается в области div, запускается событие и вызывается функция. Затем функция обновляет координаты x и y мыши в m.x и m.y.

Чтобы сделать все видимым, добавьте соответствующий оператор импорта в App.svelte:

import EventDemo from './EventDemo.svelte';

И не забудьте включить элемент <EventDemo /> в код шаблона.

Привязки

И последнее, но не менее важное, давайте рассмотрим привязки в Svelte. Снова мы начинаем с простого практического примера, чтобы понять концепцию. В BindingDemo.svelte добавьте следующий пример кода:

<script>
    let name = "Sebastian"
</script>
<input bind:value={name}>
<h1>Hello {name}</h1>

Значение элемента ввода привязано к переменной name. Это означает, что привязка работает в двух направлениях. Первоначально значение имени отображается в элементе ввода. Когда пользователь изменил значение элемента ввода на значение имени, обновляется соответственно.

На следующем снимке экрана вы можете увидеть полный вывод браузера после того, как все пользовательские компоненты Svelte были включены и добавлены в компонент App:

Заключение

По сравнению с фреймворками и платформами веб-разработки, такими как Angular, React и Vue.js, Svelte представляет новый подход к веб-разработке на основе JavaScript. Используя подход компилятора, Svelte гарантирует, что клиенту будет доставлен только хорошо оптимизированный простой код JavaScript, CSS и HTML.

Svelte очень легко освоить. Фреймворк сочетает в себе лучшие элементы синтаксиса Angular, React и Vue. Исходный код легко читается, поэтому вы сможете быстро продвинуться в реализации вашего первого веб-приложения Svelte. Просто попробуйте.

Краткое руководство по Svelte 3