Web Components

Czas trwania szkolenia:2 dni (16h)

Kod kursu:WEB/COMPONENTS

Poziom zaawansowania:
web-components

Szkolenie na zamówienie

  • Dostosowany program
  • Indywidualna wycena
  • Dowolny termin
Zapytanie o szkolenie

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

Podobne szkolenia