Почему Svelte.js так популярен? — Из ниоткуда в никуда

В этой быстро меняющейся экосистеме front-end Javascript-фреймворков Svelte считается следующим эволюционным путем. Хотя Svelte существует с 2016 года, он все еще считается чем-то новым. Возможно, именно поэтому он занимает 32 место среди Javascript-фреймворков. Однако его популярность возросла после выхода версии 3 в апреле 2019 года. Но почему и что нового?

В этой быстро меняющейся экосистеме front-end Javascript фреймворков Svelte считается следующим эволюционным путем. Хотя Svelte существует с 2016 года, он по-прежнему считается чем-то новым. Возможно, именно поэтому он занимает 32 место среди Javascript-фреймворков. Однако его популярность возросла после выхода версии 3 в апреле 2019 года. Но почему и что нового?

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

Что такое Svelte.js?
Простыми словами, Svelte — это компилятор внешнего Javascript, разработанный Ричем Харрисом для компиляции компонентов на этапе сборки. Svelte — это бесплатный фреймворк с открытым исходным кодом, продвигаемый под лозунгом «кибернетически улучшенные веб-приложения».

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

Путешествие от версии 1 к версии 3
Дебют Svelte состоялся в 2016 году на Javascript. Первая версия Svelte проверяла, может ли компилятор генерировать код для динамического пользовательского опыта. Спустя два года версия 2 Svelte дала некоторый импульс, но не стала предметом обсуждения в городе. Однако популярность Svelte выросла на 89% после выхода версии 3 в 2019 году.

Svelte-3 — это интеллектуальное расширение. Основная команда Svelte создала выдающийся front-end UI framework, который фокусируется на двух критических проблемах: Реактивность и простота использования.

Как работает Svelte.js: Фреймворк или нет?
Начнем с того, что фреймворк справляется со сложностью кода и делает его управляемым, используя технику виртуальной объектной модели документа (DOM). Но на самом деле веб-приложения объединяют в себе много кода, что существенно влияет на производительность приложения.

Выпуск Svelte 1 был приурочен к публикации статьи Рича Харриса под названием «Фреймворки без фреймворка»: Почему мы не подумали об этом раньше?». В ней были указаны некоторые недостатки текущих Javascript-фреймворков:

Вес веб-приложений
Низкое время производительности
Отсутствие функциональной совместимости
В настоящее время, пока пользователь обращается к веб-приложению, движок Javascript тратит много времени на интерпретацию и обработку кода. Это наблюдение побудило Рича Харриса разработать Svelte как компилятор, а не как фреймворк времени выполнения.

Компоненты, которые вы пишете, используя HTML, CSS и Javascript, компилируются Svelte в оптимальный модуль JavaScript во время сборки. Это устраняет все накладные расходы во время выполнения и улучшает реактивность. Таким образом, он получил название «фреймворк без фреймворка».

SVELTEJS VS. REACT VS. VUE: что отличает Svelte?
Сравнение Svelte с React или Vue.Js покажет вам, почему Svelte стал таким популярным в последнее время среди сообщества разработчиков. Однако эти традиционные UI-фреймворки не являются реактивными, и именно в этом Svelte занимает лидирующие позиции.

Во-вторых, React и VueJS используют виртуальный DOM — объект Javascript, который является представлением реального DOM. Внутри виртуальный DOM используется для сравнения с реальным DOM API для обнаружения необходимых изменений и соответствующего рендеринга пользовательского интерфейса. Здесь реактивность ограничена. Фреймворк сначала обнаруживает изменения в виртуальном DOM по сравнению с последней итерацией, а затем применяет изменения.

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

Svelte предлагает решение этой проблемы, идя другим путем, и это то, что делает компилятор. Во-первых, разработчики, работающие с Svelte, могут писать код, используя простой синтаксис (Typescript). Затем Svelte — единственный инструмент, который понимает ваш код и генерирует идеальный (оптимизированный для просмотра) модуль Javascript. В приложение не встраивается ненужный код, а конечный результат — это только перевод вашего простого кода.

Плюсы/минусы Svelte.js
Как для опытных, так и для начинающих разработчиков фронтенда, Svelte может многое предложить.

Плюсы -.
-Высокая производительность, поскольку отсутствует виртуальный DOM.
-Вы получаете встроенный стиль инкапсуляции.
-Больше реактивных компонентов, чем в любом другом фреймворке.
-Нет обработки во время выполнения, но компиляция происходит во время сборки
-Разделение кода
-Меньший размер веб-приложений

Минусы.
-Вместо того, чтобы добавлять элементы легко, удаление происходит сравнительно медленно.
-После компиляции нет инструментов для отладки.
-По-прежнему требуется больше библиотек сторонних компонентов.

**
**
Давайте рассмотрим преимущества Svelte, которые очень важны для современной front-end разработки.

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

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

Повышенная реактивность
В основе Svelte лежит реактивность. В Svelte реактивность основана на определении самой переменной.

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

Быстрота и эффективность
Синтаксис и семантика Svelte не требуют предварительных знаний о фреймворке и требуют наименьшей когнитивной нагрузки. Бизнес-логику легко написать и легко понять. По сравнению с React и Vue.Js, компонент React примерно на 40% больше, чем эквивалент Svelte.

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

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

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

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

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

Для лучшего опыта разработчиков
Разработчикам понравится работать с Svelte, поскольку он прост для понимания, прост в написании и предлагает интеграцию различных технологий. Кроме того, среда компилятора открывает новые горизонты для разработчиков. Благодаря доступной гибкости и плавной кривой обучения любой разработчик может изучить создание веб-приложений без команды или поддержки.

Заключение: Достаточно ли хорош Svelte?
Ведущий архитектор и создатель Svelte, Рич Харрис, обещает простоту написания и реактивность как воплощение языка. Svelte опережает свое время и открывает перед разработчиками огромные возможности.

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

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *