Szkolenie Web Components

Design system napisany w jednym frameworku trzeba przepisywać przy każdej zmianie technologii. Web Components działają natywnie w przeglądarce, więc ten sam przycisk czy formularz użyjesz w Angularze, Reakcie i Vue.

Na szkoleniu budujesz własne komponenty na Custom Elements, Shadow DOM i szablonach HTML: z cyklem życia, zdarzeniami, slotami i reagowaniem na zmiany atrybutów. Potem sprawdzasz je w Angularze, Reakcie i Vue, testujesz w przeglądarce i przygotowujesz do publikacji jako paczkę.

Program

2 dni

• Custom Elements
  • Komponenty natywne a komponenty frameworków
  • Wsparcie przeglądarek: co jest w Baseline, a co wymaga obejścia (is="...", lokalne rejestry elementów)
  • Rejestracja elementu: customElements.define
  • Cykl życia: connectedCallback, disconnectedCallback
  • Atrybuty i właściwości: observedAttributes i attributeChangedCallback
  • Własne stany :state() przez CustomStateSet
  • Dlaczego unikać rozszerzania wbudowanych elementów przez is="..."
• Shadow DOM
  • Enkapsulacja stylów i znaczników
  • :host, ::slotted i konstruowane arkusze adoptedStyleSheets
  • Stylowanie z zewnątrz: ::part, zmienne CSS
  • Declarative Shadow DOM: podstawy
• Szablony i sloty
  • Element <template>
  • Sloty nazwane i domyślne, zdarzenie slotchange
• Komunikacja
  • Własne zdarzenia CustomEvent
  • Przekazywanie danych przez właściwości
• Formularze i dostępność
  • Elementy powiązane z formularzem (form-associated custom elements): pola działające z natywnym <form>
  • ElementInternals: role i stany ARIA bez atrybutów w DOM
  • Obsługa fokusu: delegatesFocus i tabindex
• Dystrybucja
  • Publikacja paczki: exports, typy i Custom Elements Manifest
  • Użycie bez bundlera: import maps
  • Lokalne rejestry elementów: dwie wersje komponentu na jednej stronie
• Biblioteki i frameworki
  • Lit jako lekka nakładka
  • React 19: natywna obsługa właściwości i zdarzeń custom elements
  • Ten sam komponent w Angularze i Vue na jednym przykładzie
• Testy
  • Testy w przeglądarce: Vitest Browser Mode albo Playwright

Dla kogo?

• Dla programistów, którzy budują design system dla kilku frameworków.
• Dla zespołów, które chcą uniezależnić komponenty od konkretnego frameworka.
• Dla autorów widgetów osadzanych na cudzych stronach i zespołów mikrofrontendów (architekturę mikrofrontendów omawiam na szkoleniu Architektura frontendu).

Co musisz umieć?

• Programować w JavaScript: klasy, moduły, zdarzenia.
• Znać API DOM: wyszukiwanie i tworzenie elementów, atrybuty.

Czego się nauczysz?

• Zbudujesz własny element z cyklem życia, atrybutami i zdarzeniami.
• Odizolujesz style komponentu przez Shadow DOM i udostępnisz punkty stylowania.
• Złożysz komponent z szablonu i slotów.
• Stworzysz komponent formularza, który działa z natywnym <form>.
• Opublikujesz komponent jako paczkę i ograniczysz konflikty nazw lokalnymi rejestrami elementów.
• Przepiszesz komponent na Lit, gdy natywne API to za mało.
• Użyjesz tego samego komponentu w Angularze, Reakcie i Vue.
• Przetestujesz komponent w prawdziwej przeglądarce.

Trener

Piotr Kowalski

W branży IT od 2008 roku. Od 2014 jest mentorem dla wielu developerów. Jako trener spędził na sali szkoleniowej kilka tysięcy godzin, a na LinkedIn ma 52 rekomendacje. Każde jego szkolenie to dawka solidnej wiedzy oraz humoru.

Więcej na stronie "O mnie"