Pierwsze kroki w Svelte – TODO App

Jeśli interesujesz się frontendem, to prawdopodobnie znasz już Reacta, Vue czy Angulara. Każdy z nich oferuje narzędzia, ale jednocześnie wymaga pracy z warstwą, która obsługuje wirtualny DOM, rozbudowane API, a czasem sporą dawkę konfiguracji.

Framework Svelte powstał jako odpowiedź na te problemy – z założeniem, że aplikacje frontendowe mogą być szybsze, lżejsze i prostsze.

Chciałbym przedstawić Ci jego podstawowe założenia, filozofię oraz to, czym różni się od pozostałych frameworków. Jeśli planujesz spróbować czegoś nowego – to ciekawa propozycja. Svelte wciąż zdobywa uznanie wśród developerów dzięki swojej nowatorskiej metodzie tworzenia reaktywnych interfejsów użytkownika, co sprawia, że rozpoczęcie z nim pracy staje się kuszącym krokiem. Niezależnie od tego, czy przechodzisz z innego frameworka, czy też dopiero zaczynasz swoją przygodę z web developmentem, ten tutorial poprowadzi Cię przez konfigurację pierwszego projektu w Svelte i przybliży podstawowe założenia tego narzędzia.

Co to jest Svelte?

Svelte to framework JavaScript służący do budowy interfejsów użytkownika, podobnie jak React czy Vue. Został wprowadzony w 2016 roku przez Richa Harrisa jako nowoczesne podejście do tworzenia UI, które wykracza poza tradycyjny wirtualny DOM. W przeciwieństwie do innych frameworków (jak React i Angular), Svelte koncentruje się na optymalizacji podczas kompilacji, a nie w czasie działania aplikacji. W jej trakcie narzędzie generuje wydajny kod JavaScript, dzięki czemu działa on szybciej w runtime.

To unikalne podejście znacząco zmniejsza rozmiary pakietów i zwiększa wydajność, czyniąc Svelte mocnym kandydatem do budowania zarówno małych, jak i dużych aplikacji.

Kluczowe cechy Svelte

1. Brak wirtualnego DOM – w przeciwieństwie do frameworków korzystających z wirtualnych DOM do stosowania zmian, Svelte aktualizuje DOM, gdy zmienia się stan aplikacji. Efekt:
   • mniej operacji,
   • szybsze działanie,
   • lepsza wydajność na słabszych urządzeniach.
2. Reaktywny kod – zamiast zarządzania przez biblioteki do zarządzania stanem lub hooki, reaktywność w Svelte jest wbudowana w język, co umożliwia bezpośrednie podejście do aktualizacji elementów UI. W Svelte reaktywność działa na poziomie zmiennych:

let count = 0;
function increment() {
  count += 1;
}

Każda zmiana count automatycznie aktualizuje widok. Nie ma tu:

• setState(),
• reducerów,
• hooków,
• klasowych komponentów.

3. Izolowane style – komponenty Svelte automatycznie izolują style zdefiniowane w blokach `<style>`, aby zapobiec ich przeciekaniu między komponentami, co zapewnia utrzymanie i brak konfliktów w CSS.
4. Efektywna rekompilacja – dzięki przekształcaniu komponentów w kod imperatywny podczas kompilacji, Svelte zmniejsza obciążenie w czasie działania i upraszcza optymalizacje.
5. Łatwość użycia –składnia Svelte jest opisowa, ale zwięzła, co pozwala developerom o różnym poziomie doświadczenia szybko rozpocząć pracę nad nowym projektem lub wdrożyć się w już istniejący.

Komponent = HTML, CSS i JS w jednym pliku

<script>
  let name = "John”
</script>

<style>
  h1 { color: orange; }
</style>

<h1>Cześć, {name}!</h1>

To podejście jest bardzo intuicyjne – wszystko, co dotyczy komponentu, znajduje się w jednym miejscu.

Sprawdźmy, jak to wygląda w praktyce – TODO App

