JavaScript Framework, бросающий вызов React и Vue.js

Фреймворк Svelte JavaScript вызывает большой интерес в техническом сообществе. Созданный в 2016 году Ричем Харрисом, Svelte позиционируется как альтернатива другим фреймворкам, таким как Реагировать или Vue.js. Его особенности делают Svelte.js мощным и гибким инструментом.

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

Как работает Свелте

Svelte, компилятор кода

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

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

Этот скомпилированный код передается браузеру в собственном JavaScript. Никакого дополнительного добавленного кода не требуется выполнять в браузере, когда приложение обновляет DOM. Это делает работу со Svelte быстрой и оперативной.

Создавать приложения в Svelte довольно быстро и легко. По умолчанию платформа поддерживает Typescript, Eslint, Prettier, Readywright и Vitest.

В идеале использовать Фреймворк Svelte Kit на Слендере. По умолчанию он обеспечивает маршрутизацию, рендеринг, RWA и другие встроенные функции.

Шаблонизация: переменные и атрибуты

Переменные отображаются в скобках. Атрибуты поддерживают определенные сочетания клавиш. В Svelte есть HTML-часть для добавления тегов. Переменные необходимо ввести в часть скрипта.

Шаблонизация: условия и циклы

Конкретный синтаксис отличается от того, что можно найти в Vue.js.

Отзывчивость: переменная и объявление

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

Отзывчивость на заявления

Svelte использует символ «$:». Он открывает блок кода и делает его отзывчивым в зависимости от используемых переменных.

Отзывчивость: таблицы и объекты

У нее довольно низкий уровень Слендера. По умолчанию таблица не реагирует.

Компоненты

Вам нужно открыть файл (компоненты/Nested.svelte). На странице, где вы хотите его использовать, вы импортируете компонент как классический файл. Затем он используется как HTML-тег. Компоненты могут иметь реквизиты и объявлять реквизиты. Это делается с помощью экспорта переменной.

События

Обработка событий очень похожа на Vue.js. Их можно объявить в любом теге.

События компонента

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

Связывание

Привязка часто используется, например, на элементах формы. Сдвиг производится во всех местах использования элемента.

Событие жизненного цикла

Это довольно просто. Вы должны использовать тег {onMount}.

Контекстный API

Это способ сделать переменные и события доступными в дочернем или дочернем элементе без необходимости распространения до 8 уровней. Из Svelte вы должны получить функцию «setContext» и в эту функцию добавить значения и функции.

Для получения более подробной информации вы можете обратиться к документации, доступной на https://svelte.dev/examples/hello-world.

Плюсы и минусы Svelte

Преимущества Svelte

• Слендер очень легкий. Благодаря скомпилированному коду вес разрабатываемого приложения значительно снижается. Это позволяет значительно ускорить загрузку и выполнение.
• Рамочная основа также гиперреактивный для высокой производительности при написании кода JavaScript в реальном времени. Это обеспечивает лучший пользовательский опыт.
• Svelte — менее многословный фреймворк. чем его конкуренты. Требуется написать меньше строк кода, поскольку некоторые концепции интегрированы непосредственно в HTML-код.
  Он предлагает хорошую рабочую среду с HMR и отладчиком Chrome.
• Наконец, Svelte.js легко освоить, несмотря на синтаксические различия, которые на первый взгляд могут показаться удивительными. По сравнению с React или Vue.js для разработки проекта приложения с помощью Svelte нет ничего лишнего.

Недостатки Свелте

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

Тонкий, мощный инструмент

Сравнивая Svelte с такими JavaScript-фреймворками, как React и Vue.js, его скорость реагирования впечатляет. Как компилятор кода он оказывается легким. Результатом является экономия времени на загрузке приложений и скорости выполнения. Это обеспечивает лучший пользовательский опыт.
Однако Svelte.js, оснащенный хорошей средой разработки, имеет некоторые особенности. Его специфический синтаксис может показаться удивительным, но, тем не менее, его легко использовать.
Этот фреймворк кажется идеальным для работы над небольшими приложениями. Однако для очень амбициозных прикладных проектов это, вероятно, не лучший вариант.

Источники: