Tworzenie aplikacji z użyciem VueJS
Czas trwania szkolenia:3 dni (24h)
Kod kursu:VUEJS
Poziom zaawansowania:
Dostępne terminy
Termin:
Termin:
Nie odpowiada Ci żaden z dostępnych terminów?
Zapytaj o szkolenieO szkoleniu Tworzenie aplikacji z użyciem VueJS
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
Wymagania
- Od uczestników wymagana jest przynajmniej podstawowa umiejętność programowania w języku JavaScript
Zalety
- Szkolenie VueJS - tworzenie aplikacji webowych wyróżnia 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
- Praktyka przed teorią - wszystkie szkolenia technologiczne prowadzone są w formie warsztatowej. Konieczna teoria jest wyjaśniana na przykładzie praktycznych zadań
- Konkretne umiejętności - w ramach każdego szkolenia rozwijamy praktyczne umiejętności związane z daną technologią i tematyką
- Nauka z praktykami - wszyscy trenerzy na co dzień pracują w projektach, gwarantuje to dostęp do eksperckiej wiedzy i praktycznego know-how
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 frontendowymi
- 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
- Computed - optymalizacja dynamicznych wartości
Komponenty
- Rejestrowanie komponentu - lokalne i globalne
- Własności komponentu - Props
- 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 polyfill
- Vue-Resource - konfiguracja i przykład użycia
- Axios - użycie, konfiguracja i interceptor
Routing
- Koncepcja Single Page Application
- Hash routing, a browser history API
- Konfiguracja Vue-Router
- 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 helper
- 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
Autorem szkolenia jest Mateusz Kulesza
Senior developer, konsultant i szkoleniowiec. Pracował z wieloma polskimi i zagranicznymi firmami nad projektami z sektorów e-learning, reklamy, e-commerce, transportu oraz bankowości i finansów. Z technologiami Internetowymi pracuje od ponad 10 lat. Pasjonat technologii front-end, JavaScript'u a także marketingu internetowego i e-commerce.
Więcej o mnie »