Почему стоит использовать Svelte для своих веб-проектов

Автор оригинала: Vaniukov
  • Перевод
Если вы занимаетесь веб-разработкой, вы, вероятно, слышали о Svelte Js. Тем не менее, думаю, вам будет интересно, почему он набирает популярность и какими интересными преимуществами для веб-разработчиков обладает.

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


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

Что такое Svelte и в чём его преимущества?


Некоторым разработчикам Svelte JS известен как самый популярный фронтенд-фреймворк из не вошедших в главную шестёрку State of JavaScript в 2018. О Svelte есть статья на Википедии, но появилась она всего полгода назад, поэтому информации там немного.

Svelte был задуман как фреймворк, но, по сути, это компонентный фреймворк, созданный для компиляции компонентов на этапе сборки. Благодаря такому подходу, можно загружать всего один bundle.js на страницу для рендера всего приложения.

Проще говоря, с помощью Svelte вы пишете компоненты, используя HTML, CSS и JavaScript. В процессе разработки фреймворк компилирует их в небольшие автономные JavaScript-модули. Таким образом гарантируется выполнение минимума работы со стороны браузера, что делает веб-приложение быстрее, а написание кода — проще.

Вот краткое описание Svelte от авторов:


Источник: Svelte.dev

Благодаря всему этому, Svelte Mobile является одним из лидеров в плане стартовой производительности («startup performance»). У других видов оптимизации таких возможностей нет. Svelte достигает столь выдающихся результатов за счёт использования доступного браузерного компилятора JavaScript, а не какого-либо стороннего. Таким образом мы получаем отличное решение для веб-разработки среди других популярных фреймворков и языков программирования.

Так Svelte достигает точной реактивности кода и увеличения производительности, что является отличной рекламой фреймворка и для разработчиков, и для владельцев бизнеса. Помимо этого, ещё одно преимущество Svelte для разработчиков — удобство для новичков и чёткая синтаксическая структура.

Обзор архитектуры Svelte


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

Как Svelte работает


Попробую объяснить принцип работы Svelte самыми простыми словами:

  1. Открываешь сайт.
  2. Рендеришь страницу на чистом JS.
  3. Передаёшь страницу своим коллегам [если работаешь не один].
  4. Коллеги ожидают от страницы реальной реактивности.
  5. Если они её находят, приложение/сайт должно работать бесперебойно не только в тестовом режиме, но и в бою.


Svelte JS vs. React vs. Vue: сравнение


Многие инженеры сравнивают Svetle.Js с другими фреймворками. Наиболее известные альтернативы — React и Vue.

Самые популярные веб-фреймворки, такие как Angular, React и Vue.js основываются на принципе ожидания загрузки кода для сборки виртуального DOM. Только после этого они могут отрисовывать страницу, используя библиотеку.

Например, React, разработанный Facebook в 2011 году, сделал реактивное программирование достаточно популярным. Этот фреймворк впервые начал использовать виртуальный DOM. Он разделяет обработку событий, манипуляцию атрибутами и ручное обновление DOM, которое в противном случае потребовалось бы для создания приложения. Это и стало ключевым фактором, сделавшим React столь привлекательным.

Svelte, тем временем, является компилятором. Он компилирует ваши компоненты в JavaScript вместо того, чтобы полагаться на концепции, вроде Virtual DOM для обновления браузерного DOM. Благодаря Svelte typescript стало возможным выстроить приложение значительно эффективнее. Вы можете писать свои компоненты, используя CSS, HTML и JavaScript, а в процессе сборки Svelte компилирует их в отдельные модули JavaScript.

В результате, Svelte 3 строит DOM с меньшим весом. Например, реализация TodoMVC на Svelte в сжатом виде весит 3.6 КБ. Для сравнения — React плюс ReactDOM, даже без кода приложения, весит примерно 45 КБ в сжатом виде. Полностью загрузить TodoMVC на React занимает у браузера в 10 раз больше времени, чем на Svelte.

