SVELTE: опыт в работе, как всё устроено и почему стал популярным

Поговорим о Svelte - уже не совсем новом фреймворке, который до сих пор остаётся для многих каким-то новшеством. Чем он заслужил такое внимание к себе? Почему он не "просто ещё один JavaScript-фреймворк"? Ну и главное - готов ли он к настоящей работе?
Поддержать канал: lyoha.info/donate
Мой телеграм-канал: t.me/lyohajs
Сайт Svelte: svelte.dev
Телеграм-чат сообщества: t.me/sveltejs
Мой роутер для Svelte, похожий на Vue-router: github.com/easyroute-router/s...
Использованные видео:
Видео автора Mikhail Nilov: Pexels
Видео автора ArtHouse Studio: Pexels
Видео автора Pavel Danilyuk: Pexels
Музыка:
Not Stopping by Ketsa
00:00 Вступление
01:36 Коротко о Svelte
02:33 Почему Svelte выстрелил?
04:54 Svelte - это компилятор
07:05 Что это нам даёт
07:58 Svelte и продакшн
08:42 Реальная история о Svelte в бою
10:49 Проблемы, которые есть
12:34 Как развивается Svelte?
13:14 Svelte - не просто «ещё один»
13:58 Заключение
#javascript #svelte #framework #compiler

[@HaveFun77777]

да Svelt Kit будет здорово!)

[@user-gp2qh4ze6d]

Спасибо! Полезный разбор. Грамотно излагаешь... Пили еще видосы

[@user-wq6jk2yj2v]

Интересненнько) Хорошо бы увидеть туториал от автора, с каким-будь реальным примером)))

[@sergthebright3113]

Svelte точно готов к промышленному внедрению, еще год назад написал информационный портал для внутренних нужд Сбербанка. Лично для меня были такие неудобства: не было роутера уровня react-router-dom, встроенная система стилизации не позволяет прокидывать классы стилей внутрь другого компонента, кроме как объявления класса в родителе через :global (но, используя сторонние инструменты, типа @emotion/css, таких нюансов нет). В целом, для небольших проектов - то, что надо. Для больших, по моему мнению, надо подождать расширения экосистемы Svelte и увеличения количества разработчиков, знакомых с ним.

[@user-ue8bh7tj5k]

Годный контент. Со свелтом не работал, только слышал. У моих знакомых такая же ситуация. Все работаем на React/Vue, но ни разу не слышали/видели человека, который бы хоть немного поработал со Свелт. Рад, что ютюб порекомендовал тебя

[@mnik0128]

Давай про svelteKit

[@dimakovalenkov7835]

Спасибо, оч полезные для меня и приятные видео на канале = )

[@mr.nefario]

Прикольно. Пользовался вашим опросником на предыдущем месте работы.

[@chirkov]

Самое понятное видео про svelte, спасибо

[@alekscosevoi4157]

Харош, спасибо за видео 👍👍

[@paulmalys]

Круто, спасибо хороший обзор! 👍

[@AlexSizovRun]

Мне кажется или Павел оставляет комменты под всеми видео про Svelte))) Я даже опустился в комменты, чтобы его найти)

[@berlin8pm486]

Привет. Скажи, а если писать на Svelte (вместо Vue) такое крупное приложение как Ozon допустим - это даст прирост скорости написания, и с какими трудностями можно столкнуться ? Где-то читал, что вроде как кода на Svelte получается в 2 раза меньше относительно Vue/React, это правда?

[@lyohaplotinka]

Приветствую! Озон я, к сожалению, не писал, но по ощущениям - да, Svelte позволяет сфокусироваться больше на именно на бизнес-логике, чем на взаимодействии с API. Сложности могут возникнуть с шаблонами, так как, на мой взгляд, их синтаксис местами довольно странный. Но это всё субъективно. Ещё будет сложно организовать работу со стилями, если не использовать CSS-модули. И ещё, кстати, был тест где-то, что после N числа компонентов собранный проект на Svelte становится тяжелее, чем такой же на Vue. Я бы сказал, что Svelte не для таких "крупняков". Не потому, что не вывезет - вывезет, и всё будет хорошо, а потому, что нет прецедента, и не очень понятно, как сделать всё так, чтобы это было удобно поддерживать.

[@yakut54]

Лайк и коммент в поддержку канала. Пиши есчо.

[@vitaliypasiuta8636]

Давай посмотрим на Svelt Kit

[@Husan203]

Давай про Svelte KIT

[@kapitanpoloten4ik668]

Svelte идейно очень нравится(компилятор, нет vDom, пусичный синтаксис ^___^). Дейстивтельно огорчает только небольшое кол-во пакетов под svelte, не на все случаи жизни можно найти готовое/подходящее решение(но столкнулся с тем же и под vue 3 кстати...). Автор спасибо за видос и продвижения годных технологий.

[@lyohaplotinka]

В случае с Vue 3, думаю, вопрос времени. А так - да, это, кажется, удел смелых решений :)

[@kotikvacia9970]

