Он был выпущен еще в 2016 году Ричем Харрисом. Это бесплатный фреймворк с открытым исходным кодом, основанный на компонентах. Svelte быстрый и работает как компилятор. Svelte просто превосходит любой другой фреймворк — Angular, Vue и React.
SvelteJS выделяется некоторыми основными принципами:
- Все о написании меньшего количества кода
- Нет таких понятий, как Virtual DOM
- Больше никакого внешнего управления состоянием
Почему SvelteJS?
Небольшой размер пакета фреймворка делает приложение более отзывчивым. Это приводит к сверхплавной загрузке конечного продукта за доли секунды.
Он обновляет DOM всякий раз, когда изменяется стадия компонента, но только если это запускается присваиванием. Рендеринг DOM осуществляется посредством реактивного программирования, что делает его быстрее, чем виртуальные DOM.
Svelte действует как компилятор при создании приложения, просто преобразовывая его в код JavaScript. Это означает отсутствие добавления какого-либо служебного кода для запуска в браузере, когда ваше приложение обновляет DOM, что делает весь процесс бесшовным. Его структура намного более гладкая, что помогает, когда вам нужно определить сотни компонентов.
Svelte имеет менее крутую кривую обучения по сравнению с React. Кроме того, стиль Svelte очень прост, а приложения, которые вы создаете, работают очень плавно.
Монтаж
npm create svelte@latest myapp cd myapp npm install npm run dev
И вы готовы начать экспериментировать.
Простой контрпример ниже!
Немного статистики
Размер пакета SvelteJs составляет 1,6 КБ версии gzip по сравнению с 42,2 КБ React и ReactDOM вместе взятыми.
Обладает очень высокой реакционной способностью. Svelte считается более реактивным, чем даже React.
Легкий и эффективный код делает его идеальным для приложений, где производительность имеет решающее значение, таких как игровые приложения или приложения для визуализации данных.
Соответствие
Svelte — это инструмент для создания очень быстрых веб-приложений. Он преобразует приложение в идеальный JavaScript во время сборки, а не интерпретирует код вашего приложения во время выполнения. Это означает, что мы не несем затрат на производительность абстракций фреймворка и не снижаем производительность при первой загрузке приложения.
Дополнительный
Svelte может сосуществовать с другими фреймворками. Вы можете свободно использовать его там, где вам это больше всего нужно. Мы можем создать все приложение с помощью Svelte или просто добавить его постепенно в существующую кодовую базу. Независимые компоненты также могут поставляться как автономные пакеты, которые работают где угодно без накладных расходов, связанных с зависимостью от какой-либо платформы.
SvelteKit
SvelteKit — это полнофункциональный фреймворк, построенный на основе SvelteJS. Если вы знаете React, SvelteKit похож на Next. Если вы знаете Vue, SvelteKit похож на Nuxt.
Svelte помогает отображать компоненты пользовательского интерфейса, но вам нужно больше, чем просто Svelte, чтобы написать целое приложение со всеми прибамбасами.
SvelteKit предоставляет все основные функции, такие как:
- маршрутизатор — который обновляет пользовательский интерфейс при нажатии на ссылку
- рендеринг на стороне сервера (SSR)
- оптимизация сборки
- оффлайн поддержка
- предварительная загрузка: загружает страницы до того, как пользователь инициирует навигацию.
- настраиваемый рендеринг: позволяет отображать различные части вашего приложения на сервере с помощью SSR.
- рендеринг на стороне клиента
- пререндеринг
И многие другие механические вещи, о которых вам не нужно беспокоиться!
Он также мгновенно отражает изменения в вашем коде в браузере, чтобы обеспечить молниеносную и многофункциональную разработку, используя Vite с плагином Svelte для горячей замены модуля (HMR).
Полный документ здесь
Окончательно
Svelte продемонстрировал, что мы можем добиться исключительной производительности без виртуального DOM. Для опытного разработчика JS Svelte может стать отличным местом для экспериментов, поиска вдохновения и, возможно, изучения чего-то нового.
Версия 3 — это последний код. Помимо этого, сообщество The Svelete также занимается множеством интересных вещей.
Sapper, фреймворк приложений в стиле Next.js, также находится в процессе обновления для использования Svelte 3.
Проект сообщества Svelte Native, который позволяет писать приложения для Android и iOS в Svelte, также добился значительных успехов.
Они также хотят добавить первоклассную поддержку TypeScript в Svelte.
