Design Patterns in der Webentwicklung

Seminarziel

Das Seminarziel für Design Patterns in der Webentwicklung besteht darin,  den Teilnehmenden ein tiefes Verständnis und praktische Kenntnisse über die Grundlagen und Anwendungen von Design Patterns zu vermitteln. Dies  soll sie befähigen, qualitativ hochwertigen, skalierbaren und wartbaren Code für Webprojekte zu schreiben. Im Laufe des Seminars werden sie die Relevanz von Design Patterns für die Webentwicklung erkennen und deren Wert in Bezug auf Effizienz und Code-Qualität schätzen lernen. Durch  eine Kombination aus theoretischem Lernen und interaktiven Übungen werden die Teilnehmenden nicht nur über die am häufigsten verwendeten Design Patterns informiert, sondern auch in die Lage versetzt, diese Patterns effektiv in ihren eigenen Webentwicklungsprojekten anzuwenden.

Inhalt

• Einführung
  • Design Patterns im Kontext von Webentwicklung
  • Nutzung von Patterns in gängigen Web-Frameworks und Libraries
  • Auswirkungen von Design Patterns auf Performance und User Experience
• Singleton Pattern
  • Einsatz in Web-Settings: Globaler State oder Service-Instanzen
  • Fallstricke: Thread-Sicherheit und Lazy-Initialization in Web-Apps
  • Beispiele: Singleton in JavaScript und Single Page Applications (SPAs)
• Factory & Abstract Factory Patterns
  • Verwendung in der Erstellung von Web-Komponenten oder Widgets
  • Abstraktion von Browser-spezifischen Features
  • Beispiele: Plugin-Erzeugung, Cross-Browser HTML-Elemente
• Prototype Pattern
  • Vorteile bei der DOM-Manipulation und Objekt-Klonung
  • Prototyp-basierte Vererbung in JavaScript
  • Beispiele: Schnelle Objekt-Instanziierung ohne teure "new"-Aufrufe
• Adapter Pattern
  • Integration älterer APIs oder Drittanbieter-Bibliotheken
  • Wrapper für unterschiedliche Web-Service-Calls
  • Beispiele: Anpassung von Daten für Visualisierungsbibliotheken
• Decorator Pattern
  • Dynamische Erweiterung von Web-Komponenten
  • Anreicherung von DOM-Elementen zur Laufzeit
  • Beispiele: Ergänzung von Formularfeldern mit Validierungsfunktionen
• Composite Pattern
  • Hierarchische Darstellung von UI-Komponenten
  • Rekursive Render-Muster in Web-Frameworks
  • Beispiele: Navigation Menüs, Verzeichnisbäume
• Proxy Pattern
  • Lazy-Loading von Web-Assets und Daten
  • Interzeption von API-Anfragen für Logging oder Caching
  • Beispiele: Bilder nach Bedarf laden, API-Caching-Mechanismen
• Bridge Pattern
  • Entkopplung von Abstraktionen in modularen Web-Apps
  • Cross-Platform-Webentwicklung: Gemeinsame Logik + Plattformspezifische Implementierungen
  • Beispiele: Web-Apps, die sowohl im Browser als auch als mobile Apps funktionieren
• Observer Pattern
  • Event-basierte Interaktionen im Frontend
  • Realisierung von Datenbindung in Web-Frameworks
  • Beispiele: Benutzerinteraktions-Events, "Reaktive" Webanwendungen
• Strategy Pattern
  • Dynamische Inhaltsrenderung basierend auf dem Nutzerverhalten
  • A/B-Testing und adaptiver Content
  • Beispiele: Verschiedene Render-Strategien basierend auf Gerätetyp oder User-Einstellungen
• Command Pattern
  • Queuing von Benutzeraktionen, z. B. für Undo/Redo
  • Abstraktion von AJAX-Anfragen
  • Beispiele: Text-Editor-Aktionen, sequenzielle Netzwerkanfragen
• Mediator Pattern
  • Zentrale Event-Handler in komplexen Web-Apps
  • Vereinfachung der Kommunikation zwischen Web-Komponenten
  • Beispiele: Dashboard-Anwendungen, Chat-Anwendungen
• State Pattern
  • Verwaltung des Zustands von SPAs
  • Dynamische UI-Änderungen basierend auf internen Zustandsänderungen
  • Beispiele: Web-Formular-Flows, interaktive Spiele