Правда, сложно непредвзято оценить производительность Svelte в сравнении с React, поскольку фреймворки очень разнятся по своей сути.

И всё же, если вы хотите узнать больше подробностей о практическом сравнении этих веб-фреймворков, полезно будет посмотреть данное видео.


По данным GitHub, Svelte Native значительно быстрее, чем Ember, Angular, React, Ractive, Preact, Mithril или Riot. Он даже способен конкурировать с Inferno, который, вероятно, является самым быстрым UI-фреймворком в мире на данный момент. В итоге это и является решающим преимуществом, ведь более высокая скорость приложения может продвинуть вас вперёд конкурентов.

Компоненты Svelte


Давайте копнём глубже в детали структуры Svelte. Любой компонент PWA [Progressive Web Application] на Svelte может содержать три раздела: скрипт, стиль и шаблон. Вот более подробное описание того, что имеется в виду:

Тег скрипта: опциональный блок JavaScript с объявлениями функций и переменных, используемых внутри компонента.

Тег стиля: еще один опциональный блок. Воспринимайте его как обычный тег стиля HTML, с одним критическим отличием. Правила, описанные внутри данного блока, относятся только к текущему компоненту. Применение стиля к элементу P не повлияет на все параграфы на странице. Это здорово, ведь пропадает нужда придумывать классы для разных элементов. То есть, вам попросту не удастся случайно переопределить другое стилевое правило.

Блок шаблона: это последний и единственный обязательный блок, обычно — тег H1. Это и представление и вид [view] вашего компонента. Он тесно связан с блоками скриптов и стилей, поскольку в них определяется его поведение и оформление.

Чтобы получить лучшее представление о создании всех этих компонентов, предлагаю ознакомится с кратким и понятным объяснением от A shot of code:


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

Также стоит отметить, что Svelte хорошо взаимодействует с JavaScript переменной, называемой name. Это новая концепция из Svelte v3. Любая переменная в скрипте вашего компонента теперь может быть доступна из HTML-разметки. И при этом нет никакого специфического для фреймворка синтаксиса, который вам потребуется выучить для управления состояниями. Вам не нужно иметь дело с data Vue, $scope Angular или this.state React. Вместо этого, вы можете везде использовать let для достижения назначаемых значений состояния. Изменение значений каждый раз автоматически вызывает пере-рендер.

Вот так это выглядит на практике:


Создание компонента Svelte похоже на работу с CodePen. При этом не нужно задаваться вопросом, как подключить декларативную функцию JS, которую вы узнали через какой-нибудь DOM query-selector. Svelte не будет влиять на window listeners или callback functions. Эти основы остаются, как и должно быть.

Ещё одним приятным моментом данных компонентов является то, что они так же приоритетны, как и традиционные. Все, что нужно сделать — импортировать .html и Svelte поймет, как его развернуть.

Что ещё нужно знать о Svelte.js


Поговорим об остальных важных в процессе разработки преимуществах Svelte по сравнению с другими фреймворками.

Beginner-Friendly


Ранее мы упоминали, что причина популярности Svelte отчасти состоит в простоте для новичков. При его использовании нет необходимости манипулировать DOM. Также не нужно постигать специфичные для фреймворка врапперы состояний. Доступ к переменным можно получить непосредственно из разметки, а это значительно упрощает процесс создания приложения. Работая со Svelte, программисты могут изучить основные принципы работы состояния компонентов, не запутываясь в деталях.

Svelte предоставляет свой синтаксис условных операторов и циклов для отображения элементов DOM. Принцип работы здесь похож на JSX. Однако, все эти вложенные скобки, в которых новички могут легко потеряться, не так уж и важны.

Есть одна странность Svelte, о которой стоит упомянуть: он передает свойства в компоненты. Этот фреймворк легко выучить и он полностью функционален, но, на вкус некоторых разработчиков, синтаксис слишком экзотичен.

Обратная совместимость


