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

  Переглядів 11,501

Алексей Соловьев

Алексей Соловьев

День тому

Поговорим о 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

КОМЕНТАРІ: 68
@HaveFun77777
@HaveFun77777 2 роки тому
да Svelt Kit будет здорово!)
@user-gp2qh4ze6d
@user-gp2qh4ze6d 2 роки тому
Спасибо! Полезный разбор. Грамотно излагаешь... Пили еще видосы
@user-wq6jk2yj2v
@user-wq6jk2yj2v 2 роки тому
Интересненнько) Хорошо бы увидеть туториал от автора, с каким-будь реальным примером)))
@sergthebright3113
@sergthebright3113 2 роки тому
Svelte точно готов к промышленному внедрению, еще год назад написал информационный портал для внутренних нужд Сбербанка. Лично для меня были такие неудобства: не было роутера уровня react-router-dom, встроенная система стилизации не позволяет прокидывать классы стилей внутрь другого компонента, кроме как объявления класса в родителе через :global (но, используя сторонние инструменты, типа @emotion/css, таких нюансов нет). В целом, для небольших проектов - то, что надо. Для больших, по моему мнению, надо подождать расширения экосистемы Svelte и увеличения количества разработчиков, знакомых с ним.
@chirkov
@chirkov 2 роки тому
Самое понятное видео про svelte, спасибо
@alekscosevoi4157
@alekscosevoi4157 2 роки тому
Харош, спасибо за видео 👍👍
@user-ue8bh7tj5k
@user-ue8bh7tj5k 2 роки тому
Годный контент. Со свелтом не работал, только слышал. У моих знакомых такая же ситуация. Все работаем на React/Vue, но ни разу не слышали/видели человека, который бы хоть немного поработал со Свелт. Рад, что ютюб порекомендовал тебя
@dimakovalenkov7835
@dimakovalenkov7835 2 роки тому
Спасибо, оч полезные для меня и приятные видео на канале = )
@mr.nefario
@mr.nefario Рік тому
Прикольно. Пользовался вашим опросником на предыдущем месте работы.
@paulmalys
@paulmalys 2 роки тому
Круто, спасибо хороший обзор! 👍
@AlexSizovRun
@AlexSizovRun 2 роки тому
Мне кажется или Павел оставляет комменты под всеми видео про Svelte))) Я даже опустился в комменты, чтобы его найти)
@mnik0128
@mnik0128 2 роки тому
Давай про svelteKit
@yakut54
@yakut54 2 роки тому
Лайк и коммент в поддержку канала. Пиши есчо.
@kapitanpoloten4ik668
@kapitanpoloten4ik668 2 роки тому
Svelte идейно очень нравится(компилятор, нет vDom, пусичный синтаксис ^___^). Дейстивтельно огорчает только небольшое кол-во пакетов под svelte, не на все случаи жизни можно найти готовое/подходящее решение(но столкнулся с тем же и под vue 3 кстати...). Автор спасибо за видос и продвижения годных технологий.
@lyohaplotinka
@lyohaplotinka 2 роки тому
В случае с Vue 3, думаю, вопрос времени. А так - да, это, кажется, удел смелых решений :)
@kotikvacia9970
@kotikvacia9970 2 роки тому
Слышал в каком-то докладе, что svelte больше склоняет к написанию собственных решений (вместо использования сторонних универсальных), если это и вправду так, то видимо так и останется нишевым (например, для слабых устройств на которых подлагивает virtual dom решения)
@indigosay
@indigosay 2 роки тому
либы для ванильного js на свелте могут идти криво, проблемы с позиционированием элементов возникает. Пришлось забить на Свелт
@paulmalys
@paulmalys 2 роки тому
@@indigosay ванильные либы на свелт по определению идут лучше чем на любом другом фреймворке потому что свелт это и есть ванильный DOM API без дополнительных слоев и абстракций. Это как сказать что ванильная лимба плохо работает с ванильной либой. На практике такое возможно, но очевидно не из-за ванили, а из-за авторов этой либы или потому что их криво «дружили».
@berlin8pm486
@berlin8pm486 2 роки тому
Привет. Скажи, а если писать на Svelte (вместо Vue) такое крупное приложение как Ozon допустим - это даст прирост скорости написания, и с какими трудностями можно столкнуться ? Где-то читал, что вроде как кода на Svelte получается в 2 раза меньше относительно Vue/React, это правда?
@lyohaplotinka
@lyohaplotinka 2 роки тому
Приветствую! Озон я, к сожалению, не писал, но по ощущениям - да, Svelte позволяет сфокусироваться больше на именно на бизнес-логике, чем на взаимодействии с API. Сложности могут возникнуть с шаблонами, так как, на мой взгляд, их синтаксис местами довольно странный. Но это всё субъективно. Ещё будет сложно организовать работу со стилями, если не использовать CSS-модули. И ещё, кстати, был тест где-то, что после N числа компонентов собранный проект на Svelte становится тяжелее, чем такой же на Vue. Я бы сказал, что Svelte не для таких "крупняков". Не потому, что не вывезет - вывезет, и всё будет хорошо, а потому, что нет прецедента, и не очень понятно, как сделать всё так, чтобы это было удобно поддерживать.
@vitaliypasiuta8636
@vitaliypasiuta8636 2 роки тому
Давай посмотрим на Svelt Kit
@Husan203
@Husan203 2 роки тому
Давай про Svelte KIT
@artyomvashkevich602
@artyomvashkevich602 2 роки тому
Я вот тоже посмотрел бы обзор по sveltekit т.к. мне понятно для чего нужен svelte, но не понятно зачем нужен sveltekit ибо есть куча качественного и хорошего бэкенда со всем чем нужно и сразу из коробки на python к примеру или на C# или на java. В общем сомнительно, что sveltekit сможет побороться за серверную платформу по сути за backend. но на фронте он конечно красив. Кстати да, проброску стилей сделали бы лучше в svelte это точно было бы полезно.
@fein7068
@fein7068 2 роки тому
Не могу понять, а в чем проблема использовать :global, да и элементарно прикрутить глобальные стили в проекте в бандл решается одной строчкой, а глобальные css просто разбить на отдельные части под конкретные компоненты для удобства. Тем более пробрасывать стили от одного компонента к другому, задача так сказать редкая, лично у меня, писал на svelte небольшое приложение, проблем с этим не возникало.
@yabnku
@yabnku Рік тому
SvelteKit это про SSR в первую очередь, а не про бэкенд в общем понимании.
@fein7068
@fein7068 Рік тому
@@yabnku SSR(Server Side Render) это и есть бэкенд.
@alexperemey6046
@alexperemey6046 Рік тому
@@fein7068 Не глобал стилей в проекте вообще не должно быть. Ты должен открыть папочку с css и видеть там все, что влияет на разметку.
@Alexey_Ivanov
@Alexey_Ivanov 2 роки тому
Так то по сути, это своего рода реинкарнация JQuery, только на тяжёлых стероидах :D Надо будет на их гит зайти, посмотреть как дела с китом.
@lyohaplotinka
@lyohaplotinka 2 роки тому
Но ведь jQuery работает в рантайме. Похоже, что общего-то очень мало.
@fein7068
@fein7068 2 роки тому
Вообще ничего общего с jquery и пора бы уже забыть вообще об этом динозавре, фу как только вспомню поддержку кода на нем, аж тошнит, когда вышел es6 джиквери был послан далеко и надолго.
@andreygokhan6893
@andreygokhan6893 2 роки тому
Svelte Kit это замена Sapper или что-то большее? Например, если ssr не нужен, то Svelte Kit чем то может быть полезен?
@lyohaplotinka
@lyohaplotinka 2 роки тому
Насколько я знаю, это полноценный фреймворк, который может и в SSR (как замена Sapper, да), и в чисто клиентскую сборку, решая проблему роутинга и т.д. Могу ошибаться, если что)
@danikmoroz2328
@danikmoroz2328 2 роки тому
Хм, ну так то перерендеривать страницу после каждого чиха так себе - слишком уж затратно это 😕 поэтому и нужна прослойка для аккумуляции изменений и потом одной пачкой перерисовать их
@lyohaplotinka
@lyohaplotinka 2 роки тому
Страницу? Никто не говорит про страницу. Во-первых, идёт ререндер конкретного элемента, а во-вторых, как и в реакте, Svelte сравнивает новое значение со старым. И даже батчит обновления, так что все, о чем вы говорите, здесь есть, только все это готовится на этапе компиляции.
@user-di9gx9bp5l
@user-di9gx9bp5l Рік тому
Kiiit please :)))
@maksimsergeevich5939
@maksimsergeevich5939 2 роки тому
Svelte для новичка который хочет делать простые пет проекты Свелт хороший выбор или будет сложно что-то реализовать так как мало кода в коммунити?
@lyohaplotinka
@lyohaplotinka 2 роки тому
Проблема будет в том, что немного библиотек, в частности - UI-китов. А так, на мой взгляд, порог входа ниже некуда)
@maksimsergeevich5939
@maksimsergeevich5939 2 роки тому
@@lyohaplotinka А архитектурный подход и разбивка на компоненты где то описаны?
@lyohaplotinka
@lyohaplotinka 2 роки тому
@@maksimsergeevich5939 все, как и в других фреймворках, центром которых являются однофайловые компоненты. Vue, например.
@alexperemey6046
@alexperemey6046 Рік тому
Angular - угловатый, Svelte - стройный ))
@lying6624
@lying6624 2 роки тому
SolidJs на 0.05 сек тормозит от ваниллы. К тому же, внутри как реакт. Советую.
@lyohaplotinka
@lyohaplotinka 2 роки тому
Да, штука интересная. Писал про него в телеграм-канале)
@DreamingDolphing
@DreamingDolphing 2 роки тому
А смысл искать разработчика с навыками не самого распространённого фреймворка, если можно взять просто разработчика, который за пару недель вкатится в этот Svelte? Думаю любой, кто на Vue писал, в Svelte вкатится прямо сразу.
@diyaudioby4836
@diyaudioby4836 2 роки тому
в точку. писал на реакте немного, перешёл на свелт (по работе пришлось), теперь влюбился в свелт )
@am35a
@am35a 2 роки тому
А ты попробуй найди разраба который бы готов влиться :)
@forcenoggano
@forcenoggano 2 роки тому
Все зависит от зарплаты
@alexperemey6046
@alexperemey6046 Рік тому
Ну он вкатится, но это будет джун поначалу. Хотя и тот, кто пишет на свелте тоже обычно недалеко от джуна ушел, поскольку наверняка свелтом просто побаловался. Новые фреймворки - незнакомые риски, непрогнозируемые проблемы, бизнес этого просто боится.
@SoushiMiketsukami_SS
@SoushiMiketsukami_SS Рік тому
@@alexperemey6046 с чего бы ему стать джуном? Если человек пишет только на фреймворке, то он и был джуном всегда) И им и останется
@yakut54
@yakut54 2 роки тому
убедил. пошёл курить SVELTE.
@olezhonnv3215
@olezhonnv3215 2 роки тому
В опроснике куча клиентской логики? Пройтись по вопросам и показать ползунки с балами или варианты для ответа? Та обычная маленькая приложуха с обычными контролами - баттоны, чекбоксы, слайдеры, радиобаттоны, текстинпуты. И кнопочка далее для перехода на следующий вопрос.
@lyohaplotinka
@lyohaplotinka 2 роки тому
К счастью, все гораздо сложнее. С вашим опытом вы и сами должны понимать, что если задача кажется простой поначалу - так лишь только кажется)
@fein7068
@fein7068 2 роки тому
@@lyohaplotinka Ну то что вы показали реально не заслуживает звание "кучи клиенской логики", вы там что реализовали искусственный интеллект? :D Скорее всего простой анализатор и сбор статистики(что уже должно быть отделено от вашего опросника) с асинхронной отправкой на сервер.
@lyohaplotinka
@lyohaplotinka 2 роки тому
@@fein7068 ну я не хочу ничего вам доказывать :( я переживу, если вы мне не поверите. Но кстати анализатора никакого как раз нет, все касается исключительно адаптации наполнения опроса контентом под конкретные кейсы и респондентов.
@fein7068
@fein7068 2 роки тому
@@lyohaplotinka То есть вопросы динамические, почему вы прямо не написали, я же с вами не спорю, лишь описал как это выглядит со стороны.
@lyohaplotinka
@lyohaplotinka 2 роки тому
@@fein7068 Справедливо. Предположу, что у меня не очень хорошо получилось донести мысль "Svelte подходит для сложных приложений". Получилось скорее что-то типа "смотрите какую приложуху я написал", да ещё и без какой-то показательной конкретики)
@olezhonnv3215
@olezhonnv3215 2 роки тому
Ну потому что реально кошмарите! Не ты кошмаришь, а разрабы всех этих хайпов - одного за другим. Просто я уже себе на расслабоне пилю сайтики на PHP. И тут опять что-то новое, опять разбираться непонятно в чем. Денег мне это уже не добавит. А огонь в глазах был, когда я демки графические на С++ под ДОС писал, и когда первые сайты делал. С возрастом это прошло. Хочу просто работать по накатанной схеме. Вот реально - ЕС6 действительно добавил в язык кучу крутых фич. А зоопарк фреймворков - только гемора. Та щас хоть большая тройка устаканилась. А то жеще куча было всяких бекбонов, емберов и прочих нокаутов. Потому что у них то одно, то другое - они ж еще и меняются постоянно. И опять сиди читай. А что нового на сайтах появилось? Они тормознутее стали. Еще бесит тот факт, что сайт начали превращать в СПА, бездумно. Гугль докс или графический редактор - вот это СПА. А блог или интернет магазин - не совсем СПА. А еще микрофронтенды в моду входят. Над js начали городить приблуды типа тайпскрипта. Ну тайпскрипт еще куда ни шло. Но кложура! Лисп на фронте - дожились. Я в Андроид сместился - там та же дичь. Котлин, куча либ. Меня спасает одно - разбираюсь во всем быстро за счет большого опыта. Но это накаляет - сидеть читать очередную дичь про какую-то новую костыляку от условного фейсбука, который разработал очередной обзервабле и ему удалось это прохайпить! Или освоил компиляцию, работу с АСТ деревьями, и написал новые фичи - расширил язык. Теперь у каждого свой JS, потому что бабель и плагины к нему.
@indigosay
@indigosay 2 роки тому
Я вообще делаю себе контентный сайты по китайскому, полгода убил на изучения СПА фреймворков. Выучил много сторонней инфы, тем же вебпаков овладел, но СПА фреймворки категорически не приемлю. Потому что они как 1С программирование, чисто создают нишу для труда, и постоянно меняются, чтобы у прогеров была работа. А сами они забагованы и синтаксис полное дермецо. Мне нравился только Свелт, пока не столкнулся с тем, как либы для ванильного js идут криво на Svelte, например, tippy когда в content пытаешься запихнуть компонент и сделать placement left, например. Подсказка появляется слево но ввверх, как будто высота элемента 0. И таких примеров много. Я забил, в итоге делаю свои контентные сайты просто на паге и ванильном js, и всё ок. Предзагрузку страниц можно делать через instantClick и еже подобных, а также посредством браузера через тег . Вообще куча приёмов как сделать свой без СПА, и он будет норм.
@fein7068
@fein7068 2 роки тому
Вы для начала прочитайте что такое SPA прежде чем такие заявления делать. Я подразумеваю вы пишите на нативном PHP? Тогда это провал и для вас у меня плохие новости, вы законсервировались в прошлом и перестали развиваться, по вашей логике нужно сидеть на фронте на джиквери, писать легаси на пыхе и этим гордиться, что после вас 99% разработчиков будут плеваться, а лучше вовсе перепишут проект на ларке. Программирование это про постоянно развитие, упрощай то что превращается в рутину и переходите на новый уровень.
@karenmelikyan377
@karenmelikyan377 2 роки тому
А кто сеазал что свелт популярен? Поищите вакансии и убедитесь что это не так
@lyohaplotinka
@lyohaplotinka 2 роки тому
О чём я, кстати, и сказал в видео. О популярности говорит тот же State of JS, однако, популярность бывает разная. Свелт интересен разработчикам, но вакансий действительно мало.
@ecoatoms3694
@ecoatoms3694 2 роки тому
Реакт годзилла медленно развернулась и как сделала свелт в след версии) А если серьезно, зачем новое если старое работает хорошо, зачем не отделять реактивные элементы от реактивных если это наглядно и несложно, зачем уменьшать вес и без того легкое, зачем ждать что кто то наплодит уже давно существующие решения, и главное зачем было менять местами L и T в названии проекта?
@chirkov
@chirkov 2 роки тому
Потому что если бы все думали как ты, то и реакта бы не появилось
@ecoatoms3694
@ecoatoms3694 2 роки тому
@@chirkov а ведь прав
@savchenkodev444
@savchenkodev444 2 роки тому
+1 к SvelteKit
2022 Most Satisfying Framework??! This Survey Surprised Me
11:29
Theo - t3․gg
Переглядів 68 тис.
[실시간] 전철에서 찍힌 기생생물 감염 장면 | 기생수: 더 그레이
00:15
Netflix Korea 넷플릭스 코리아
Переглядів 37 млн
«Що ви тут лазите?». День з військовими ТЦК Києва + ENG SUB
24:04
Слідство.Інфо | Розслідування, репортажі, викриття
Переглядів 297 тис.
Svelte vs React in 2024 - Make the RIGHT Choice (Difference Explained)
11:03
Daniel Dan | Tech & Data
Переглядів 29 тис.
Svelte Is Good For Beginners
9:28
ThePrimeTime
Переглядів 67 тис.
Let's Learn Svelte.js in 60 Minutes (fun speed run).
58:17
developedbyed
Переглядів 37 тис.
Svelte - новый король JavaScript-фреймворков?
11:36
Как пройти в IT?
Переглядів 46 тис.
Ranking The Most Popular Javascript Frameworks 2023
24:43
developedbyed
Переглядів 152 тис.
Познер: Как выучить иностранный язык.  Работает!!!
22:24
Канал со смыслом
Переглядів 5 млн
What Svelte UI Library Should You Use?
18:41
Joy of Code
Переглядів 42 тис.
I built the same app 10 times // Which JS Framework is best?
21:58
Astro. Теперь сайты моментальные. Быстрый курс
59:26
Владилен Минин
Переглядів 47 тис.
Why spend $10.000 on a flashlight when these are $200🗿
0:12
NIGHTOPERATOR
Переглядів 16 млн
План хакера 🤯 #shorts #фильмы
0:59
BruuHub
Переглядів 918 тис.
iPhone 19?
0:16
ARGEN
Переглядів 3,8 млн
NOTHING PHONE 2A - НЕОБЫЧЕН ВО ВСЕМ!
30:39
DimaViper
Переглядів 50 тис.
Changing Replace And Edit Backgrounds New Tech || Photo Eedit NEW3X
0:50