Webdesign-Komponenten benutzerdefiniert erstellen

Seminarziel

Das Seminarziel ist die umfassende Qualifikation der Teilnehmer in der  Entwicklung von benutzerdefinierten Web-Komponenten. Es strebt an,  sowohl das technische Know-how als auch das Verständnis für bewährte  Methoden in der modernen Webentwicklung zu vertiefen. Dabei legt das  Seminar besonderen Wert auf die Anwendbarkeit der erlernten Fähigkeiten  über verschiedene Frameworks hinweg und betont die Bedeutung von  Teamarbeit und qualitativ hochwertigem Code. Die Absolventen sollten am  Ende in der Lage sein, das Gelernte nahtlos in ihre berufliche Praxis zu  integrieren, um effiziente und nachhaltige Webanwendungen zu  entwickeln.

Inhalt

• Was sind Web-Komponenten?
  • Definition und Konzepte
  • Custom Elements, Shadow DOM und Templates
  • Beispiel und Demo
• Vorteile und Anwendungsfälle von Web-Komponenten
  • Wiederverwendbarkeit und Isolation
  • Cross-Framework-Kompatibilität
  • Realwelt-Beispiele
• Überblick über HTML, CSS, JavaScript
  • Grundlagen und Syntax
  • DOM-Manipulationen
  • Ereignisbehandlung
• Einführung in den Shadow DOM
  • Was ist Shadow DOM?
  • Vorteile der Verwendung
  • Beispielszenarien
• Browser-Kompatibilität und Polyfills
  • Unterstützung in modernen Browsern
  • Verwendung von Polyfills
  • Testen der Kompatibilität
• Einrichten der Entwicklungs-Umgebung
  • Installation benötigter Software
  • Projektstruktur
  • Versionskontrolle
• Wahl der richtigen Tools und Libraries
  • Übersicht über vorhandene Libraries (LitElement, Stencil, etc.)
  • Installation und Konfiguration
  • Einfache Beispiele
• Erstellung einer einfachen Web-Komponente
  • Basisstruktur und Syntax
  • Attribute und Methoden
  • Erstes Beispielprojekt
• Debugging-Tools und Techniken
  • Browser-Entwicklertools
  • Debugging im Shadow DOM
  • Common Pitfalls
• Unit Testing und Integration Testing
  • Einführung in Testing-Frameworks
  • Schreiben von Testfällen
  • Automatisierung und CI/CD
• Attribute und Eigenschaften in Web-Komponenten
  • Unterschied zwischen Attributen und Eigenschaften
  • Synchronisation und Datenfluss
  • Beispielimplementierung
• Datenbindung und Kommunikation zwischen Komponenten
  • Event Handling und Custom Events
  • Datenfluss und State Management
  • Anwendungsbeispiele
• Lebenszyklus-Callbacks und Methoden
  • connectedCallback, disconnectedCallback etc.
  • Use-Cases und Best Practices
  • Demo und Übungen
• Styling: Scoped CSS und CSS-Variablen
  • Einführung in Scoped CSS
  • Verwendung von CSS-Variablen
  • Theming und Styling-Tricks
• Integration mit verschiedenen Frameworks
  • Angular und Custom Elements
  • React und Refs
  • Vue und lokale Registrierung
• Code-Qualität und Best Practices
  • Code-Organisation und -Strukturierung
  • Code-Style und Linting
  • Sicherheitsaspekte
• Performance-Optimierungen
  • Lazy Loading und Code-Splitting
  • Ressourcen-Optimierung
  • Messung und Monitoring
• Erstellen der Dokumentation
  • Wichtige Dokumentationspunkte
  • Werkzeuge für die Dokumentation
  • ReadMe und API-Dokumente
• Gemeinsame Entwicklung einer benutzerdefinierten Web-Komponente
  • Planung und Aufteilung der Aufgaben
  • Entwicklung im Team
  • Abschließende Präsentation
• Code-Review und Abschlussdiskussion
  • Best Practices für Code-Reviews
  • Feedback und Verbesserungspunkte
  • Nächste Schritte und Ressourcen