Слышал в каком-то докладе, что svelte больше склоняет к написанию собственных решений (вместо использования сторонних универсальных), если это и вправду так, то видимо так и останется нишевым (например, для слабых устройств на которых подлагивает virtual dom решения)

[@indigosay]

либы для ванильного js на свелте могут идти криво, проблемы с позиционированием элементов возникает. Пришлось забить на Свелт

[@paulmalys]

@@indigosay ванильные либы на свелт по определению идут лучше чем на любом другом фреймворке потому что свелт это и есть ванильный DOM API без дополнительных слоев и абстракций. Это как сказать что ванильная лимба плохо работает с ванильной либой. На практике такое возможно, но очевидно не из-за ванили, а из-за авторов этой либы или потому что их криво «дружили».

[@andreygokhan6893]

Svelte Kit это замена Sapper или что-то большее? Например, если ssr не нужен, то Svelte Kit чем то может быть полезен?

[@lyohaplotinka]

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

[@Alexey_Ivanov]

Так то по сути, это своего рода реинкарнация JQuery, только на тяжёлых стероидах :D Надо будет на их гит зайти, посмотреть как дела с китом.

[@lyohaplotinka]

Но ведь jQuery работает в рантайме. Похоже, что общего-то очень мало.

[@fein7068]

Вообще ничего общего с jquery и пора бы уже забыть вообще об этом динозавре, фу как только вспомню поддержку кода на нем, аж тошнит, когда вышел es6 джиквери был послан далеко и надолго.

[@artyomvashkevich602]

Я вот тоже посмотрел бы обзор по sveltekit т.к. мне понятно для чего нужен svelte, но не понятно зачем нужен sveltekit ибо есть куча качественного и хорошего бэкенда со всем чем нужно и сразу из коробки на python к примеру или на C# или на java. В общем сомнительно, что sveltekit сможет побороться за серверную платформу по сути за backend. но на фронте он конечно красив. Кстати да, проброску стилей сделали бы лучше в svelte это точно было бы полезно.

[@fein7068]

Не могу понять, а в чем проблема использовать :global, да и элементарно прикрутить глобальные стили в проекте в бандл решается одной строчкой, а глобальные css просто разбить на отдельные части под конкретные компоненты для удобства. Тем более пробрасывать стили от одного компонента к другому, задача так сказать редкая, лично у меня, писал на svelte небольшое приложение, проблем с этим не возникало.

[@yabnku]

SvelteKit это про SSR в первую очередь, а не про бэкенд в общем понимании.

[@fein7068]

@@yabnku SSR(Server Side Render) это и есть бэкенд.

[@alexperemey6046]

@@fein7068 Не глобал стилей в проекте вообще не должно быть. Ты должен открыть папочку с css и видеть там все, что влияет на разметку.

[@user-di9gx9bp5l]

Kiiit please :)))

[@maksimsergeevich5939]

Svelte для новичка который хочет делать простые пет проекты Свелт хороший выбор или будет сложно что-то реализовать так как мало кода в коммунити?

[@lyohaplotinka]

Проблема будет в том, что немного библиотек, в частности - UI-китов. А так, на мой взгляд, порог входа ниже некуда)

[@maksimsergeevich5939]

@@lyohaplotinka А архитектурный подход и разбивка на компоненты где то описаны?

[@lyohaplotinka]

@@maksimsergeevich5939 все, как и в других фреймворках, центром которых являются однофайловые компоненты. Vue, например.

[@danikmoroz2328]

Хм, ну так то перерендеривать страницу после каждого чиха так себе - слишком уж затратно это 😕 поэтому и нужна прослойка для аккумуляции изменений и потом одной пачкой перерисовать их

[@lyohaplotinka]

Страницу? Никто не говорит про страницу. Во-первых, идёт ререндер конкретного элемента, а во-вторых, как и в реакте, Svelte сравнивает новое значение со старым. И даже батчит обновления, так что все, о чем вы говорите, здесь есть, только все это готовится на этапе компиляции.

[@DreamingDolphing]

А смысл искать разработчика с навыками не самого распространённого фреймворка, если можно взять просто разработчика, который за пару недель вкатится в этот Svelte? Думаю любой, кто на Vue писал, в Svelte вкатится прямо сразу.

[@diyaudioby4836]

в точку. писал на реакте немного, перешёл на свелт (по работе пришлось), теперь влюбился в свелт )

[@am35a]

А ты попробуй найди разраба который бы готов влиться :)

[@forcenoggano]

Все зависит от зарплаты

[@alexperemey6046]

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

[@SoushiMiketsukami_SS]

@@alexperemey6046 с чего бы ему стать джуном? Если человек пишет только на фреймворке, то он и был джуном всегда) И им и останется

[@alexperemey6046]

Angular - угловатый, Svelte - стройный ))

[@lying6624]

SolidJs на 0.05 сек тормозит от ваниллы. К тому же, внутри как реакт. Советую.

[@lyohaplotinka]

Да, штука интересная. Писал про него в телеграм-канале)

[@yakut54]

убедил. пошёл курить SVELTE.

[@olezhonnv3215]

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

[@lyohaplotinka]

К счастью, все гораздо сложнее. С вашим опытом вы и сами должны понимать, что если задача кажется простой поначалу - так лишь только кажется)

[@fein7068]

@@lyohaplotinka Ну то что вы показали реально не заслуживает звание "кучи клиенской логики", вы там что реализовали искусственный интеллект? :D Скорее всего простой анализатор и сбор статистики(что уже должно быть отделено от вашего опросника) с асинхронной отправкой на сервер.

[@lyohaplotinka]

@@fein7068 ну я не хочу ничего вам доказывать :( я переживу, если вы мне не поверите. Но кстати анализатора никакого как раз нет, все касается исключительно адаптации наполнения опроса контентом под конкретные кейсы и респондентов.

[@fein7068]

@@lyohaplotinka То есть вопросы динамические, почему вы прямо не написали, я же с вами не спорю, лишь описал как это выглядит со стороны.

[@lyohaplotinka]

@@fein7068 Справедливо. Предположу, что у меня не очень хорошо получилось донести мысль "Svelte подходит для сложных приложений". Получилось скорее что-то типа "смотрите какую приложуху я написал", да ещё и без какой-то показательной конкретики)

[@olezhonnv3215]

Ну потому что реально кошмарите! Не ты кошмаришь, а разрабы всех этих хайпов - одного за другим. Просто я уже себе на расслабоне пилю сайтики на PHP. И тут опять что-то новое, опять разбираться непонятно в чем. Денег мне это уже не добавит. А огонь в глазах был, когда я демки графические на С++ под ДОС писал, и когда первые сайты делал. С возрастом это прошло. Хочу просто работать по накатанной схеме. Вот реально - ЕС6 действительно добавил в язык кучу крутых фич. А зоопарк фреймворков - только гемора. Та щас хоть большая тройка устаканилась. А то жеще куча было всяких бекбонов, емберов и прочих нокаутов. Потому что у них то одно, то другое - они ж еще и меняются постоянно. И опять сиди читай. А что нового на сайтах появилось? Они тормознутее стали. Еще бесит тот факт, что сайт начали превращать в СПА, бездумно. Гугль докс или графический редактор - вот это СПА. А блог или интернет магазин - не совсем СПА. А еще микрофронтенды в моду входят. Над js начали городить приблуды типа тайпскрипта. Ну тайпскрипт еще куда ни шло. Но кложура! Лисп на фронте - дожились. Я в Андроид сместился - там та же дичь. Котлин, куча либ. Меня спасает одно - разбираюсь во всем быстро за счет большого опыта. Но это накаляет - сидеть читать очередную дичь про какую-то новую костыляку от условного фейсбука, который разработал очередной обзервабле и ему удалось это прохайпить! Или освоил компиляцию, работу с АСТ деревьями, и написал новые фичи - расширил язык. Теперь у каждого свой JS, потому что бабель и плагины к нему.

[@indigosay]

Я вообще делаю себе контентный сайты по китайскому, полгода убил на изучения СПА фреймворков. Выучил много сторонней инфы, тем же вебпаков овладел, но СПА фреймворки категорически не приемлю. Потому что они как 1С программирование, чисто создают нишу для труда, и постоянно меняются, чтобы у прогеров была работа. А сами они забагованы и синтаксис полное дермецо. Мне нравился только Свелт, пока не столкнулся с тем, как либы для ванильного js идут криво на Svelte, например, tippy когда в content пытаешься запихнуть компонент и сделать placement left, например. Подсказка появляется слево но ввверх, как будто высота элемента 0. И таких примеров много. Я забил, в итоге делаю свои контентные сайты просто на паге и ванильном js, и всё ок. Предзагрузку страниц можно делать через instantClick и еже подобных, а также посредством браузера через тег . Вообще куча приёмов как сделать свой без СПА, и он будет норм.

[@fein7068]

Вы для начала прочитайте что такое SPA прежде чем такие заявления делать. Я подразумеваю вы пишите на нативном PHP? Тогда это провал и для вас у меня плохие новости, вы законсервировались в прошлом и перестали развиваться, по вашей логике нужно сидеть на фронте на джиквери, писать легаси на пыхе и этим гордиться, что после вас 99% разработчиков будут плеваться, а лучше вовсе перепишут проект на ларке. Программирование это про постоянно развитие, упрощай то что превращается в рутину и переходите на новый уровень.

[@karenmelikyan377]

А кто сеазал что свелт популярен? Поищите вакансии и убедитесь что это не так

[@lyohaplotinka]

О чём я, кстати, и сказал в видео. О популярности говорит тот же State of JS, однако, популярность бывает разная. Свелт интересен разработчикам, но вакансий действительно мало.

[@ecoatoms3694]

Реакт годзилла медленно развернулась и как сделала свелт в след версии) А если серьезно, зачем новое если старое работает хорошо, зачем не отделять реактивные элементы от реактивных если это наглядно и несложно, зачем уменьшать вес и без того легкое, зачем ждать что кто то наплодит уже давно существующие решения, и главное зачем было менять местами L и T в названии проекта?

[@chirkov]

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

[@ecoatoms3694]

@@chirkov а ведь прав

[@savchenkodev444]

+1 к SvelteKit