Chcia\u0142bym przedstawi\u0107 Ci jego podstawowe za\u0142o\u017cenia, filozofi\u0119 oraz to, czym r\u00f3\u017cni si\u0119 od pozosta\u0142ych framework\u00f3w. Je\u015bli planujesz spr\u00f3bowa\u0107 czego\u015b nowego \u2013 to ciekawa propozycja. Svelte wci\u0105\u017c zdobywa uznanie w\u015br\u00f3d developer\u00f3w dzi\u0119ki swojej nowatorskiej metodzie tworzenia reaktywnych interfejs\u00f3w u\u017cytkownika, co sprawia, \u017ce rozpocz\u0119cie z nim pracy staje si\u0119 kusz\u0105cym krokiem. Niezale\u017cnie od tego, czy przechodzisz z innego frameworka, czy te\u017c dopiero zaczynasz swoj\u0105 przygod\u0119 z web developmentem, ten tutorial poprowadzi Ci\u0119 przez konfiguracj\u0119 pierwszego projektu w Svelte<\/strong> i przybli\u017cy podstawowe za\u0142o\u017cenia tego narz\u0119dzia.<\/p>\n\n\n\n Svelte to framework JavaScript s\u0142u\u017c\u0105cy do budowy interfejs\u00f3w u\u017cytkownika, podobnie jak React czy Vue. Zosta\u0142 wprowadzony w 2016 roku przez Richa Harrisa jako nowoczesne podej\u015bcie do tworzenia UI, kt\u00f3re wykracza poza tradycyjny wirtualny DOM. W przeciwie\u0144stwie do innych framework\u00f3w (jak React i Angular), Svelte koncentruje si\u0119 na optymalizacji podczas kompilacji, a nie w czasie dzia\u0142ania aplikacji. W jej trakcie narz\u0119dzie generuje wydajny kod JavaScript, dzi\u0119ki czemu dzia\u0142a on szybciej w runtime.<\/p>\n\n\n\n To unikalne podej\u015bcie znacz\u0105co zmniejsza rozmiary pakiet\u00f3w i zwi\u0119ksza wydajno\u015b\u0107, czyni\u0105c Svelte mocnym kandydatem do budowania zar\u00f3wno ma\u0142ych, jak i du\u017cych aplikacji.<\/p>\n\n\n\n Ka\u017cda zmiana count automatycznie aktualizuje widok. Nie ma tu:<\/p>\n\n\n\n To podej\u015bcie jest bardzo intuicyjne \u2013 wszystko, co dotyczy komponentu, znajduje si\u0119 w jednym miejscu.<\/p>\n\n\n\n Przed kontynuowaniem upewnij si\u0119, \u017ce masz zainstalowany Node.js (https:\/\/nodejs.org\/) na swoim urz\u0105dzeniu. Mo\u017cesz to potwierdzi\u0107, uruchamiaj\u0105c w terminalu polecenia `node -v` i `npm -v`, aby sprawdzi\u0107 zainstalowane wersje.<\/p>\n\n\n\n Krok 1: Zainstaluj template Svelte<\/strong><\/p>\n\n\n\n Prostym sposobem na sklonowanie szablonu startowego jest u\u017cycie narz\u0119dzia `degit`:<\/p>\n\n\n To polecenie utworzy nowy projekt Svelte w katalogu `todo-app`.<\/p>\n\n\n\n Krok 2: Przejd\u017a do katalogu i zainstaluj zale\u017cno\u015bci<\/strong><\/p>\n\n\n\n Przejd\u017a do folderu projektu i zainstaluj niezb\u0119dne zale\u017cno\u015bci:<\/p>\n\n\n Krok 3: Uruchom serwer deweloperski<\/strong><\/p>\n\n\n\n Uruchom serwer deweloperski za pomoc\u0105 nast\u0119puj\u0105cego polecenia:<\/p>\n\n\n Twoja aplikacja dzia\u0142a teraz pod adresem http:\/\/localhost:8080<\/a>. Otw\u00f3rz ten adres URL w przegl\u0105darce, aby zobaczy\u0107 stron\u0119 pocz\u0105tkow\u0105 swojej aplikacji.<\/p>\n\n\n\n Teraz, gdy mamy skonfigurowany projekt, stw\u00f3rzmy prost\u0105 aplikacj\u0119 listy zada\u0144. Ten przyk\u0142ad pomo\u017ce Ci zrozumie\u0107 podstawowe poj\u0119cia Svelte, takie jak komponenty, reaktywno\u015b\u0107 i powi\u0105zania.<\/p>\n\n\n\n Krok 1: Skonfiguruj g\u0142\u00f3wny komponent<\/strong><\/p>\n\n\n\n Otw\u00f3rz `src\/App.svelte`. Zacznij od wyczyszczenia jego zawarto\u015bci, a nast\u0119pnie skonfigurujmy nasz\u0105 struktur\u0119 listy TODO. Najpierw zdefiniujmy podstawowy stan dla listy zada\u0144.<\/p>\n\n\n Krok 2: Utw\u00f3rz uk\u0142ad listy TODO<\/strong><\/p>\n\n\n\n Poni\u017cej znacznika `<script>`, dodaj formularz do przesy\u0142ania nowych zada\u0144 oraz list\u0119 do ich wy\u015bwietlania. W\u0142\u0105cz r\u00f3wnie\u017c interaktywne elementy do w\u0142\u0105czania i usuwania zada\u0144.<\/p>\n\n\n Krok 3: Przetestuj aplikacj\u0119<\/strong><\/p>\n\n\n\n Twoja lista zada\u0144 Svelte umo\u017cliwia u\u017cytkownikom:<\/p>\n\n\n\n Odwied\u017a ponownie http:\/\/localhost:8080<\/a> i sprawd\u017a swoj\u0105 aplikacj\u0119. Teraz mo\u017cesz dodawa\u0107 nowe zadania, prze\u0142\u0105cza\u0107 ich status uko\u0144czenia i usuwa\u0107 je.<\/p>\n\n\n\n Zrozumienie unikalnych cech i funkcjonalno\u015bci Svelte jest kluczowe dla pe\u0142nego wykorzystania jego potencja\u0142u. Poni\u017cej przedstawiamy niekt\u00f3re podstawowe poj\u0119cia, kt\u00f3re wspieraj\u0105 developer\u00f3w w tworzeniu wydajnych i reaktywnych aplikacji.<\/p>\n\n\n\n Aplikacje Svelte s\u0105 budowane z komponent\u00f3w, czyli podstawowych blok\u00f3w definiuj\u0105cych zar\u00f3wno UI, jak i zachowanie. W przeciwie\u0144stwie do tradycyjnych framework\u00f3w, komponenty Svelte s\u0105 definiowane w jednym pliku z trzema g\u0142\u00f3wnymi sekcjami:<\/p>\n\n\n\n Ta organizacja promuje czystsz\u0105 struktur\u0119, zawieraj\u0105c\u0105 ca\u0142\u0105 niezb\u0119dn\u0105 logik\u0119, style i szablony potrzebne do dzia\u0142ania komponentu.<\/p>\n\n\n\n Svelte upraszcza synchronizacj\u0119 element\u00f3w UI i stanu komponentu za pomoc\u0105 powi\u0105za\u0144 (ang. binding). Mo\u017cesz tworzy\u0107 dwukierunkowe powi\u0105zania mi\u0119dzy elementami formularzy a zmiennymi za pomoc\u0105 `bind:`.<\/p>\n\n\n Svelte oferuje funkcje cyklu \u017cycia, kt\u00f3re pozwalaj\u0105 wpi\u0105\u0107 si\u0119 w r\u00f3\u017cne etapy \u017cycia komponentu. S\u0105 one podobne do metod cyklu \u017cycia komponent\u00f3w w innych frameworkach.<\/p>\n\n\n\n Do zarz\u0105dzania stanem obejmuj\u0105cym wiele komponent\u00f3w lub ca\u0142\u0105 aplikacj\u0119, Svelte oferuje koncepcj\u0119 zwan\u0105 stores. Store to obiekt, kt\u00f3re utrzymuje i zarz\u0105dza wsp\u00f3\u0142dzielonym stanem, oferuj\u0105c prosty wzorzec interakcji, podobny do Redux lub Context API w React, ale mniej z\u0142o\u017cony.<\/p>\n\n\n\n Dynamika wizualna jest kluczowa dla do\u015bwiadczenia u\u017cytkownika, a Svelte oferuje wbudowane wsparcie dla przej\u015b\u0107 i animacji, pozwalaj\u0105c na deklaratywne definiowanie bogatych efekt\u00f3w ruchu.<\/p>\n\n\n Uda\u0142o Ci si\u0119 skonfigurowa\u0107 projekt Svelte i stworzy\u0107 funkcjonaln\u0105 aplikacj\u0119. To \u0107wiczenie nie tylko ukazuje prost\u0105 i eleganck\u0105 sk\u0142adni\u0119 Svelte, ale tak\u017ce jego pot\u0119\u017cn\u0105 reaktywno\u015b\u0107 i zdolno\u015bci do zarz\u0105dzania stanem.<\/p>\n\n\n\n Gdy poczujesz si\u0119 bardziej komfortowo ze Svelte, rozwa\u017c poznanie zaawansowanych funkcji, takich jak tworzenie komponent\u00f3w wielokrotnego u\u017cytku, korzystanie ze store\u2019a do zarz\u0105dzania stanem lub integrowanie us\u0142ug backendowych.<\/p>\n\n\n\n Oficjalne zasoby<\/p>\n\n\n\n Spo\u0142eczno\u015b\u0107 i por\u00f3wnania<\/p>\n\n\n\nCo to jest Svelte?<\/strong><\/h2>\n\n\n\n
Kluczowe cechy Svelte<\/strong><\/h2>\n\n\n\n
\n
\n
\nlet count = 0;\nfunction increment() {\n count += 1;\n}\n<\/pre><\/div>\n\n\n\n
\n
Komponent = HTML, CSS i JS w jednym pliku<\/strong><\/h3>\n\n\n
\n<script>\n let name = "John\u201d\n<\/script>\n\n<style>\n h1 { color: orange; }\n<\/style>\n\n<h1>Cze\u015b\u0107, {name}!<\/h1>\n<\/pre><\/div>\n\n\nSprawd\u017amy, jak to wygl\u0105da w praktyce \u2013 TODO App<\/strong><\/h2>\n\n\n\n
\nnpx degit sveltejs\/template todo-app\n<\/pre><\/div>\n\n\n
\ncd todo-app\t\nnpm install\n<\/pre><\/div>\n\n\n
\nnpm run dev\n<\/pre><\/div>\n\n\n
Aplikacja listy zada\u0144 TODO<\/strong><\/h2>\n\n\n\n
\n<script>\n let todos = [];\n let newTodo = '';\n \n function addTodo() {\n todos = [...todos, { text: newTodo, completed: false }];\n newTodo = '';\n }\n function toggleCompletion(index) {\n todos = todos.map((todo, i) =>\n i === index ? { ...todo, completed: !todo.completed } : todo\n );\n }\n function deleteTodo(index) {\n todos = todos.filter((_, i) => i !== index);\n }\n<\/script>\n<\/pre><\/div>\n\n\n\n<main>\n <h1>TODO App<\/h1>\n <div class="todo-form">\n <input placeholder="New TODO" type="text" bind:value={newTodo} \/>\n <button on:click={addTodo} disabled={!newTodo}>Add<\/button>\n <\/div>\n\n <ul>\n {#each todos as todo, index}\n <li>\n <input type="checkbox" on:change={() => toggleCompletion(index)} \/>\n <span class:completed={todo.completed}>{todo.text}<\/span>\n <button on:click={() => deleteTodo(index)}>Delete<\/button>\n <\/li>\n {\/each}\n <\/ul>\n<\/main>\n<\/pre><\/div>\n\n\n<style>\n .completed {\n text-decoration: line-through;\n color: grey;\n }\n main {\n padding: 2em;\n max-width: 600px;\n margin: 0 auto;\n }\n .todo-form {\n display: flex;\n gap: 0.5em;\n }\n input[type="text"] {\n flex-grow: 1;\n }\n ul {\n list-style-type: none;\n padding: 0;\n }\n li {\n display: flex;\n align-items: center;\n gap: 0.5em;\n padding: 0.5em 0;\n }\n button {\n cursor: pointer;\n }\n<\/style>\n\n<\/pre><\/div>\n\n\n\n
Architektura oparta na komponentach<\/strong><\/h3>\n\n\n\n
\n
Binding<\/strong><\/h3>\n\n\n\n
\n<input type="text" bind:value={name} \/>\n<\/pre><\/div>\n\n\nCykl \u017cycia<\/strong><\/h3>\n\n\n\n
\n
Stores<\/strong><\/h3>\n\n\n\n
Przej\u015bcia i animacje<\/strong><\/h3>\n\n\n\n
\n<p in:fade out:fade>Hello!<\/p>\n<\/pre><\/div>\n\n\n
![\"oferty](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/12\/praca-PL-k.jpg\")
<\/a><\/figure>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\n
Przydatne linki<\/strong><\/h2>\n\n\n\n
\n
\n