Pytania rekrutacyjne Svelte z odpowiedziami

Przykładowe pytania

Kilka pytań z każdego poziomu z poprawną odpowiedzią i wyjaśnieniem.

Svelte · Junior

1. Czym jest Svelte?

   Poprawna odpowiedź: Frameworkiem UI, który jest głównie kompilatorem: komponenty zamieniają się w JavaScript bezpośrednio aktualizujący DOM

   Svelte wykonuje większość pracy podczas budowania. Wynikiem jest zwięzły kod, który zmienia dokładnie te węzły DOM, które zależą od zmienionego stanu, bez wirtualnego DOM.

2. Czym jest SvelteKit?

   Poprawna odpowiedź: Oficjalnym frameworkiem aplikacji dla Svelte: routing, ładowanie danych, SSR, formularze i adaptery wdrożeń, zbudowanym na Vite

   Svelte to warstwa komponentów, a SvelteKit dodaje wszystko, czego potrzebuje pełna aplikacja, podobnie jak Next.js dla Reacta czy Nuxt dla Vue.

3. Jaki jest zalecany sposób utworzenia nowego projektu SvelteKit?

   Poprawna odpowiedź: npx sv create my-app

   sv to oficjalne CLI Svelte. Tworzy projekt i potrafi dodać integracje: TypeScript, ESLint, Vitest, Playwright.

4. Co może zawierać plik .svelte?

   Poprawna odpowiedź: Blok <script>, znaczniki i blok <style>, wszystko opcjonalnie

   Komponent może mieć kilka elementów najwyższego poziomu. Jest też <script module>, który wykonuje się raz przy ładowaniu modułu, a nie dla każdej instancji.

Svelte · Middle

1. Czym różni się $effect od $effect.pre?

   Poprawna odpowiedź: $effect.pre działa przed aktualizacją DOM (np. by zapisać pozycję przewinięcia); $effect po niej

   $effect.pre zastępuje beforeUpdate ze Svelte 4, a $effect zastępuje afterUpdate.

2. Dlaczego items.set(k, v) nie aktualizuje UI, gdy items to zwykły Map w $state?

   Poprawna odpowiedź: $state proxuje tylko zwykłe obiekty i tablice; użyj SvelteMap z svelte/reactivity

   svelte/reactivity ma też SvelteSet, SvelteDate, SvelteURL, SvelteURLSearchParams i MediaQuery. Ich wartości nie stają się głęboko reaktywne.

3. W czym pomaga $inspect.trace()?

   Poprawna odpowiedź: Umieszczony w pierwszej linii $effect lub $derived.by loguje, która zależność wywołała ponowne uruchomienie

   Przydaje się, gdy coś aktualizuje się za często albo wcale. Jak $inspect, na produkcji nic nie robi.

4. Jaka jest przewaga snippetów nad slotami Svelte 4?

   Poprawna odpowiedź: To wartości: można im przekazywać parametry, przekazywać je jako propsy, typować przez Snippet<[T]> i używać wielokrotnie w tym samym komponencie

   Do snippetów najwyższego poziomu można odwoływać się nawet w <script>, a eksportować je z <script module>, jeśli nie używają stanu komponentu.

Svelte · Senior

1. Na jakim modelu opiera się reaktywność Svelte 5?

   Poprawna odpowiedź: Na sygnałach: odczyt stanu w efekcie lub derived rejestruje zależność, a zapis planuje tylko dotknięte efekty

   Wyrażenia szablonu też są efektami. Runy to składnia nad tym runtime'em; Svelte 4 polegał zamiast tego na instrumentowaniu przypisań przez kompilator.

2. Dlaczego Svelte 5 przeszedł z reaktywności let instrumentowanej przez kompilator na runy?

   Poprawna odpowiedź: Reaktywność Svelte 4 działała tylko na najwyższym poziomie komponentów i była trudna do zrozumienia; runy czynią ją jawną i działają w .svelte.js i klasach

   Zależności $: były ustalane statycznie i tylko przy kompilacji; runy śledzą je w czasie działania, także przez wywołania funkcji.

3. Jak obliczane są wartości $derived?

   Poprawna odpowiedź: Leniwie i z memoizacją: przeliczają się tylko przy odczycie po zmianie zależności, a jeśli wynik się nie zmienił, dalsze aktualizacje są pomijane

   Svelte używa reaktywności push-pull: zmiany oznaczają zależnych jako nieaktualnych (push), a wartości przeliczają się przy odczycie (pull). Równe wyniki nie są propagowane.

4. Jaki jest koszt głębokich proxy $state i jak go kontrolować?

   Poprawna odpowiedź: Każdy dostęp do właściwości przechodzi przez proxy, a zagnieżdżone obiekty są opakowywane leniwie; dla dużych niezmiennych danych użyj $state.raw lub zwykłych zmiennych

   Używaj $state tylko dla wartości, od których zależą efekty, derived lub szablon. Dane niereaktywne mogą zostać zwykłymi zmiennymi.

Testy łączone z tym tematem

Pytania z kilku tematów naraz - jak na rozmowie rekrutacyjnej na konkretne stanowisko.