Svelte.js - фреймворк нового поколения
Компонентный фреймворк Svelte.js используется для создания интерфейсов без перезагрузки страницы и этим он очень похож на Vue.js и React.js. Но у него есть существенное отличие - по факту он ведет себя не как фреймворк, а как компилятор. Сейчас поясню, когда вы работаете с классическим фреймворком, то подключаете всю библиотеку, даже если используете всего один компонент.
В случае же со Svelte.js, код пишется с использованием фреймворка, но после запуска сборки, весь код преобразуется в чистый и дружелюбный к новичкам JavaScript код. На выходе нет никаких зависимостей и лишнего кода, а сам файл маленький. Получается одна сплошная выгода: При написании кода, мы по полной используем плюшки фреймворка, а на выходе избавляемся от синтаксического сахара. Звучит неплохо.
Svelte против Angular, React и Vue
Какой главный недостаток у этих трех собратьев? Скажу коротко - они сложноваты для новичков.
А что предлагает разработчикам Svelte?
- Пишите меньше кода
- Никакого Virtual Dom
- Больше никаких сложных библиотек
Создавайте компоненты без шаблонов, используя уже знакомые вам языки - HTML, CSS и JavaScript. Svelte компилирует ваш код в крошечный ванильный JS без фреймворка, что делает приложение быстрым. Наверняка вы слышали такую фразу - "Виртуальный DOM быстрее реального DOM". Это утверждение сбивает с толку, как же тогда Svelte может быть быстрым, если он не использует виртуальный DOM? Чудесным образом Svelte представляет улучшенную модель программирования без использования виртуального DOM.
Справка: Virtual DOM - это способ взаимодействия не с реальным DOM напрямую, а с его облегченной копией. Такой метод работает быстрее, поскольку исключает все тяжеловесные процессы реального DOM.
Простой пример компонента Svelte:
<p class="text">Here's some text <strong>written by {name}!</strong></p>
<style>
/* CSS */
.text {
font-size: 5rem;
}
</style>
<script>
/* переменная */
let name = "Felix";
</script>
Как видите, при компонентном подходе, нет разделения на html, css и js файлы - весь код какого-то компонента пишется в обычном .html файле или .svelte файле.
Плюсы у Svelte
- высокая производительность
- маленький размер итогового кода
- простота использования для новичков
А как насчет минусов, неужели их совсем нет? Увы, к сожалению данный фреймворк достаточно молод и еще не получил для себя должного внимания от сообщества разработчиков. А это значит, что в предлагаемых вакансиях, слово svelte почти не звучит. Выходить на рынок труда с пока что не востребованным навыком - это не то, что нужно начинающим frontend-разработчикам. Фреймворк еще не достиг необходимой популярности, чтобы рассчитывать на поддержку крупных игроков в IT-сфере, как у Angular или React. А без этого, у него нет расширений для редакторов кода, готовых наборов компонентов. Зато у Svelte есть активного сообщество разработчиков на github, где всегда можно попросить о помощи или внести свой вклад в развитие этой технологии.
В отличии от своих собратьев, Svelte не использует виртуальный DOM и тем не менее обгоняет их по размеру и по производительности. Вывод напрашивается сам - виртуальный DOM конечно классная штука, но не панацея. Оказалось, что добиться высокой производительности можно и без виртуального DOM. За последнии несколько лет то и дело появлялись новые JavaScript фреймворки, которые стремительно завоевывали популярность. Такое нашествие фреймворков всегда вводит новичков в ступор. Опытные разработчики регулярно слышат один и тот же вопрос: Я хочу стать frontend-разработчикам, но не знаю с чего начать. Здесь так всего много, что с ума можно сойти.
Фреймворки приходят и уходят, но если у вас будет хорошая база знаний по чистому JavaScript, тогда не возникнет сложностей с их освоением. Переходите на видеокурс по JavaScript и приобретайте необходимые навыки для получения востребованной профессии frontend-разработчика.
-
Создано 02.07.2021 10:58:28
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.