Ранее, если требовалось интегрировать, например, какой-нибудь виджет календаря или любой другой в ваше приложение, сделать это можно было только с помощью той же версии фреймворка, на котором построен виджет. То есть, если вы собираете приложение в Angular, а виджет построен в React, вам не удастся его интегрировать. Однако, если виджет или ваше приложение построено с использованием Svelte, это становится возможным.

Разделение кода


Допустим, вы используете React как основной фреймворк. Если вы изначально используете только один компонент React, а не много, то всё равно приходится загружать весь React. Со Svelte разделение кода намного эффективнее, поскольку фреймворк встроен в компонент и этот компонент весьма мал.

Поддержка Open-Source сообщества


Svelte — это ПО с открытым исходным кодом, разработанное энтузиастами. Таким образом, использование фреймворка Svelte не требует никаких затрат и позволяет внедрять многие функции бесплатно. Кроме того, у Svelte есть активное сообщество разработчиков на GitHub, к которому вы можете присоединиться, и где всегда можно попросить о помощи или внести свой вклад в эту технологию.


Достаточно ли Svelte стабилен и надежен


Это актуальный вопрос для фрейморка, который на рынке столь недавно. Все приведенные примеры относятся к синтаксису Svelte версии 3. На данный момент он всё ещё в бета-версии. По сравнению с такими гигантами индустрии, как ReactJS и VueJS, он развит не слишком сильно.

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

Svelte.js — следующий гигант?


Трудно ответить. Может ли Svelte превзойти Vue и React в качестве фронтенд фреймворка, который выдержит испытание временем?

Это не так легко предсказать. На данный момент он ещё не достиг уровня популярности некоторых своих собратьев. У него нет такой же поддержки со стороны крупной корпорации, как у React. Но опять же, Vue неплохо справился и без нее.

В прошлом году было проведено очередное исследование «State of JS». Оно проводится ежегодно для оценки предпочтений ведущих разработчиков. Svelte стал самым популярным, в сравнении с другими библиотеками, включёнными в опрос. Это может означать, что рано или поздно он будет рассматриваться как один из лучших JS-фреймворков.

Svelte vs. React — обычная тема для обсуждения среди программистов, но один из фреймворков не обязательно явно лучше другого. Svelte хорошо подходит для разработки веб-приложений или MVP, в то время как Angular хорошо подходит для PWA или корпоративных веб-приложений. Некоторые разработчики находят фреймворк, который им нравится, и придерживаются его, но даже если и так, пусть это не помешает вам попробовать Svelte. Вам могут понравиться описанные нами функции.

Давайте ещё раз коротко пройдёмся по ключевые особенностям Svelte:

  • Это component-based фреймворк, не требующий дополнительных плагинов.
  • ️Он работает с управлением состояниями без каких-либо привычных сложностей.
  • ️Он позволяет использовать встроенные [в компонент] стили, не требуя CSS-in-JS, поэтому никаких расширений для редактора кода или странного синтаксиса не требуется.
  • ️Достаточно очень простого скрипта сборки для начала работы.
  • ️Для начала работы над базовым проектом не нужны практически никакие файлы.

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

VDSina.ru — хостинг серверов
Серверы в Москве и Амстердаме

