Web Components
Czas trwania szkolenia:2 dni (16h)
Kod kursu:WEB/COMPONENTS
Poziom zaawansowania:
O szkoleniu Web Components
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?
- Dla programistów chcących zapoznać się ze standardem WebComponents
Wymagania
- Podstawowa znajomość JavaScript
Zalety
- Szkolenie Web components reprezentuje podejście warsztatowe - zestaw poruszanych zagadnień i ćwiczeń skonstruowany w taki sposób, aby uczestnik w wyniku szkolenia zaimplementował typowe rozwiązania spotykane w realnych projektach
- 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
- Szkolenie Web components umożliwia poznanie założeń i zastosowań Web Components oraz narzędzi umożliwiających wydajną pracę z tymi technologiami
Program
Podstawy Web Components
- Czym są Web Components?
- Gdzie i dlaczego warto ich używać?
- Ograniczenia
Specyfikacje w praktyce
- Custom Elements
- Shadow DOM
- ES Modules
- HTML Template
Wprowadzenie do warsztatu
- Odświeżenie podstaw ES2015 (klasy, template strings)
- Konfiguracja środowiska pracy
- Definicja pierwszego komponentu
API Web Components
- Cykl życia
- Obsługa zdarzeń
- Definicje atrybutów konfigurujących komponent
- Nasłuchiwanie zmian atrybutów
- Sloty
- Definicje własnych zdarzeń
Stylowanie
- Możliwości i ograniczenia
- Tagi style wewnątrz komponentów
- Selektory :host, :host-context i ::slotted
- CSS custom properties
Biblioteki Web Components: Stencil
- Wprowadzenie do Stencil
- Konfiguracja projektu
- Tworzenie komponentów Stencil
- Wprowadzenie do JSX
- Praca z Props
- Obsługa zdarzeń
- Cykl życia komponentu
- Definicja metod
- Przygotowanie na produkcję
Biblioteki Web Components: LitElement
- Wprowadzenie do LitElement
- Porównanie ze Stencil
- Budowa szablonów z lit-html
- Stylowanie
- Praca z Props
- Obsługa zdarzeń
- Cykl życia komponentu
- Przygotowanie na produkcję
Web Components a popularne frameworki/biblioteki
- Angular Elements
- Web Components a Vue
- Integracja z React