Przed kontynuowaniem upewnij się, że masz zainstalowany Node.js (https://nodejs.org/) na swoim urządzeniu. Możesz to potwierdzić, uruchamiając w terminalu polecenia `node -v` i `npm -v`, aby sprawdzić zainstalowane wersje.

Krok 1: Zainstaluj template Svelte

Prostym sposobem na sklonowanie szablonu startowego jest użycie narzędzia `degit`:

npx degit sveltejs/template todo-app

To polecenie utworzy nowy projekt Svelte w katalogu `todo-app`.

Krok 2: Przejdź do katalogu i zainstaluj zależności

Przejdź do folderu projektu i zainstaluj niezbędne zależności:

cd todo-app	
npm install

Krok 3: Uruchom serwer deweloperski

Uruchom serwer deweloperski za pomocą następującego polecenia:

npm run dev

Twoja aplikacja działa teraz pod adresem http://localhost:8080. Otwórz ten adres URL w przeglądarce, aby zobaczyć stronę początkową swojej aplikacji.

Aplikacja listy zadań TODO

Teraz, gdy mamy skonfigurowany projekt, stwórzmy prostą aplikację listy zadań. Ten przykład pomoże Ci zrozumieć podstawowe pojęcia Svelte, takie jak komponenty, reaktywność i powiązania.

Krok 1: Skonfiguruj główny komponent

Otwórz `src/App.svelte`. Zacznij od wyczyszczenia jego zawartości, a następnie skonfigurujmy naszą strukturę listy TODO. Najpierw zdefiniujmy podstawowy stan dla listy zadań.

<script>
    let todos = [];
    let newTodo = '';
   
    function addTodo() {
        todos = [...todos, { text: newTodo, completed: false }];
        newTodo = '';
    }
    function toggleCompletion(index) {
        todos = todos.map((todo, i) =>
            i === index ? { ...todo, completed: !todo.completed } : todo
        );
    }
    function deleteTodo(index) {
        todos = todos.filter((_, i) => i !== index);
    }
</script>

Krok 2: Utwórz układ listy TODO

Poniżej znacznika `<script>`, dodaj formularz do przesyłania nowych zadań oraz listę do ich wyświetlania. Włącz również interaktywne elementy do włączania i usuwania zadań.

<main>
    <h1>TODO App</h1>
    <div class="todo-form">
        <input placeholder="New TODO" type="text" bind:value={newTodo} />
        <button on:click={addTodo} disabled={!newTodo}>Add</button>
    </div>

    <ul>
    {#each todos as todo, index}
        <li>
            <input type="checkbox" on:change={() => toggleCompletion(index)} />
            <span class:completed={todo.completed}>{todo.text}</span>
            <button on:click={() => deleteTodo(index)}>Delete</button>
        </li>
    {/each}
    </ul>
</main>

<style>
    .completed {
        text-decoration: line-through;
        color: grey;
    }
    main {
        padding: 2em;
        max-width: 600px;
        margin: 0 auto;
    }
    .todo-form {
        display: flex;
        gap: 0.5em;
    }
    input[type="text"] {
        flex-grow: 1;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 0.5em 0;
    }
    button {
        cursor: pointer;
    }
</style>

Krok 3: Przetestuj aplikację

Twoja lista zadań Svelte umożliwia użytkownikom:

• dodawanie nowych zadań,
• oznaczanie zadań jako zakończone,
• usuwanie zadań z listy.

Odwiedź ponownie http://localhost:8080 i sprawdź swoją aplikację. Teraz możesz dodawać nowe zadania, przełączać ich status ukończenia i usuwać je.

Zrozumienie unikalnych cech i funkcjonalności Svelte jest kluczowe dla pełnego wykorzystania jego potencjału. Poniżej przedstawiamy niektóre podstawowe pojęcia, które wspierają developerów w tworzeniu wydajnych i reaktywnych aplikacji.

Architektura oparta na komponentach

Aplikacje Svelte są budowane z komponentów, czyli podstawowych bloków definiujących zarówno UI, jak i zachowanie. W przeciwieństwie do tradycyjnych frameworków, komponenty Svelte są definiowane w jednym pliku z trzema głównymi sekcjami:

• `<script>`,
• `<style>`,
• znacznikami HTML.

Ta organizacja promuje czystszą strukturę, zawierającą całą niezbędną logikę, style i szablony potrzebne do działania komponentu.

Binding

Svelte upraszcza synchronizację elementów UI i stanu komponentu za pomocą powiązań (ang. binding). Możesz tworzyć dwukierunkowe powiązania między elementami formularzy a zmiennymi za pomocą `bind:`.

<input type="text" bind:value={name} />

Cykl życia

Svelte oferuje funkcje cyklu życia, które pozwalają wpiąć się w różne etapy życia komponentu. Są one podobne do metod cyklu życia komponentów w innych frameworkach.

• onMount – wywoływana po pierwszym renderowaniu komponentu do DOM.
• onDestroy – wykonywana, gdy komponent jest usuwany z DOM.

Stores

Do zarządzania stanem obejmującym wiele komponentów lub całą aplikację, Svelte oferuje koncepcję zwaną stores. Store to obiekt, które utrzymuje i zarządza współdzielonym stanem, oferując prosty wzorzec interakcji, podobny do Redux lub Context API w React, ale mniej złożony.

Przejścia i animacje

Dynamika wizualna jest kluczowa dla doświadczenia użytkownika, a Svelte oferuje wbudowane wsparcie dla przejść i animacji, pozwalając na deklaratywne definiowanie bogatych efektów ruchu.

<p in:fade out:fade>Hello!</p>

Podsumowanie

Udało Ci się skonfigurować projekt Svelte i stworzyć funkcjonalną aplikację. To ćwiczenie nie tylko ukazuje prostą i elegancką składnię Svelte, ale także jego potężną reaktywność i zdolności do zarządzania stanem.

Gdy poczujesz się bardziej komfortowo ze Svelte, rozważ poznanie zaawansowanych funkcji, takich jak tworzenie komponentów wielokrotnego użytku, korzystanie ze store’a do zarządzania stanem lub integrowanie usług backendowych.

Przydatne linki

Oficjalne zasoby

• Oficjalna strona Svelte – oficjalne samouczki i dokumentacja (choć link prowadzi do strony z samouczkiem, która jest częścią oficjalnych zasobów).
• SvelteKit – oficjalny framework full-stack oparty na Svelte.
• GitHub – repozytorium kodu źródłowego projektu (open-source).
• MDN Web Docs – wprowadzenie do Svelte, które może pomóc w rozpoczęciu pracy. 

Społeczność i porównania

• Wikipedia – ogólne informacje o Svelte.
• Hacker News – dyskusja na temat projektu Svelte.
• Bulldogjob – artykuł porównujący Svelte z React.
• Creole Studios – artykuł porównujący Svelte z ReactJS.
• Cubet – artykuł o zaletach Svelte.