О Svelte я узнал в прошлом году от коллеги, который, в свою очередь ознакомился со статьей на Хабре. В нашей компании тогда вовсю использовался (и до сих пор используется) VueJS, и, в принципе нас он устраивал, потому я не уделил Svelte достаточно внимания тогда, и забыл про него, поставив его в один ряд со множеством других малоизвестных JS-инструментов, до изучения которых никогда не доходят руки.
Однако, в последнее время я всё чаще встречаю упоминания о Svelte в разных источниках, и посчитав, но нет дыма без огня, перешел на главную страницу проекта Svelte, дабы посмотреть, что это за зверь.
Тут мы узнаем, что Svelte, по мнению его разработчиков, является принципиально новым подходом к созданию интерфейсов. Утверждается, что в отличии от React и Vue, которые основную работу делают в браузере, Svelte переносит эту работу на этап сборки приложения.
Вместо того, чтобы сравнивать состояния виртуального DOM, Svelte создаёт код, который может точечно обновить DOM при изменении состояния приложения.
Из вступительной статьи на сайте Svelte мы узнаем, что актуальная версия Svelte сейчас - третья, которая вышла в апреле 2019 года.
Svelte - компонентный фреймворк, в этом он похож на Vue или React. Важным же отличием стало то, что Svelte генерирует императивный код, который с минимальными затратами обновляет DOM. Vue или React работают с декларативным state-driven (событийно-ориентированным) кодом. Недостаток такого подхода в том, что браузер должен выполнять дополнительную работу по преобразованию декларативного кода в манипуляции с DOM. При этом ни о какой высокой производительности можно не говорить
В итоге мы понимаем, что Svelte позволяет создавать масштабные приложения с отличной производительностью. Чтобы это стало реальностью, пришлось переосмыслить саму концепцию реактивности. Получилось ли это? Попробуем выяснить, начнем с учебника, кликнув на соответствующую ссылку на официальном сайте Svelte .
Интерфейс учебника достаточно типичен для подобных проектов, слева дается изучаемый материал, справа у нас редактор кода с предварительным просмотром результата. Разберем раздел "Введение" учебника:
1. Основы.
Тут нам сообщают, что для понимания Svelte нам необходимо знание HTML, CSS и JavaScript, что вполне логично, ибо это фундамент фронтенд-разработки, три краеугольных камня.
Также рекомендуется проходить учебник последовательно, поскольку от главы к главе будут продемонстрированы ключевые и новые функции фреймворка, и более поздние главы будут базироваться на знаниях, полученных в ранних. Впрочем, никто не запрещает вам, используя оглавление перемещаться в произвольные места учебника.
Если в процессе выполнения какого-либо задания мы зайдем в тупик, или захотим сразу узнать правильное решение, можно будет воспользоваться кнопкой "Покажи мне". Однако, не рекомендуется ею злоупотреблять, поскольку лучше всего обучение проходит, когда код вбивается собственноручно, и лучше сто раз ошибиться и к конце концов найти правильное решение, чем просто получить готовый результат.
Как мы узнали ранее, Svelte - компонентный фреймворк, т.е. состоит из компонентов - автономных блоков кода, используемых многократно. Компонент изолирует и объединяет в один файл .svelte связанные между собой разметку, стили и поведение.
2. Добавление данных
Отображение статического текста нам неинтересно, потому добавим переменных. Для этого вставим в компонент тег <script>, а потом объявим переменную name.
<script>
let name = 'мир';
</script>
После этого мы можем использовать переменную в разметке:
<h1>Привет, {name}!</h1>
Внутри фигурных скобок можно разместить любое JavaScript-выражение, например вместо name можно использовать name.toUpperCase()
3. Динамические атрибуты
Кроме содержимого элементов мы также можем управлять их атрибутами. Возьмем, например, изображение:
<script>
let src = 'tutorial/image.gif';
</script>
<img src={src}>
Атрибут src мы получаем из переменной src, объявленной в блоке script
Вроде работает, однако, нас предупреждают, что у изображения должен быть атрибут alt, добавим его.
<img src={src} alt="man">
Если имя переменной и атрибута совпадают, можно использовать сокращенную запись:
<img {src} alt="man">
4. Стили
Стили в компонент добавляются с помощью блока <style></style> .
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
<p>Просто строка текста</p>
Тут необходимо отметить, что определенные в компоненте стили изолируются в нём, и, таким образом, нельзя затереть стили таких же элементов из других компонентов.
5. Вложенные компоненты
Как мы уже не раз говорили, Svelte - компонентный фреймворк, т.е. разбиение приложения на компоненты - альфа и омега разработки приложений.
Рассмотрим пример. У нас есть главный компонент App который выводит тексте "Просто строка текста ", и в него мы вставляем компонент Nested, который отображает надпись "Ещё одна строка текста".
Вставить компонент очень просто. Сначала мы его импортируем в блоке script:
<script>
import Nested from './Nested.svelte';
</script>
...а потом просто вставляем в разметку как HTML-элемент
<p>Просто строка текста</p>
<Nested/>
и получаем результат:
Обратим внимание, что стили элемента p в главном компоненте не распространяются на вложенный элемент, о чем мы говорили в предыдущем разделе.
6. HTML-код
Нередко возникают ситуации, когда у вас уже есть готовый html-код, который нужно просто вставить на страницу, для этого предусмотрен инструмент {@html ...}. Если, например, в переменной string хранится готовая html-разметка, то для ее отображения мы сделаем вот так:
<div>{@html string}</div>
Следует помнить что отображаемый таким образом код должен предварительно проверяться на безопасность, иначе можно нарваться на XSS-атаку на ваше приложение.
Итак, мы освоили базовые возможности Svelte, и уже хотим начать писать код в своём любимом редакторе. Нам понадобится интегрировать Svelte в инструменты сборки. Кроме того, надо будет настроить подсветку кода .svelte в редакторе.
Все это мы сделаем в следующей статье. Оставайтесь с нами, подписывайтесь, чтобы не пропустить новые статьи. Помните, лайки и подписки стимулируют развитие канала!
