Svelte получил много похвал за последние два года и далек от того, чтобы быть «просто еще одним интерфейсным фреймворком». Он стал «прорывом года» в опросе State of JS 2019, а затем возглавил рейтинг удовлетворенности в 2020 году. Он также был признан самым любимым
Svelte привлекает разработчиков сочетанием небольшого размера пакета, очень хорошей производительности и простоты использования. В то же время, он поставляется с множеством вкусностей. Уже предоставлено простое решение для управления состоянием, а также готовые к использованию переходы и анимации. Это вводное руководство прольет свет на то, как Svelte достигает этого. В следующих руководствах этой серии более подробно рассказывается о том, как реализовывать приложения с помощью Svelte, используя различные возможности, предоставляемые Svelte.
Предыстория стройной
Но сначала немного предыстории Svelte. Хотя он стал популярным только в начале
Первый коммит на GitHub был сделан в конце 2016 года. Его создателем является Рич Харрис, волшебник с открытым исходным кодом, самым выдающимся другим изобретением которого является Rollup, современный сборщик. Рич Харрис в то время работал графическим редактором в новостном журнале The Guardian. Его ежедневной рутиной было создание интерактивных визуализаций для
Из этих потребностей родился Svelte. Начав с отдела новостей, Svelte быстро набрал небольшую аудиторию в сообществе разработчиков открытого исходного кода. Но только в апреле 2019 года Svelte действительно стал известен миру. Эта дата ознаменовала выпуск версии 3, которая была полностью переписана с упором на опыт разработчиков и доступность. С тех пор популярность Svelte сильно возросла, к команде присоединилось больше сопровождающих, а Рич Харрис даже присоединился к Vercel, чтобы работать над Svelte на постоянной основе.
Подробные руководства по Svelte и его отличиям от React и Vue см. в Svelte 3: JavaScript Framework на основе радикального компилятора.
Создание простого списка книг
Давайте погрузимся в Svelte! Мы создадим небольшой список книг, который позволит нам добавлять и удалять книги из нашего списка для чтения. Окончательный результат будет выглядеть примерно так, как показано на изображении ниже.
Окончательное приложение
Мы начнем с создания нашего проекта из шаблона проекта. Мы будем использовать официальный шаблон Svelte. В качестве альтернативы можно использовать шаблон на базе Vite или использовать SvelteKit, фреймворк поверх Svelte для создания полноценных приложений со встроенной маршрутизацией, но в этом руководстве мы сохраним его как можно более простым.
После загрузки шаблона перейдите в его папку и запустите npm install, которая загрузит все пакеты, которые нам нужны для работы. Затем мы переключимся на App.svelte, где заменим содержимое
Add Book
My Books
- A book
Мы можем написать приведенный выше код непосредственно на верхнем уровне файла Svelte; нам не нужно добавлять
Теперь вопрос в том, как вставить туда динамические части. Мы начнем с добавления статического списка в скрипт и отрисовки его через цикл:
Add Book
My Books
{#each books as book}
{/each}
- {book}
Мы добавили scriptтег, в который мы поместили нашу логику JavaScript, связанную с компонентом. Эта логика выполняется каждый раз при монтировании компонента. Мы также улучшили HTML с помощью специального синтаксиса Svelte, чтобы создать цикл и вывести название каждой книги. Как видите, Svelte имеет отдельный синтаксис для блоков потока управления, в отличие от Vue или Angular, которые добавляют такую функциональность в виде специальных атрибутов. Это делает код более читабельным, так как его легче обнаружить. Это также делает ненужным создание
Название книги выводится путем окружения переменной фигурными скобками. В общем, всякий раз, когда вы сталкиваетесь с фигурной скобкой в шаблоне, вы знаете, что вводите
Реакция на ввод данных пользователем
Теперь мы можем отображать произвольный список названий книг, определяемый нашей booksпеременной. Как насчет добавления новой книги? Для этого нам нужно усилить нашу логику в
Add Book
My Books
{#each books as book}
{/each}
- {book}
Мы добавили новую переменную с именем newBook, которая должна отражать входное значение. Для этого мы привязываем его к , написав bind: value={newBook}. Это устанавливает двустороннюю привязку, поэтому каждый раз, когда пользователь вводит текст в , newBookобновляется, и если newBookобновляется в
Как видите, мы просто добавляем
My Books
{#each books as book}
{/each}
- {book}
Вот и все! Просто импортировав один из встроенных переходов и применив его, добавив transition: fadeк элементу, мы получим этот плавный переход. Наше
Add Book
My Books
{#each books as book}
{/each}
- {book}
Архитектурные соображения
Мы увидели, как написать небольшое приложение на Svelte, используя всего 32 строки кода. Мы только поцарапали поверхность, конечно. Полноценному приложению требуется
Например, имеет смысл выделить отображение одного элемента списка дел в отдельный компонент, так как мы добавим такие функции, как редактирование имени на месте или пометка его как выполненного. Наличие всего этого в одном компоненте со временем стало бы трудным поддерживать. К счастью, использовать другие компоненты так же просто, как импортировать их как импорт по умолчанию из другого файла Svelte и взаимодействовать с ними аналогично тому, что мы уже видели с обычными элементами DOM. Мы рассмотрим взаимодействие компонентов более подробно в части 5 этой серии.
Другим примером может быть управление задачами. Прямо сейчас они обрабатываются внутри компонента и нет связи с серверной частью. Если бы мы добавили вызовы API, мы бы смешали логику пользовательского интерфейса с взаимодействием с серверной частью, которое обычно лучше обрабатывается вне компонентов для лучшего разделения задач. Для этого мы можем использовать магазины Svelte, которые мы рассмотрим в части 4.
Как видите, у Svelte есть решения для всех наших требований, и мы рассмотрим их в ходе этой серии статей.
Готов, Сет... Стройный?
Итак, безопасно ли использовать Svelte для вашего следующего проекта? Ваш менеджер может спросить, будет ли Svelte существовать в ближайшие годы или выгорит, как предыдущие звезды фреймворка. Нет ни одной крупной компании, поддерживающей всю разработку Svelte, как это делается для Angular и React, но Vue уже показал, что это не проблема. Более того, как было сказано в начале, Рич Харрис, создатель Svelte, теперь работает над ним на постоянной основе. Учитывая непрерывный рост популярности Svelte, нет никаких признаков того, что в ближайшие годы он никуда не денется.
Еще одним аспектом выбора фреймворка является экосистема и ее инструменты. Экосистема все еще мала по сравнению с React, но новые библиотеки появляются каждый день, и уже есть несколько очень хороших библиотек компонентов. В то же время, поскольку Svelte настолько близок к ванильному HTML и JavaScript, очень легко интегрировать любую существующую обычную библиотеку HTML/JavaScript в вашу кодовую базу без необходимости использования
Что касается инструментов, Svelte выглядит неплохо. Существует официальное расширение VS Code, которое активно поддерживается, а также базовый языковой сервер, который может использоваться многими другими IDE для интеграции Intellisense. IntelliJ также имеет плагин для Svelte и недавно нанял его создателя для работы в JetBrains. Также существуют различные инструменты для интеграции Svelte с различными упаковщиками. И да, вы также можете использовать TypeScript со Svelte.
Если вы хотите создать полноценный
Краткие факты о Svelte
Вкратце, вот важные моменты, которые следует помнить о Svelte:
у него есть штатный сопровождающий
у него хорошая оснастка
его характеристики стабильны
его экосистема растет
SvelteKit доступен для быстрого создания приложений
Следующие шаги
Svelte определенно готов к использованию в вашем следующем проекте!
Это была первая часть серии из 6 статей о SitePoint Premium. Во второй части мы подробно рассмотрим синтаксис шаблона. В части 3 мы рассмотрим реактивные операторы и то, как они помогают нам реагировать на изменения переменных или получать вычисляемые переменные. В части 4 будут рассмотрены хранилища, которые помогут нам с логикой вне файлов Svelte и между ними, и которые мы также можем использовать для управления состоянием. В части 5 рассматриваются различные концепции взаимодействия компонентов. Наконец, в части 6 мы рассмотрим тестирование приложений Svelte.