Svelte — нова дійсність

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Попередній досвід

Моє перше фриланс замовлення я виконав у 2008 році. Це була Joomla з кастомною версткою і це було давно. До того як познайомитися зі Svelte я мав п’ятирічний комерційний досвід розробки на React + Redux + безліч приблуд, таких як redux-saga, re-reselect, і т.п., із величезними бойлерплейтами, але то було прикольно, бо «високий рівень контролю стану», швидкий та зручний дебагінг та ще купа смаколиків. До того ж це модно!

Окрім React довелося трохи попрацювати з Angular від другої до восьмої версії включно. Не скажу, що він був важчий для розуміння, ніж React, але в плані зручності використання і кількості коду для вирішення однієї й тієї ж задачі, Angular здавався дуже застарілим. Як не крути, JSX(TSX) — це прорив. Ще колись таким проривом для мене виявився MobX, і як що б не зустріч зі Svelte, я, мабуть досі писав би на React + MobX.

Перше знайомство

Це сталося у 2021 році. То був невеличкий проект по перенесенню лендінгу з jQuery на Svelte. Відразу приємно здивували інтерактивні tutorials, які зроблені на кшталт уроків Codecademy, не кажучи вже про самі доки. Все досить лаконічно і прозоро. Поріг входу вважається набагато меншим від попередників, особливо, як що є досвід з будь-яким з них. Навіть при невеликому досвіді з React досить швидко звикаєш до свелтівського jsx-синтаксису. Відміни є, але їх небагато. Ось, наприклад, вивід списку:

// React:

<ul>

  {items.map((item, i) => 

    <li key={item.id}>{i}</li>

  )}

</ul>

// Svelte:

<ul>

  {#each items as item, i (item.id)}

    <li>{i}</li>

  {/each}

</ul>

Хтось запитає, що такого є в Svelte, чого немає в React? Насправді багато чого, але як що не вдаватися в подробиці, перераховуючи усе, я б відповів коротко: анімації і стор. Так, повноцінний стор, який за своїми можливостями ні чим не гірший від Redux або MobX. А от за своєю зручністю і простотою використання стор Svelte обганяє їх на декілька років вперед. Ті, хто працював з Redux, знають, чого варте тільки його підключення до проекту. Скажімо так — писанини багато, особливо як що ми використовуємо middleware.

Ось приклад створення нового стору на Svelte:

// ../stores/count-store.js

import { writable } from 'svelte/store';

export const count = writable(0);

Його використання в компоненті:

<script>

  import { count } from '../stores/count-store';

  count.set(1);

  console.log($count) // logs '1'

  // or

  $count = 2;

  console.log($count) // logs '2'

</script>

А це приклад простого стору із документації:

import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe(value => {
	console.log(value);
}); // logs '0'

count.set(1); // logs '1'

count.update(n => n + 1); // logs '2'

Вже після першого дня роботи зі стором Svelte, не важко було порівняти це з попереднім досвідом.

Практичне використання

Як я вже казав, Svelte приховує дуже багато приємних дрібниць, таких як вбудовані анімації, підтримка TypeScript, збирач Vite, SSR, і ще багато чого цікавого. Окрему увагу хотілося б звернути на онлайн-редактор REPL, зроблений на кшталт codesandbox, де ви можете запустити і перевірити будь-який свій код на Svelte.

Також хотілося б сказати пару слів про SvelteKit. SvelteKit — це фреймворк. Фреймворк на базі фреймворка? Так, але не так, тому що Svelte позиціонує себе як компілятор коду. Так, вам не почулося. Тут уся справа у компіляції вашого коду. У той час як традиційні фреймворки, такі як React і Vue, виконують основну частину своєї роботи в браузері, Svelte переносить цю роботу на етап компіляції, який відбувається при створенні програми. Замість використання таких методів як порівняння віртуальних DOM, Svelte пише код, який хірургічно оновлює DOM при зміні стану вашої програми.

Післямова

Прикро, що Svelte іще не набув тієї популярності, яка б розширила ринок праці для розробників, які прагнуть йти уперед і використовувати найсучасніші інструменти розробки. Але навіть попри це, пропрацювавши зі Svelte понад два роки, можу сказати, що мені б дуже не хотілося б повертатися до знарядь кам’яного віку. За останні роки ця технологія неодноразово змінювалась на краще, процес популяризації поступово відбувається і спільнота Svelte з кожним днем дедалі зростає, тож я впевнений, що майбутнє фронтенду саме за Svelte.