Web Components to kolekcja ustandaryzowanych niskopoziomowych API umożliwiających budowanie reużywalnych fragmentów interfejsu użytkownika.

Cel szkolenia

Poznanie założeń i zastosowań Web Components oraz narzędzi umożliwiających wydajną pracę z tymi technologiami.

Mocne strony szkolenia

Podejście warsztatowe - zestaw poruszanych zagadnień i ćwiczeń skonstruowany w taki sposób, aby uczetsnik w wyniku szkolenia zaimplementował typowe rozwiązania spotykane w realnych projektach.

Wymagania

Podstawowa znajomość JavaScript.

Parametry szkolenia

  • 2 * 8 godzin
  • wykłady i warsztaty
  • maksymalna liczba uczestników: 8

Program szkolenia

  1. Podstawy Web Components
    • Czym są Web Components?
    • Gdzie i dlaczego warto ich używać?
    • Ograniczenia
  2. Specyfikacje w praktyce
    • Custom Elements
    • Shadow DOM
    • ES Modules
    • HTML Template
  3. Wprowadzenie do warsztatu
    • Odświeżenie podstaw ES2015 (klasy, template strings)
    • Konfiguracja środowiska pracy
    • Definicja pierwszego komponentu
  4. API Web Components
    • Cykl życia
    • Obsługa zdarzeń
    • Definicje atrybutów konfigurujących komponent
    • Nasłuchiwanie zmian atrybutów
    • Sloty
    • Definicje własnych zdarzeń
  5. Stylowanie
    • Możliwości i ograniczenia
    • Tagi style wewnątrz komponentów
    • Selektory :host, :host-context i ::slotted
    • CSS custom properties
  6. 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ę
  7. 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ę
  8. Web Components a popularne frameworki/biblioteki
    • Angular Elements
    • Web Components a Vue
    • Integracja z React

Pytania?

* Wymagane.


Konsultant on-line
Skorzystaj z usług naszego konsultanta on-line.
Naciśnij przycisk ‘Skorzystaj’ aby przejść do okienka czatu
Kontakt
ul. Nowogrodzka 62c
02-002 Warszawa
Telefon +48 22 2035600
Fax +48 22 2035601
Email