Tworzenie aplikacji z użyciem VueJS
LICZBA DNI: 3 (24h)
KOD KURSU: VUEJS
Zapisz się na szkolenie
Dostosowany program 
O szkoleniu
DLA KOGO?
Kurs przeznaczony jest dla programistów posiadających podstawową wiedzę w zakresie JavaScript, którzy chcą poszerzyć swoje kompetencje związane z tworzeniem zaawansowanych aplikacji internetowych działających po stronie przeglądarki
WYMAGANIA
Od uczestników wymagana jest przynajmniej podstawowa umiejętność programowania w języku JavaScript
ZALETY
Charakterystyczną cechą szkolenia jest szeroki zakres przedstawionego materiału przy jednoczesnym skupieniu na aspekcie praktycznym
Największy nacisk położony jest na techniki i narzędzia, które sprawdzają się w rzeczywistych projektach i przynoszą największy wzrost wydajności pracy
Część warsztatowa szkolenia pozwala na osiągnięcie poziomu umiejętności pozwalających na samodzielne wykorzystanie zdobytej wiedzy od razu po zakończeniu kursu
Cele szkolenia
Zapoznanie uczestników z dobrymi praktykami programowania w najnowszej wersji języka JavaScript oraz praktycznymi zagadnieniami związanymi z tworzeniem aplikacji internetowych w architekturze "Single-page application" przy użyciu frameworka Vue.js
Konstruowanie czytelnych i wydajnych aplikacji JavaScript z wykorzystaniem aktualnych możliwości tego języka
Używanie elementów programowania funkcyjnego i reaktywnego do rozwiązywania typowych problemów
Prawidłowe i efektywne skonfigurowanie środowiska do pracy z zaawansowanymi projektami front-endowymi
Stosowanie mechanizmów pozwalających kontrolować jakość kodu aplikacji JavaScript
Stworzenie aplikacji opartej na komponentach
Samodzielne tworzenie zaawansowanych aplikacji webowych
Program
Wprowadzenie
- Vue Framework, czy biblioteka?
- Architektura aplikacji Vue
- Virtual DOM
- Podejście przyrostowe
- Proste aplikacje z Vue.js
Narzędzia ekosystemu Vue
- NodeJS i NPM
- Webpack, vue-loader
- Vue-CLI
- TypeScript
- Vue Devtools
- Pliki .vue
- Preprocesory CSS
Wiązania danych i widoku
- Obiekt data i model reaktywny
- Bindowanie tekstu i atrybutów
- Atrybuty style i class
- Dyrektywy v-bind, v-cloak, v-text i v-html
Manipulacja strukturą dokumentu
- ukrywanie z v-show, v-hide
- Renderowanie warunkowe z v-if, v-else
- Iteracje z v-for, zastosowanie atrybutu key
- Dostęp do indeksu tablicy i klucza obiektu
- Generowanie zakresów
- Użycie v-for z tagiem template
Praca z obiektami i tablicami
- Mechanizm wykrywania zmian Vue - jak działa?
- Rozszerzanie modelu o nowe dane
- Manipulacja tablicami
- Pułapki i dobre praktyki
Obsługa zdarzeń i formularze
- Dyrektywy v-on, v-once i wiązanie metod
- Obiekt $event, informacje o zdarzeniu
- Modyfikatory zdarzeń
- Obsługa różnych typów pól formularzy
- Dyrektywa v-model
- Zaawansowane możliwości v-model
Mechanizmy reaktywne i obserwowanie zmian
- Obserwowanie danych z Watchers
- opcje immediate i deep
- Computed - optymalizacja dynamicznych wartości
- gettery i settery a computed
Komponenty
- Rejestrowanie komponentu - lokalne i globalne
- Własności komponentu - Props
- Walidacja właściwości
- Właściwości opcjonalne i wymagane
- Cykl życia komponentu
- Emitowanie własnych typów zdarzeń
- Dziedziczenie atrybutów i zdarzeń
- Rozszerzanie komponentów
- Komunikacja z v-model
- Obiekty referencji DOM
- Asynchroniczne i leniwe ładowanie
Projekcja treści
- Mechanizm Slots
- Wiele slotów, sloty nazwane
- Opcjonalne sloty, treść domyślna, ukrywanie slotów
- Bindowanie danych do slotów
- Zaawansowane przykłady użycia slotów
Metody komunikacji HTTP
- Fetch API - użycie i polyfille
- Vue-Resource - konfiguracja i przykład użycia
- Axios - użycie, konfiguracja i interceptory
Routing
- Koncepcja Single Page Application
- Hash routing, a browser history API
- Konfiguracja Vue-Router
- Ścieżki
- Nazwane ścieżki
- Przekierowania
- Obsługa błędów
- Przekazywanie parametrów
- Obiekty $router i $route
- Tworzenie odnośników
- Oznaczanie bieżącej pozycji
- Nawigacja programistyczna, push i replace
- Dynamiczne adresy
- Router hooks, router guards - kontrola dostępu
- Zaawansowane możliwości i przykłady
Zarządzanie stanem aplikacji
- Wprowadzenie do Vuex
- Store, Akcje, Mutacje, Stan i Gettery
- Zasady działania, dobre praktyki
- Integracja z komponentami $store i helpery
- Moduły i namespaces
- Przykłady i dobre praktyki
Animacje aplikacji opartych o Vue.js
Informacje dodatkowe
- Vue Styleguide
- Vue i TypeScript
- SSR w Vue
TypeScript
- Kiedy i dlaczego używać TypeScript
- Vue CLI i TypeScript
- Konfiguracja kompilatora
- Komponenty jako klasy
- Dekoratory komponentu
- Props jako dekorator, dobre praktyki
- Watch i Computed w TypeScript
- Vue Stora i module jako klasy
- Dekoratory dla Vuex Store
- Definiowanie brakujących typów
Deployment
- Budowanie i optymalizacja vue
- Działanie routera na zdalnym serwerze
- Optymalizacje i dobre praktyki
Szkolenia powiązane
Nasi eksperci
Piotr Błaszczak
Full Stack Web Developer od 2007, konsultant i szkoleniowiec. Obecnie pisze backend w Node.js, a front w Angular. Miłośnik RxJS oraz grafowej bazy danych OrientDB. Ortodoksyjny ewangelista TypeScript ;). Poza pracą zawodową skacze na trampolinach, nurkuje na bezdechu, żongluje i balansuje na slackline. Jeden z organizatorów Urban Highline Festival w Lublinie. Pasję do sportu i programowania połączył budując aplikację slackmap.com.
DOWIEDZ SIĘ WIĘCEJ
Łukasz Andrzejewski
Doświadczony trener z ponad 13-letnią praktyką na sali szkoleniowej. Aktywnie działa jako konsultant i programista w zakresie szeroko pojętych technologii Java, rozwiązań frontendowych i mobilnych. Absolwent Wydziału Fizyki Technicznej Politechniki Poznańskiej, specjalizacja: Symulacje komputerowe. Aktualnie Partner, Head of Technology w Sages. Dba o rozwój oferty, przygotowuje i prowadzi szkolenia, konsultuje i bierze udział w realizacji projektów IT
DOWIEDZ SIĘ WIĘCEJ
Krzysztof Ścira
Absolwent AGH na kierunku Informatyka Stosowana (spec. IS w Hutnictwie), od lat związany z konferencjami, meetupami i wykładami otwartymi o tematyce front-endu i mobile. Przede wszystkim czynny programista, szkolenia prowadzi z pasji i chęci dzielenia się praktyczną wiedzą. Z firmą SAGES związany od wielu lat.
DOWIEDZ SIĘ WIĘCEJ