Комментарии 29

    +3
    То есть, если вы собираете приложение в Angular, а виджет построен в React, вам не удастся его интегрировать.

    Да сфигали?
    Придётся, конечно, грузить ангуляр вместе с реактом, что само по себе та еще боль из-за размера. Но интегрировать одно с другим никакой сложности не представляет.
      +1
      Да даже и размер может быть терпимым — сам реакт в проде 12,5Кб. Ну, правда, ещё дом почти наверняка понадобится, это ещё 120.
        +1
        В ангуляр встроить, что react, что vue большой проблемы нет, ибо ангуляр тоже работает с нативным DOM (на самом деле зависит от выбранного рендерера).
        А вот встроить vue в react или наоборот — та еще боль. Лично решал проблему, когда vue виджет встроенный в приложение на реакт зависал — vue уходил в бесконечную рекурсию, из-за того что реакт примешал своей гадости в DOM, так еще и не догадался, что enumerable в таких случаях выключают.
        Притом сейчас мигрирую проект с Vue на Svelte3 и реально нет никаких проблем, чтобы использовать из Vue компоненты Svelte и наоборот, со всеми пропсами и событиями (со слотами правда не заморачивался, ибо не надо)
          0
          Ну у реакта есть проблемы, да, из-за дурных моментов обработки vdom. К реакту даже вебкомпоненты так просто не привязываются (придётся немного оборачивать), что уж говорить.
          Но в целом всё равно можно, хоть и немного более заковыристо, чем обычно.
            +1

            Там нужно брал ref, создавать руками createElement(div) и уже на этот див вещать vue.

        +17
        Почему стоит использовать Svelte для своих веб-проектов

        image
          +4
          Почему стоит использовать Svelte для своих веб-проектов
          Так а почему стоит то? Если я прям сейчас начну использовать его вместо Vue — что я конкретно выиграю, кроме сотни миллисекунд на старте?
            +1

            Вы начнёте пользоваться компилятором вместо фреймворка и у вас не будет virtual dom. И реактивность настоящая, без кучи boilerplate-вотчеров. Если это не выглядит для вас ценным, то лучше vue, там сообщество больше и вакансий пока тоже больше.

              0
              у вас не будет virtual dom. И реактивность настоящая, без кучи boilerplate-вотчеров
              Сможете придумать пример, когда virtual dom и вотчеры — это помеха, vue не справляется (или возникают трудности/баги), а svelte всё решает? Другими словами: есть пример проблемы связанной с «ненастоящей» реактивностью?
                +5

                Архитектурно и идеологически, virtual dom — помеха всегда, потому что это костыль, причем не нужный костыль (просто раньше не смогли придумать, как сделать быстро без него).


                Хороший пример "ненастоящей" реактивности" можно посмотреть в видео (19:00). Тем не менее, это всё же искусственный бенчмарк, если вас идеологически устраивает virtual dom и вы хорошо знаете vue, то серьезных причин переходить на svelte пока нет.


                Если вы не знаете ни того, ни другого, но выбираете, то разница как между C# и visual basic (покажите мне проблему, которую нельзя решить на visual basic).


                https://youtu.be/AdNJ3fydeao

                  +1

                  Изи. Мне требовалось добавить стороннюю form в vuejs приложение и вызвать прикрепляемый там же метод. В итоге пришлось дергать внутренний метод рендеринига vuejs иначе данные формы просто не биндились и не передавались.

                    –1

                    Э-э-э, а что мешало просто использовать хук mounted?

                      0

                      Оно потом изменяется на странице :) И должно бы попасть в другой кусок javascript которой ванильный. Внешняя система, там только через предварительный вызов тика рендеринга работало.

                        0

                        Ну так в чём проблема-то?

                          –1

                          В том что через mounted не работает и нужно дергать рендеринг чтоб обновление прошло. Ну и во многих местах там "а вы так не делайте". По началу сильно бесило. Потому что в доке написано должно работать, а чуть дальше в доке написано ой мы не умеем обрабатывать вложенность :D


                          В третьей версии обещали пофиксить посмотрим получилось ли.

                    0

                    Емнип, эта штука изначально придумана человеком, пишущим для смарт-тв. А в них и железо не топовое далеко, и браузеры, мягко скажем, неторопливые.

                    –2

                    Все бы хорошо, но svelte откровенно сырой и слабо документированный. Когда там уже релиз с нормальными доками и всем прочим?

                      +1
                      Если дока изучается за 1 вечер — это не значит, что она слабая. Текущая дока покрывает 100% возможностей как фреймворка, так и его компилятора (со стороны обычного пользователя, но много ли народа идет пилить пулреквесты в используемые инструменты?).
                        –1

                        Просто сравните с vuejs. И даже vuejs я не считаю хорошей докой. Там к примеру не хватает такой вещи как вообще собирать достаточно большое приложение и какой выбрать layout и почему. Этого кстати и в vuejs нет.
                        Не хватает целостного подхода.


                        Тоже самое касается роутера и прочего. Если будем брать svelte и другое то в другом есть хотя бы router и redux в каком-то виде. В случае svelte роутер есть но в зайчатках. redux? не видать. Но вы же можете интегировать нужный и удобный вам! Нууу могу только зачем? Хочется взять инструмент и пользоваться, а не заниматься подбором либ.

                          0
                          Роутеров хватает, на любой вкус и цвет. В реакте тоже нет единого роутера. А то что вью ограничивает меня только своим монстром, я бы скорее к минусам отнес.
                          Насчет редакса. У свелт есть управление состоянием из коробки. И ощущения от него просто прекрасные. Уже через месяц его использования я недоумевал, как я до этого мог пользоваться vuex, redux и mobx с их излишней сложностью. Но самое главное, сторы свелта — это всего лишь интерфейс (под который кстати неплохо вписываются обсерваблы), а значит Вы можете завернуть в него что угодно. И специально для любителей редакса — редакс уже завернули
                            0
                            А то что вью ограничивает меня только своим монстром, я бы скорее к минусам отнес.

                            Угу нет ничего веселее, чем в очередном проекте разбираться что там люди положили из роутеров :) Стандарты это хорошо.


                            У свелт есть управление состоянием из коробки. И ощущения от него просто прекрасные.

                            Там есть все та же проблема. Как это масштабировать? В vuex к примеру четко описано как. А тут? Плодить отдельный каталог и делать пачку store файлов?


                            Тоже в целом касается в том числе и vuejs. Как бы претензия сводится смотрите как у нас просто и быстро все делается! Ребят эт хорошо но мне надо сделать SPA приложение с 30 страницами, авторизацией и с 50 компонентами. Как мне структуру приложения то сделать? Как авторизацию прикручивать? Начинаешь смотреть интернет, а там каждый лепит на это случай свой велосипед. Ну емае. Ладно хоть router и store худо бедно договорились как делать.

                              +1
                              Единый подход есть:
                              У Вас по файлу на каждую сущность (будто в редаксе здорового человека не так?), из которых Вы экспортируете множество сторов, каждый стор содержит атомарное значение.
                              Разногласия разве могут быть в том, как хранить множество однотипных сущностей, как Readable<Entity[]> или как Readable[] ибо это реально зависит от задачи.
                              Тоже в целом касается в том числе и vuejs
                              У Vuex для этого есть модули, а то что не все их используют, отнюдь проблема не vue

                              И кстати, combineReducers никак не спасет меня от конфликта имен экшенов, в отличии от модулей vuex или нативных es модулей в случае свелта
                                0

                                Ну я вот про модули и спрашиваю. В vuex про них вполне четко написано и более того описано как ходить в другие модули если надо. Что весьма хорошо. В документации svelte про это ни слова. Так же ни слова как организовывать дерево компонентов.


                                Этим кстати и болеет тот же vuejs он рассказывает сматри как я умею! Эм а как мне приложение то большое организовывать? Общая канва сводится как хочешь так и организуй. Это делает меня грустной пандой. Особенно после java где такие best pactics есть.

                  +3
                  Аргументация в стиле наших военкоматов — почему служить это круто!
                    0
                    web — это помойка технологий… клиенту ваще пофиг, что у вас там под капотом, лишь бы удобно было. Так что каждый волен выбирать сам — левая или правая :D. Мне вот правая больше нравиццо.
                      0

                      А как же разнообразие?

                        +1
                        Да эта тема «что выбрать» уже замусолена до дыр: писать для себя — выбирай любое; писать для конторы — легаси никто переделывать не будет, а новое — где взять время на изучение.

                        Ну и остается заказчик, где и возможен вариант наткнуться на незнакомую штуку.
                      0

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


                      Судя по обсуждениям для svelte такое ооочень не скоро появится

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое