Szkolenie Vue.js
Poziom
ZaawansowanyCzas
24h / 3 dniTermin
IndywidualnieCena
IndywidualnieSzkolenie z Vue.js
Vue.js to nowoczesny framework JavaScript do budowania aplikacji internetowych opartych o komponenty, reaktywność i przejrzysty przepływ danych. Szkolenie koncentruje się na aktualnym ekosystemie Vue 3, w tym Composition API, Vue Router, Pinia, Vite, komunikacji z API, optymalizacji wydajności, podstawach PWA oraz procesie deploymentu i CI/CD. Efektywna praca z Vue.js wymaga nie tylko znajomości składni i kluczowych funkcjonalności frameworka, ale także rozumienia architektury aplikacji przeglądarkowych, organizacji stanu, projektowania komponentów, obsługi błędów, jakości kodu oraz ograniczeń rozwiązań front-endowych. Uczestnicy rozwijają praktyczne podejście do budowy aplikacji, które są czytelne, skalowalne i gotowe do dalszego utrzymania.
Dla kogo jest to szkolenie?
Dla programistów tworzących warstwę kliencką aplikacji internetowych z wykorzystaniem HTML, CSS i JavaScript lub pokrewnych frameworków, takich jak React.js i Angular-
Dla programistów, którzy mają doświadczenie z JavaScriptem lub Node.js i chcą uporządkować pracę z Vue 3, komponentami, routingiem, stanem aplikacji oraz komunikacją z API
Czego nauczysz się na szkoleniu?
- Zaprojektujesz strukturę aplikacji Vue 3 z komponentami, reaktywnością i czytelnym przepływem danych
- Przygotujesz środowisko pracy z wykorzystaniem współczesnych narzędzi, w tym Vite, Vue DevTools i narzędzi jakości kodu
- Zastosujesz Vue Router do obsługi wielu widoków, tras dynamicznych oraz komponentów asynchronicznych
- Uporządkujesz centralny stan aplikacji z wykorzystaniem Pinia oraz dobierzesz granice odpowiedzialności między stanem lokalnym i globalnym
- Zbudujesz komunikację z zewnętrznym API, obsłużysz autoryzację, walidację odpowiedzi, błędy i stany ładowania
- Przygotujesz podstawową optymalizację wydajności, elementy PWA oraz przykładowy proces deploymentu i CI/CD dla aplikacji Vue
Program szkolenia Vue.js
Dzień 1
Wprowadzenie
- Podstawowe cechy frameworka i ekosystemu Vue 3
- Architektura aplikacji Vue i rola komponentów
- Composition API, Options API i kryteria doboru podejścia
- Konfiguracja środowiska programistycznego
- Narzędzia programistyczne, Vite, Vue DevTools i struktura projektu Vue
- Organizacja katalogów, plików konfiguracyjnych i zależności projektu
Podstawowa budowa aplikacji internetowej
- Architektura komponentów
- Komunikacja pomiędzy komponentami
- Przepływ danych w aplikacji
- Props, emit, slots i podstawowe wzorce kompozycji
- Reaktywność, computed, watch i ref
- Reużywalne komponenty, composables i współdzielenie logiki
- Granice odpowiedzialności komponentów i czytelna struktura widoku
Praca ze stylami
- Style komponentów i całej aplikacji
- Dziedziczenie, zakres stylów i współdzielenie reguł
- Scoped styles i izolacja reguł w komponentach
- Zmienne, mixiny i struktura plików Sass
- Zaawansowane style z wykorzystaniem Sass
- Spójność wizualna, klasy pomocnicze i podstawy design systemu
Zarządzanie widokami z vue-router
- Widoki aplikacji i struktura tras
- Konfiguracja routera i organizacja plików tras
- Widoki i komponenty asynchroniczne
- Dynamiczne ścieżki, parametry tras i ochrona dostępu
- Nawigacja programowa i obsługa przekierowań
- Lazy loading widoków i podział kodu aplikacji
Dzień 2
Centralny stan aplikacji – Pinia
- Architektura stanu aplikacji
- Stan lokalny komponentu a stan globalny aplikacji
- Modularność stanu i separacja odpowiedzialności
- Stores, actions, getters i integracja z komponentami
- Integracja stanu z komponentami i widokami
- Persystencja wybranych danych i ograniczenia przechowywania po stronie klienta
- Narzędzia diagnostyczne i kontrola zmian stanu
Komunikacja z API
- Konfigurowalne i reużywalne serwisy komunikacji z API
- Warstwa klienta HTTP i separacja logiki komunikacji
- Parametry zapytań, nagłówki i struktura odpowiedzi
- Walidacja odpowiedzi i przechowywanie danych w stanie aplikacji
- Formatowanie i prezentacja odpowiedzi w komponentach i widokach
- Stany ładowania, brak danych i podstawowa obsługa błędów
- Granice odpowiedzialności między serwisem API, store i komponentem
Zaawansowana komunikacja z API
- Stany ładowania aplikacji i kontrola przepływu danych
- Obsługa błędów i komunikaty dla użytkownika
- Autoryzacja użytkownika z wykorzystaniem zewnętrznych serwisów
- Tokeny, odświeżanie sesji i ochrona wybranych widoków
- Interceptory zapytań i centralizacja obsługi błędów
- Retry, timeouty i podstawowe scenariusze odporności komunikacji
- Walidacja ryzyk komunikacji z API i ograniczenia po stronie front-endu
Dzień 3
Profilowanie wydajności aplikacji
- Podstawowe metryki wydajności
- Analiza czasu ładowania i rozmiaru zasobów aplikacji
- Optymalizacja ładowania aplikacji, lazy loading i podział kodu
- Diagnostyka renderowania komponentów i zbędnych aktualizacji widoku
- Optymalizacja list, zasobów statycznych i zależności zewnętrznych
- Vue DevTools i narzędzia przeglądarki w analizie wydajności
- Kompromisy między wydajnością, czytelnością i kosztem utrzymania
Podstawy PWA (progresywnych aplikacji internetowych)
- Wymagania aplikacji dla PWA
- Manifest aplikacji i podstawowe metadane instalacyjne
- Service worker i mechanizmy cache
- Podstawowe funkcjonalności PWA, service worker i manifest aplikacji
- Tryb offline, ograniczenia synchronizacji i scenariusze degradacji działania
- Bezpieczeństwo kontekstu HTTPS i wymagania przeglądarek
- Kryteria zasadności PWA w aplikacji biznesowej
Deployment aplikacji i CI/CD
- Wymagania dla środowiska produkcyjnego
- Konfiguracja zmiennych środowiskowych i build produkcyjny
- Popularne rozwiązania do wydajnego uruchamiania i budowania aplikacji JavaScript
- Hosting aplikacji statycznej i integracja z backendem
- Przykładowy proces CI/CD dla aplikacji JavaScript
- Automatyzacja kontroli jakości, testów i procesu publikacji
- Monitoring działania aplikacji front-endowej i podstawowa diagnostyka błędów
