Czym jest Svelte i dlaczego przeprowadza kompilację
Poznaj podejście Svelte oparte przede wszystkim na kompilatorze oraz dowiedz się, czym różni się ono od Reacta i Vue.
Czym jest Svelte i dlaczego przeprowadza kompilację to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Wprowadzenie do Svelte
Svelte to framework interfejsu użytkownika oparty przede wszystkim na kompilatorze. W przeciwieństwie do Reacta i Vue, Svelte wykonuje większość pracy na etapie budowania, a nie w czasie działania.
Brak wirtualnego DOM-u
React porównuje wirtualny DOM w czasie działania. Zamiast tego Svelte kompiluje komponenty do wysoce zoptymalizowanego, zwykłego JavaScriptu, który bezpośrednio aktualizuje DOM.
Mniej kodu trafia do przeglądarki
Ponieważ Svelte dostarcza skompilowany kod, do przeglądarki zazwyczaj trafia mniej kodu JavaScript. Rozmiary bundli są minimalne.
Format pliku komponentu
Komponent Svelte znajduje się w pliku .svelte, który zawiera trzy opcjonalne sekcje: script, markup i style.
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>Reaktywność przez przypisanie
W Svelte samo przypisanie zmiennej nowej wartości powoduje aktualizację interfejsu. Nie ma tu wywołania setState.
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>Komponenty w pojedynczych plikach
Znaczniki, logika i style ograniczone zakresem znajdują się w jednym pliku. Takie umieszczenie powiązanych elementów razem ułatwia zrozumienie komponentów i ich refaktoryzację.
Style domyślnie ograniczone do komponentu
Każdy zapisany element <style> jest ograniczony wyłącznie do danego komponentu. Koniec z konfliktami CSS między stronami.
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>Korzyści wydajnościowe
Ponieważ nie ma narzutu frameworka w czasie działania, aplikacje Svelte są zwykle szybsze niż odpowiadające im aplikacje React i Vue na urządzeniach niższej klasy.
SvelteKit — metaframework
SvelteKit bazuje na Svelte i dodaje routing, SSR oraz ładowanie danych. Większość produkcyjnych aplikacji Svelte korzysta z SvelteKit.
Kiedy Svelte sprawdza się najlepiej
Svelte świetnie nadaje się do witryn marketingowych, pulpitów nawigacyjnych, aplikacji przyjaznych urządzeniom mobilnym oraz wszędzie tam, gdzie znaczenie mają rozmiar bundla i DX.
Podsumowanie porównania
React, Vue i Angular dostarczają kod frameworka działający w czasie uruchomienia, natomiast Svelte kompiluje go i usuwa. Rezultat to mniejsze bundle oraz prostszy model mentalny.
Szybki test
Sprawdź swoją wiedzę.
Podsumowanie
Wiesz już, że Svelte kompiluje komponenty, dostarcza mniej kodu JavaScript, używa stylów ograniczonych zakresem i zasila SvelteKit używany do tworzenia kompletnych aplikacji. Następnie utworzysz swój pierwszy projekt.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Czym jest Svelte i dlaczego przeprowadza kompilację” jest bezpłatna?
Tak — pełny tekst „Czym jest Svelte i dlaczego przeprowadza kompilację” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Czym jest Svelte i dlaczego przeprowadza kompilację”?
Poznaj podejście Svelte oparte przede wszystkim na kompilatorze oraz dowiedz się, czym różni się ono od Reacta i Vue. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Czym jest Svelte i dlaczego przeprowadza kompilację”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czym jest Svelte i dlaczego przeprowadza kompilację
- Tworzenie projektu za pomocą npm create svelte
- Struktura projektu: src routes static
- Serwer deweloperski i Hot Module Replacement