Питання на співбесіді з Svelte з відповідями

Приклади запитань

Кілька запитань із кожного рівня з правильною відповіддю й поясненням.

Svelte · Junior

1. Що таке Svelte?

   Правильна відповідь: UI-фреймворк, який здебільшого є компілятором: компоненти перетворюються на JavaScript, що напряму оновлює DOM

   Svelte виконує більшу частину роботи під час збирання. На виході - компактний код, який змінює саме ті DOM-вузли, що залежать від зміненого стану, без віртуального DOM.

2. Що таке SvelteKit?

   Правильна відповідь: Офіційний фреймворк застосунків для Svelte: роутинг, завантаження даних, SSR, форми й адаптери для деплою, побудований на Vite

   Svelte - шар компонентів, а SvelteKit додає все, що потрібно повноцінному застосунку, приблизно як Next.js для React або Nuxt для Vue.

3. Як рекомендують створювати новий проєкт SvelteKit?

   Правильна відповідь: npx sv create my-app

   sv - офіційний CLI Svelte. Він створює проєкт і вміє додавати інтеграції: TypeScript, ESLint, Vitest, Playwright.

4. Що може містити файл .svelte?

   Правильна відповідь: Блок <script>, розмітку й блок <style>, причому все необов'язкове

   Компонент може мати кілька елементів верхнього рівня. Є ще <script module>, який виконується один раз під час завантаження модуля, а не для кожного екземпляра.

Svelte · Middle

1. Чим $effect відрізняється від $effect.pre?

   Правильна відповідь: $effect.pre виконується до оновлення DOM (наприклад, щоб зберегти позицію прокручування); $effect - після

   $effect.pre замінює beforeUpdate зі Svelte 4, а $effect - afterUpdate.

2. Чому items.set(k, v) не оновлює UI, якщо items - звичайний Map у $state?

   Правильна відповідь: $state проксує лише звичайні об'єкти й масиви; використовуйте SvelteMap з svelte/reactivity

   У svelte/reactivity є також SvelteSet, SvelteDate, SvelteURL, SvelteURLSearchParams і MediaQuery. Їхні значення не стають глибоко реактивними.

3. Чим допомагає $inspect.trace()?

   Правильна відповідь: Якщо поставити його першим рядком $effect або $derived.by, він логує, яка залежність спричинила перезапуск

   Корисно, коли щось оновлюється занадто часто чи не оновлюється взагалі. Як і $inspect, у продакшені нічого не робить.

4. У чому перевага сніпетів над слотами Svelte 4?

   Правильна відповідь: Це значення: їм можна передавати параметри, передавати їх пропсами, типізувати через Snippet<[T]> і перевикористовувати в тому самому компоненті

   На сніпети верхнього рівня можна посилатися навіть у <script>, а експортувати їх з <script module>, якщо вони не використовують стан компонента.

Svelte · Senior

1. На якій моделі ґрунтується реактивність Svelte 5?

   Правильна відповідь: На сигналах: читання стану всередині ефекту чи derived реєструє залежність, запис планує лише зачеплені ефекти

   Вирази шаблону - теж ефекти. Руни - синтаксис поверх цього рантайму; Svelte 4 натомість покладався на інструментування присвоєнь компілятором.

2. Чому Svelte 5 перейшов від реактивності let, інструментованої компілятором, до рун?

   Правильна відповідь: Реактивність Svelte 4 працювала лише на верхньому рівні компонентів і була складною для розуміння; руни роблять її явною й працюють у .svelte.js та класах

   Залежності $: визначалися статично й лише під час компіляції; руни відстежують їх під час виконання, зокрема через виклики функцій.

3. Як обчислюються значення $derived?

   Правильна відповідь: Ліниво й з мемоізацією: перераховуються лише під час читання після зміни залежності, а якщо результат не змінився, подальші оновлення пропускаються

   Svelte використовує push-pull реактивність: зміни позначають залежних як застарілих (push), значення перераховуються під час читання (pull). Рівні результати не поширюються.

4. Скільки коштують глибокі проксі $state і як це контролювати?

   Правильна відповідь: Кожне звернення до властивості йде через проксі, вкладені об'єкти обгортаються ліниво; для великих незмінних даних використовуйте $state.raw або звичайні змінні

   Використовуйте $state лише для значень, від яких залежать ефекти, derived чи шаблон. Нереактивні дані можуть лишатися звичайними змінними.

Збірні тести з цією темою

Запитання з кількох тем одразу - як на співбесіді на конкретну вакансію.