Фронтенд

Svelte

Компілятор інтерфейсів: перетворює компоненти на мінімальний JavaScript без важкого рантайму.

Офіційний сайтРепозиторій

Що це

Svelte створив Річ Гаррис у 2016 році. На відміну від React чи Vue, більшу частину роботи він виконує на етапі збірки: компілятор генерує код, що напряму оновлює DOM, без віртуального DOM.

Компонент це файл .svelte з розміткою, логікою й стилями. У Svelte 5 реактивність побудована на runes ($state, $derived, $effect). Стилі за замовчуванням обмежені компонентом.

Повноцінний застосунок збирають на SvelteKit: роутинг, SSR, статична генерація й ендпоінти. Розмір бандла зазвичай менший, ніж у конкурентів.

Коли брати

  • Важливі малий розмір бандла й швидкий старт: віджети, лендінги, PWA.
  • Хочеш менше шаблонного коду й простий реактивний синтаксис.
  • Невеликі команди, які цінують розробницький досвід.

Коли не варто

  • Потрібна величезна екосистема готових компонентів і ринок вакансій: React і Vue значно більші.
  • Команда не хоче вчити новий компілятор-орієнтований підхід.

Ключові поняття

Compiler
Svelte працює під час збірки й генерує оптимізований JS без віртуального DOM.
Runes
Позначки $state, $derived, $effect для реактивності у Svelte 5.
Scoped styles
CSS у компоненті діє лише на цей компонент.
Stores
Спільний реактивний стан між компонентами.
SvelteKit
Метафреймворк: файлове маршрутизування, SSR, адаптери під різні платформи.

Приклад

Лічильник зі Svelte 5 rune $state.

Питання на співбесіді

  1. 1. Чим Svelte відрізняється від React?

    Svelte це компілятор: він перетворює компоненти на імперативний код оновлення DOM під час збірки, тому немає віртуального DOM і великого рантайму. React порівнює дерева у браузері.

  2. 2. Що таке runes?

    Спеціальні позначки ($state, $derived, $effect) у Svelte 5, що задають реактивність явно. Вони працюють і в .svelte, і в .svelte.js файлах.

  3. 3. Що дає SvelteKit?

    Роутинг за файлами, завантаження даних через load, SSR, статичну генерацію й адаптери для деплою на різні платформи.

  4. 4. Як у Svelte обмежуються стилі?

    Компілятор додає унікальний клас до селекторів компонента, тому правила не впливають на інші частини сторінки.

Схожі технології

Логотипи належать їхнім власникам і використані лише для ідентифікації. Іконки: Simple Icons (CC0), Devicon (MIT).

Розділи платформи