Что такое Svelte и почему веб-разработчикам стоит обратить на него внимание
Рассказываю о малоизвестном, но перспективном и удобном фреймворке для JavaScript, о котором несправедливо забывают из-за популярности React и прочих аналогов.
Что такое Svelte?
Svelte (читается как «Звэлт», что в переводе означает «элегантный») – это фреймворк. Настройка над языком JavaScript, предлагающая радикально иной подход к созданию веб-интерфейсов. Svelte отличается от более традиционных решений в духе React и Vue как с точки зрения организации кода, так и с точки зрения преобразования этого кода в «готовый к употреблению продукт».
Svelte позволяет создавать более быстрые и менее ресурсоемкие приложения, при этом параллельно упрощая процесс разработки. Звучит слишком хорошо, но все действительно так и работает. Переход на Svelte действительно не несет за собой почти никаких недостатков.
Ключевые фишки Svelte
В Svelte много интересных решений, но я сосредоточусь на фундаментальных отличиях от конкурентов и особенностях синтаксиса, бросающихся в глаза тем, кто до этого не взаимодействовал с подобными технологиями вовсе.
Компонентный подход
Построение кода на базе объектов – главная составляющая ООП-парадигмы разработки. Такую же схему структуризации используют многие другие фреймворки, включая Vue и React, но Svelte эту идею возводит в абсолют. По умолчанию и без необходимости как-то модифицировать приложение Svelte провоцирует разработчика на написание кода, мелко дробленного на логические куски.
Приложение на базе Svelte состоит из объектов, каждый из которых содержит в себе три основных блока:
Svelte
Кибернетически улучшенные Web-приложения
Меньше кода
Создавайте компоненты без излишних конструкций на языках, которые вы уже знаете — HTML, CSS и JavaScript
Без виртуального DOM
Svelte компилирует ваш код в оптимальный ванильный JS — приложения запускаются быстро и остаются быстрыми
Честная реактивность
Больше никаких сложных библиотек управления состоянием — Svelte делает реактивным сам JavaScript
Svelte — это принципиально новый подход к созданию пользовательских интерфейсов. Когда традиционные фреймворки, такие как React и Vue, выполняют основную часть своей работы в браузере, Svelte переносит эту работу на этап компиляции, который происходит при сборке приложения.
Вместо использования таких тяжелых приёмов, как сравнение состояний виртуального DOM, Svelte пишет код, который точечно обновляет DOM при изменении состояния вашего приложения.
Компоненты Svelte построены поверх языка HTML с возможностью добавлять данные.
CSS изолируется внутри компонентов — больше никаких конфликтов стилей и борьбы спецификаций. Впрочем, вы можете использовать свою любимую библиотеку CSS-in-JS.
Запускайте эффективные точечные обновления, просто присваивая новые значения переменным. Компилятор сделает всю магию.
Создавайте красивые интерфейсы с помощью мощного движка переходов, встроенного прямо в фреймворк.
Кто использует Svelte?
Supporters
Svelte is free and open source software, made possible by the work of hundreds of volunteers and donors. Присоединяйся к нам or give!
Краткое введение в Svelte 3
Авторизуйтесь
Краткое введение в Svelte 3
IT Expert & Project Manager
Svelte — это не совсем фреймворк в том смысле, к которому мы привыкли, и, пожалуй, лучше рассматривать его как компилятор.
Когда вы создаете приложение Svelte 3, ваш код компилируется в чистый и оптимизированный JavaScript, без других зависимостей фреймворка, включенных в этот микс, что делает его очень крошечным. Таким образом, при разработке со всеми синтаксическими нюансами это выглядит как фреймворк, но затем фреймворк исчезает, когда компилируется код.
Инициализация проекта Svelte 3
И с помощью этой команды вы можете запустить сервер разработки:
А теперь вы можете зайти на http://localhost:5000, чтобы получить доступ к своему приложению.
Структура Svelte приложения
package.json
Точка входа JavaScript: main.js
Общая папка
Svelte файлы
Типичный файл Svelte будет выглядеть так:
Приятно думать, что вы можете использовать старый добрый JavaScript, CSS и HTML! Единственное отличие заключается в нескольких специфических для Svelte синтаксических вкраплениях в HTML и нескольких специальных правилах обработки некоторых JavaScript команд. О, и стили будут привязаны к компоненту, описанному в файле Svelte, так что нет необходимости использовать причудливые классы или беспокоиться о специфике за пределами компонента.
Создание компонента счетчика Counter
3–4 декабря, Онлайн, Беcплатно
Вот наша отправная точка:
Фигурные скобки в вашей разметке предназначены для интерполяции значений. Подойдет любой допустимый однострочный JavaScript-код, но чаще всего его просто интерполировать значения из нашего JavaScript-кода.
Привязка к событиям
Давайте добавим несколько кнопок, чтобы мы могли увеличивать или уменьшать счетчик:
Условные выражения
Двустороннее связывание значений
Иногда вы хотите, чтобы значение связывалось в обоих направлениях, например, когда вход формы должен брать свое значение из переменной в вашем компоненте, но изменение его значения также должно изменить значение этой переменной. Это легко сделать с Svelte! Давайте вместо этого отобразим наш счет в форме ввода и позволим пользователю установить текущий счет вручную:
Двухстороннее связывание осуществляется с помощью синтаксиса bind:value=
Запуск приложения
Когда будете готовы собрать приложение, просто выполните команду build :
И теперь общая папка будет содержать минимизированную и оптимизированную версию вашего скомпилированного пакета, готовую к отправке в CDN.
Svelte 3: Переосмысление реактивности
Буквально на днях произошло большое событие для сообщества SvelteJS, да и вообще, как мне кажется, для всего современного фронтенда — долгожданный релиз Svelte 3! Посему, под катом перевод статьи автора Svelte и прекрасное видео с его доклада на YGLF 2019.
Наконец-то он здесь
После нескольких месяцев, которые пролетели как пара дней, мы на седьмом небе от счастья потому, что можем объявить о стабильном релизе Svelte 3. Этот по-настоящему огромный релиз, результат сотен часов работы многих людей в сообществе Svelte, включая бета-тестеров, чьи бесценные отзывы помогали оттачивать дизайн фреймворка на каждом этапе этого пути.
Мы думаем, он вам понравится.
Что такое Svelte?
Svelte — это компонентный фреймворк, похожий на React или Vue, но с важным отличием. Традиционные фреймворки позволяют вам писать декларативный state-driven код, но не без наказаний: браузер должен выполнить дополнительную работу для преобразования этих декларативных структур в манипуляции с DOM, используя техники, такие как virtual DOM diffing, которые проедают имеющийся бюджет кадров отрисовки и добавляют обязанностей сборщику мусора.
Вместо этого Svelte работает во время сборки, преобразуя ваши компоненты в высокоэффективный императивный код, который с хирургической точностью обновляет DOM. В результате вы можете писать амбициозные приложения с отличными характеристиками по производительности.
Первая версия Svelte была посвящена проверке гипотезы — что специально созданный компилятор может генерировать надёжный код и обеспечивает отличный пользовательский опыт. Вторая версия была посвящена небольшим улучшениям, которые привели ряд вещей в порядок.
Svelte 3 — это уже существенный пересмотр. В течение последних пяти или шести месяцев мы уделяли особое внимание пользовательскому опыту разработчиков. Теперь можно писать компоненты с количеством шаблонного кода, значительно меньшим, чем где либо ещё. Попробуйте наш совершенно новый учебник и посмотрите, что мы имеем ввиду — если вы уже знакомы с другими фреймворками, думаем, вы будете приятно удивлены.
Чтобы эта возможность стала реальностью, нам сначала нужно было переосмыслить концепцию, лежащую в основе современных UI фреймворков: реактивность.
Перемещение реактивности в язык
В предыдущих версиях Svelte, вы должны были сообщить компьютеру, что какая-то часть состояния изменилась с помощью вызова метода this.set:
Он заставлял компонент реагировать. Кстати говоря, this.set практически идентичен методу this.setState, который использовался в классическом (до хуков) React:
Тут есть важные технические различия (как я объясняю в видео выше — React не реагирует), но концептуально это одно и то же.
Все изменилось с появлением хуков в React, которые управляют состоянием совсем по-другому. Многие фреймворки начали экспериментировать со своими собственными реализациями хуков, но мы быстро пришли к выводу, что это не то направление, куда бы мы хотели идти. Хуки имеют некоторые интригующие свойства, но они также включают в себя неестественный код и создают ненужную работу для сборщика мусора. Для фреймворка, который используется на embedded-устройствах, а также в тяжелых интерактивных анимациях, это не хорошо.
Поэтому мы сделали шаг назад и спросили себя, какой тип API был бы лучшим для нас… и поняли, что лучший API — это отсутствие API. Мы можем просто использовать язык. Обновление значения count и всех вещей, которые зависят от него, должно быть простым:
Поскольку мы являемся компилятором, мы можем сделать это, осуществляя фактическое присваивание за кулисами:
Важно отметить, что мы можем сделать всё это без лишних затрат и сложности использования прокси или аксессоров. Это просто переменная.
Новый облик
Не только компоненты получили подтяжку лица. Сам Svelte теперь имеет совершенно новый внешний вид благодаря удивительной дизайнерской работе Achim Vedam, создавшего новый логотип и веб-сайт, который переехал со svelte.technology на svelte.dev.
Мы также изменили наш слоган с «Магически исчезающего UI фреймворка» на «Кибернетически улучшенные web-приложения». У Svelte много сильных сторон — отличная производительность, небольшой размер бандла, доступность, встроенная инкапсуляция стилей, декларативные анимации переходов, простота использования, тот факт, что это компилятор и многие другие. Поэтому сосредоточение внимания на одной из них кажется несправедливым по отношению к другим.
Обновление с версии 2
Если вы уже являетесь пользователем Svelte 2, боюсь, потребуется ручное обновление ваших проектов. В ближайшие дни мы выпустим руководство по миграции и обновлённую версию утилиты svelte-upgrade, которая сделает всё возможное, чтобы автоматизировать процесс. Но изменения слишком существенные, поэтому не всё может быть обработано автоматически.
Такое решение далось нам не легко: надеюсь, что, испытав Svelte 3, вы поймете, почему мы сочли необходимым порвать с прошлым.
Все ещё впереди
Каким бы изнурительным ни был этот релиз, мы ещё не закончили. У нас есть масса идей как генерировать код умнее, более компактно, и длинный список пожеланий. Sapper, наш фреймворк для приложений в стиле Next.js, всё ёще находится в процессе обновления для использования совместно со Svelte 3. Проект сообщества Svelte Native, который позволяет писать приложения для Android и iOS на Svelte, продвигается вперед и заслуживает более полной поддержки со стороны ядра.
У нас пока нет множества расширений для редакторов, подсветки синтаксиса, наборов компонентов, devtools и т. д., которые есть у других фреймворков, и мы должны это исправить. И мы действительно хотим добавить первоклассную поддержку TypeScript.
Несмотря на всё это, мы считаем, что сейчас Svelte 3 — лучший способ создания веб-приложений. Потратьте час, чтобы пройти учебник и мы надеемся, что убедим вас в этом. В любом случае, мы хотели бы видеть вас в нашем Discord чате, русскоязычном канале Telegram и на GitHub — добро пожаловать всем, особенно вам.
P/S — Еще немного полезных ссылок
За работу над русскоязычным сайтом отдельное и большое спасибо AlexxNB! Гип-гип ура!
Почему SvelteJS возможно лучший фреймворк для новых веб-разработчиков
Любой веб-разработчик, который занимается этим хотя бы несколько лет, наверняка день за днем слышит подобный вопрос:
Я действительно хочу стать веб-разработчиком, но я не знаю с чего начать. Есть какие-то предложения?
Лет 10 назад ответ был очень прост. Просто создайте index.html, добавьте туда несколько тегов, сделайте заголовок красным с помощью CSS и подключите JQuery для обработки кликов!
Ох, как же все изменилось. Теперь мы работаем с инструментами сборки, маршрутизацией на стороне клиента, специальными фреймворками с причудливым рантаймом, привязывая везде «this», шаблонными литералами, CSS-in-JS… как же выбрать то, что важнее всего?
Все это привело к бесчисленным вариациям того, с чего можно начать с различной степенью «просто введите это сейчас, а я объясню позже». Некоторые побуждают новичков сразу изучать React или Vue, чтобы начать работу с современными практиками. В то время как другие кричат с вершин гор, что новичкам всегда следует начинать с основ. По правде говоря, у обоих подходов есть свои достоинства. Первый может вызвать у новичков восторг от таких штук как hot-reloading и компоненты, рискуя оставить слишком многое в стороне. В то время как второй заставляет новичков понять, как DOM работает под капотом, в то же время, возможно, отвлекая людей сложностью ванильного JS, от которой мы давно абстрагировались.
Вот почему нам нужна золотая середина. Способ начать работу с основами, в то же время впитывая в себя современные концепции, такие как разработка на основе компонентов, изолированный vs каскадный CSS, шаблоны, декларативные функции и т.д. и т.п.
Svelte, к вашим услугам
Все это довольно серьезные аргументы для более опытных разработчиков, но большинство новичков, вероятно, не смогли прочитать последний абзац без отрыва башки. К счастью, не волшебство компиляции делает Svelte настолько дружелюбным к новичкам, а его синтаксис.
Если вы никогда не видели компонент Svelte, вот простой пример:
Давайте разберемся в этом. Итак, во-первых, стоит отметить, что все это можно писать хоть в обычном .html файле, хоть в .svelte файле, если вашей душе угодно. Также мы видим некоторые знакомые теги, напоминающие разработку без фреймворка: style и script. Стили и JS код пишутся в этих тегах для правильного построения компонентов. Кроме того, это позволяет подсветке синтаксиса работать без дополнительных плагинов для редактора, таких как решения для CSS-in-JS. Кроме того, компилятор Svelte достаточно умен, чтобы по-умолчанию изолировать любые специфичные для компонента стили. Поэтому у вас не будет стилей протекающих между компонентами.
Вы также видите как что-то магическое происходит с JavaScript переменной name. Это блестящая новая концепция для Svelte 3, где любая переменная в скрипте вашего компонента доступна из разметки. У нас нет специального синтаксиса, который нужно изучать для управления состоянием. Нет ни Angular $scope, ни React this.state, ни data из Vue. Вместо этого, мы можем просто использовать обычные переменные для описания состояния, вызывая повторный рендеринг всякий раз, когда их значения изменяются.
Эта свобода от этого синтаксического «жаргона» означает, что создание компонента начинает походить на создание CodePen, только без необходимости задумываться о том, как подключить декларативную функцию JS к какому-то DOM селектору.
Еще одна приятная вещь заключается в том, что компоненты Svelte импортируются также легко, как и традиционные компоненты. Вы можете просто импортировать .html, так как Svelte знает как его развернуть:
Круто, но погодите минутку.
Некоторые читатели могут посчитать эту концепцию настолько же умопомрачительной, как и я. В то же время, другие, вероятно, имеют свои доводы против использования подобного подхода для обучения начинающих. Разве им не интересно как на самом деле работают манипуляции с DOM?
Ответ… возможно. Но когда кто-то только начинает (по крайней мере, из личного опыта), можно принять небольшую абстракцию ради более быстрого создания классных вещей.
Кроме того, так же как некоторые языки, например, Java и JS, абстрагировали управление указателями с помощью сборки мусора, большинство современных инструментов веб-разработки абстрагировались от манипуляций с DOM. За исключением более сложных крайних случаев, которые новичкам, вероятно, не понадобятся. Кстати, если вы ломаете голову над тем, что такое управление указателями, я думаю, что это лишь доказывает мою точку зрения. Таким образом, вместо того, чтобы заставлять новичков манипулировать DOM или осваивать специфичные для фреймворка способы управления состоянием, почему бы просто не позволить им обращаться к переменным напрямую из разметки? Теперь они могут изучать основные принципы управления состоянием компонентов не впадая в траур.
Хорошо, я вижу базовый пример, но у Svelte должны быть какие-то специфические особенности, чтобы все это работало
Без сомнения, это правда, но этого намного меньше, чем вы думаете. Одна часть синтаксиса Svelte предназначена для итеративного и условного отображения элементов DOM. Это работает очень похоже на map из JSX, но без всех этих вложенных скобок, в которых новички (и я) могут легко потеряться. Вот базовый способ, который генерирует список элементов из массива:
Опять же, я понимаю любую критику в отношении синтаксиса, но мне нравится то, насколько легко понять это. Вместо того, чтобы вкладывать JavaScript в наш HTML-код, мы просто говорим: эй, давайте сделаем цикл по этому массиву и создадим элемент для каждого из них.
Стоит упомянуть еще одну особенность Svelte, от которой я нахожусь не в таком восторге: синтаксис передачи пропсов компонентам. Да, он полностью функционален и прост в освоении, но, в тоже время, может показаться слишком магическим на вкус некоторых людей. Для обработки пропсов мы просто передаем их компоненту, куда бы он ни импортировался…
… и получаем эту переменную как экспортированный «let»:
Я полностью понимаю, что некоторым это покажется злоупотреблением «экспортом». Но по крайней мере, это соответствует тому, как начинающие должны концептуализировать модули: мы экспортируем то, к чему должны получить доступ за пределами компонента, и импортируем то, что хотим использовать в нашем компоненте.
Я мог бы преодолеть эту странность… но как насчет обязательного шага сборки?
Итак, еще одна критика по поводу начала работы с фреймворками — это необходимость использовать менеджер пакетов. Что означает… черт, использовать терминал!
Послушайте, я понимаю, что открывать эту штуку может быть крайне пугающим, с ее моно-шрифтом и жутким «cd» для перехода по каталогам. Но, честно говоря, это действительно не большое препятствие, когда вам нужна только одна команда для запуска. Кроме того, встроенный терминал в VS Code упрощает начало работы. Он даже открывается в нижней части окна прямо в вашем каталоге проекта!
На самом деле Svelte предлагает скачиваемый стартер, но я создал свой собственный стартовый шаблон, который просто использует Rollup для прямой загрузки. На самом деле, файл конфигурации длиной менее 30 строк! Для базового проекта Svelte это все каталоги и файлы, которые вам нужны:
/public
index.html
/src
index.html
app.js
rollup.config.js
package.json
Просто добавьте команду для запуска шага сборки в package.json, и все готово! Можно, конечно, сказать, что все дополнительные модули и файлы, которые нужны другим фреймворкам, не являются проблемой, если новичок их не трогает, но, на мой взгляд, чем меньше дополнительных вещей, тем лучше для новичков.
Ок, хорошо, это круто и удобно для начинающих. Но насколько это стабильный фреймворк?
Это очень актуальный вопрос для такого молодого фреймворка, как Svelte. Все примеры, которые я показал, используют синтаксис Svelte версии 3, которая на момент написания этой статьи все еще находится в бете. Как бы это ни было захватывающе, я бы подождал еще несколько месяцев, прежде чем спешить с ним на семинары по программированию. Тем не менее, Svelte предлагает действительно лаконичную страницу документации для версии 3, которая может облегчить начинающим работу.
Итак, давайте рассмотрим некоторые основные преимущества для изучения веб-разработки со Svelte:
Конечно, это совершенно нормально, если мне не удалось убедить вас в этой статье. Все хорошие статьи разжигали небольшую полемику! Но я надеюсь, что эта статья, по крайней мере, показала вам, насколько чертовски крутым и простым Svelte может быть для изучения.
Спасибо что прочли это!
Я — фронтенд веб-разработчик-в-процессе-обучения, всегда возящийся с чем-то новым. Я постараюсь регулярно публиковаться здесь, так что напишите, если вам понравилось!
От переводчика:
Спасибо что почитали данный перевод! Надеюсь эта статья сподвигнет вас посмотреть в сторону Svelte в качестве инструмента для обучения или даже нового проекта.
Приходите на мой 2-х часовой воркшоп по Svelte 3 на HolyJS Piter 24-25 мая. Кто хочет просто следить за развитием Svelte — welcome в русскоязычный телеграм канал SvelteJS. Будем рады вам!
И небольшой опрос, без привязки к фреймворку и технологии. Просто интересно ваше мнение.