Почему вы должны изучать Svelte JS в 2022 году

В эти дни, когда я говорю о 2022 году, я везде вижу, как люди начали говорить о svelte JS, фреймворке для разработки компонентов, подобно другим фреймворкам, которые у нас есть, например, react, angular и Vue JS.

На своем пути разработки я работал почти со всеми различными фреймворками, включая angular, react и Vue JS. Теперь я вижу что-то новое под названием Svelte JS, это не ново, но да, ново для меня, и у меня возникает вопрос: «Должен ли я изучить этот другой фреймворк??»

Итак, я провел небольшое исследование и изучил все о svelte JS и обнаружил, что «Да, я должен изучить этот фреймворк и начать использовать его в разных приложениях. Я просто привожу здесь несколько примеров, чтобы убедить других разработчиков больше узнать о Svelte JS.

Svelte — это чистый html и javascript

Это напечатает Hello World на экране, это чистый html и javascript. Мы не видим никакого рендеринга или какого-то сложного процесса начальной загрузки для этого компонента, у нас нет какой-либо функции рендеринга, возвращающей HTML/JSX.

// App.svelte file
<script>
 let name = 'world';
</script>
<h1>Hello {name}!</h1>

Еще один простой пример со счетчиком

<script>
// declaring a variable
let count = 0;
// declaring your function
function handleClick() {
  count += 1;
 }
</script>
// Calling your button and setting the onClick behavior similar to // Vue.js just no "v-" in front of it
<button on:click={handleClick}>
 Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

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

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

Когда мы смотрим на скомпилированный JS для этого примера кода, он аннулирует счетчик после каждого события. https://svelte.dev/repl/2c55788d8ffd4458bfe9bcb5f58956db?version=3.46.6

function instance($$self, $$props, $$invalidate) {
	let count = 0;
	// declaring your function
	function handleClick() {
		$$invalidate(0, count += 1);
	}
	return [count, handleClick];
}

Если мы узнаем больше о реактивности, то можем увидеть еще несколько примеров, подобных этому. В этом примере выражение $$ будет срабатывать при каждом аннулировании счетчика и снова проверит это выражение и переоценит его.

<script>
	let count = 0;
	$: if (count >= 10) {
		alert(`count is dangerously high!`);
		count = 9;
	}
	function handleClick() {
		count += 1;
	}
</script>
<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Svelte реактивен без виртуального DOM

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

«Популярно говорят, что это быстро, потому что DOM медленный»

Виртуальный DOM — это чистые накладные расходы (https://svelte.dev/blog/virtual-dom-is-pure-overhead)

вы можете потратить время, чтобы переварить все эти факты (https://svelte.dev/blog/virtual-dom-is-pure-overhead) Давайте раз и навсегда откажемся от мифа о том, что виртуальный DOM работает быстро

Если вы использовали фреймворки JavaScript в последние несколько лет, вы, вероятно, слышали фразу «виртуальный DOM быстр», что часто означает, что он быстрее, чем реальный DOM. Это удивительно устойчивый мем — например, люди спрашивали, как Svelte может быть быстрым, если он не использует виртуальный DOM. пример для реакции —

function HelloMessage(props) {
	return React.createElement(
		'div',
		{ className: 'greeting' },
		'Hello ',
		props.name
	);
}

… но результат тот же — объект, представляющий, как теперь должна выглядеть страница. Этот объект является виртуальным DOM. Каждый раз, когда состояние вашего приложения обновляется (например, когда изменяется свойство имени), вы создаете новое. Задача фреймворка — согласовать новый со старым, выяснить, какие изменения необходимы, и применить их к реальному DOM. чтобы получить больше информации, вы можете проверить https://svelte.dev/blog/virtual-dom-is-pure-overhead

Доступность встроена

Предупреждения доступности Svelte (часто сокращаются до «a11y») — одна из выдающихся особенностей фреймворка. Согласно Ричу Харрису, Svelte — это «первоклассный фреймворк», который «позволит вам писать недоступную разметку, но не будет уважать вас за это». Предупреждения о доступности в компиляторе были частью фреймворка.

Кривая обучения

Когда дело доходит до изучения этого, его легко и достаточно доступно для легкого изучения, поэтому сложные концепции и вещи в Svelte JS Любой может начать обучение прямо здесь https://svelte.dev/tutorial/basics.

Размер пакета и более быстрая компиляция

Чтобы начать работу с базовым приложением, вы можете создать его с помощью простых команд.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
# to use TypeScript run:
# node scripts/setupTypeScript.js
npm install
npm run dev

Реализация TodoMVC в Svelte весит 3,6 КБ в заархивированном виде. (https://svelte.dev/blog/frameworks-without-the-framework) Для сравнения, React плюс ReactDOM без какого-либо кода приложения весит около 45 КБ в заархивированном виде. Браузеру требуется примерно в 10 раз больше времени только для того, чтобы оценить React, чем для запуска и работы Svelte с интерактивным TodoMVC.

И как только ваше приложение запущено и запущено, согласно js-framework-benchmark, Svelte чертовски быстр. Это быстрее, чем React. Это быстрее, чем Vue. Это быстрее, чем Angular, или Ember, или Ractive, или Preact, или Riot, или Mithril. Он конкурирует с Inferno, который на данный момент является, вероятно, самым быстрым UI-фреймворком в мире.

Заключение

  • Поскольку я изучаю svelte, скоро я буду публиковать больше о Svelte JS.
  • Каждый разработчик должен изучить, что svelte JS предоставляет для наших компонентов пользовательского интерфейса и чем он отличается от всех других фреймворков.

Рекомендации