Szkolenie: Tworzenie aplikacji z użyciem VueJS
Vue wyróżnia się pośród frameworków progresywnym podejściem - możemy zacząć od prostych widżetów a skończyć na złożonej aplikacji single page
- Trenerzy praktycy
- Kameralne grupy
Czas trwania szkolenia:3 dni (24h)
Kod kursu:VUEJS
Tworzenie aplikacji z użyciem VueJS
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
Dla kogo?
Szkolenie VueJS - tworzenie aplikacji webowych przeznaczone 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
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
Wymagania
Od uczestników wymagana jest przynajmniej podstawowa umiejętność programowania w języku JavaScript
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
Program szkolenia
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