Tworzenie aplikacji Full-Stack z użyciem SvelteKit
Czas trwania szkolenia:3 dni (24h)
Kod kursu:SVELTEKIT
Poziom zaawansowania:
O szkoleniu Tworzenie aplikacji Full-Stack z użyciem SvelteKit
W cenie otrzymasz:
- Materiały szkoleniowe
- Certyfikat ukończenia szkolenia
- W przypadku szkolenia w trybie stacjonarnym zapewnimy Ci również lunch oraz sprzęt niezbędny do nauki
Dla kogo?
- Programistów posiadających podstawową wiedzę z zakresu HTML, CSS, JavaScript/TypeScript, którzy chcą poznać zaawansowane techniki tworzenia aplikacji webowych przy użyciu frameworka Svelte w oparciu o narzędzie SvelteKit
- Programistów chcących poszerzyć swoje umiejętności front-end'owe o pełny stack, wykorzystując pełny potencjał programowania w JavaScript
Wymagania
- Podstawowa znajomość HTML, CSS
- Umiejętność programowania w JavaScript lub TypeScript
- Znajomość podstawowych koncepcji aplikacji serwerowych: komunikacja request — response w HTTP, podstawy budowania API, podstawy REST
Zalety
- Tworzymy aplikację w Svelte od zera do działającego projektu full-stack
- Poznajemy od podstaw wykorzystywane w nowoczesnych aplikacjach webowych elementy: routingu, komponentowej budowy, zarządzania stanem, hydracji
- Określamy i rozwiązujemy problemy związane z podejściem SPA (Single Page Application)
- Szkolenie "Tworzenie aplikacji Full-Stack z użyciem SvelteKit" zawiera odniesienia i porównania do innych frameworków oraz technologii, jest więc pomocą dla osób chcących "przejść" z innych frameworków do Svelte + SvelteKit
Cele szkolenia
- Poznanie sposobu na budowanie front-endu z pomocą Svelte
- Poznanie wad i zalet technik SSR (Server-Side Rendering), SSG (Static Site Generation) w konfrontacji z podejściem SPA (Single Page Application)
- Zdobycie praktycznych umiejętności budowania aplikacji za pomocą SvelteKit i Svelte
Program
Wprowadzenie do SvelteKit
- Scaffold nowego projektu
- Narzędzia developerskie, debugowanie
- Struktura projektu, kluczowe koncepcje i organizacja kodu
- Porównanie Svelte z innymi frameworkami
Budowa aplikacji Svelte
- Layout, strony i template dla komponentów
- Podstawowe dyrektywy i data binding
- Komponenty i ich komunikacja (props, events)
- Zarządzanie stylami css
- Obsługa zdarzeń
- Lokalny stan komponentu, reaktywność
- Lifecycle hooks
- Moduł współdzielony: $lib
- Elementy specjalne
Routing
- Wykorzystanie file-system routing
- Dynamiczne ścieżki
- Obsługa błędów i przekierowania
Komunikacja z back-end'em
- Data fetching
- Przekazywanie danych z poziomu back-end
- Server-side RESTful API
- Obsługa headers i cookies
Zarządzanie stanem w SvelteKit
- Context API
- Zarządzanie stanem z wykorzystaniem Store
- Tworzenie własnych magazynów danych
Obsługa Formularzy
- Obsługa natywnych elementów form
- Walidacja formularza
- Wsparcie JavaScript (progressive enhancement)
Renderowanie stron oraz deployment aplikacji
- Zmienne środowiskowe
- Omówienie rozwiązań: Hydracja, Prerendering
- SSR (Server-Side Rendering) vs CSR (Client-Side Rendering)
- SSG (Static Site Generation)
- Porównanie z podejściem: SPA (Single Page Application)
- Używanie adapterów w SvelteKit