Idiomatische Web Components für jedes Frontend

Trainer & Termin

Trainer: Peter Kröner

Termin: Nach Absprache

Dauer: 2 Tage

Ort: Inhouse oder Remote

Beschreibung

Web Components ermöglichen wiederverwendbare, frameworkunabhängige UI-Komponenten – stabil, universell und wartungsfreundlich. Dieses Training zeigt Dir, wie Du Custom Elements idiomatisch einsetzt, ohne einfach Konzepte aus React oder Angular zu übernehmen. Statt gewohnte Framework-Muster blind zu übertragen, lernst Du, was Web Components wirklich ausmacht – und wie Du sie sauber und praxisnah entwickelst.

Du startest mit den Grundlagen der Element-Registrierung, Attribut-Verwaltung und dem Shadow DOM. Von dort arbeitest Du Dich Schritt für Schritt zu komplexeren Themen wie Lifecycle-Callbacks, Events und Form-Associated Custom Elements vor. Auch weniger bekannte, aber wichtige Web-APIs werden behandelt.

Ein zentrales Element des Trainings ist ein durchgängiges Praxisprojekt: eine vollständig eigene Dark-Mode-Toggle-Komponente. In dieses Beispiel fließen alle erlernten Konzepte ein – so kannst Du das Gelernte direkt anwenden und verankern.

Das Training richtet sich an Entwickler:innen aller Erfahrungsstufen – egal ob Du aus dem React-, Angular- oder dem „Vanilla-JavaScript“-Umfeld kommst. Ziel ist es, Dir zu zeigen, wie Du robuste und wartbare Komponenten entwickelst, die sich problemlos in jedes Frontend integrieren lassen.

Freu Dich auf zwei Tage voller Praxis, tiefem technischen Verständnis und einem modernen Blick auf Web Components – ganz ohne Framework-Zwang.

Agenda

• Einstieg in die Welt der Web Components
• Attribute und DOM-Features im Detail
• Web Components im Kontext
• Komponenten-UIs mit Shadow DOM
• Lifecycle- und Event-Management
• Form-Associated Custom Elements und Element Internals
• Best Practices und typische Stolperfallen:
• Accessibility
• Framework-Kompatibilität
• Single-Responsibility-Principle für HTML-Elemente
• Verspätete Upgrades handhaben
• Universelle Komponenten vs. App-Komponenten
• Regeln und Patterns guter HTML-Elemente

Voraussetzungen

• Notebook
• Erste Erfahrungen in der Webprogrammierung
  
  

Ablauf

Unsere Trainings starten täglich um 9:00 und enden gegen 17:00 Uhr. Die Kaffee- und Mittagspausen legen unsere Trainer:innen zusammen mit den Teilnehmer:innen fest. Am Ende des Trainings erhält jede:r Teilnehmer:in ein Zertifikat über die Schulungsteilnahme.

Unsere Trainer