ASP.NET Modulare UI mit Blazor

Seminarziel

Nach dem Seminar können Sie komplexe Blazor-Anwendungen in modulare, wartbare und wiederverwendbare Komponenten zerlegen. Sie beherrschen den Aufbau generischer Komponenten, den Einsatz von Templates und RenderFragments sowie die Verwaltung von Zustand über Komponenten hinweg. Zudem entwickeln Sie ein eigenes Mini-UI-Kit und lernen Best Practices für komponentenbasierte UI-Architekturen in Blazor kennen.

Inhalt

• Einführung
  • Zielsetzung: Warum modulare Komponenten?
  • Überblick: Komponentenarchitektur in Blazor
  • Projektstruktur für komponentenbasiertes Arbeiten
• Blazor-Komponenten - Grundlagen für Wiederverwendbarkeit
  • Komponenten-Syntax und Lifecycle-Methoden
  • Parameter und EventCallbacks
  • Komponentenverschachtelung und Scoping
  • Code-Behind vs Inline-Code
• Komponenten modular gestalten
  • Strukturierung und Organisation von Komponenten
  • Input/Output-Strategien (Props/Events analog zu anderen Frameworks)
  • Lokale vs. globale Komponenten
  • Utility-Komponenten (z. B. Loader, Badge etc.)
• Generische Komponenten
  • Motivation und Einsatzzwecke
  • Syntax von generischen Komponenten
  • Beispiel: ListView<T> mit Template-Parameter
  • Einschränkungen und Typenbeschränkungen (where T : ...)
  • Praktische Anwendung: Tabellen, Formulare, dynamische Inhalte
• Cascading Values and Parameters
  • Grundlagen von Cascading Values
  • Unterschied zu regulären Parametern
  • Szenarien: Theme, User Context, Localization
  • Verschachtelte Komponenten und Scoped Cascading
  • Vorsicht bei Überverwendung
• Templates und RenderFragment
  • RenderFragment und RenderFragment<T>
  • Kompositionsmuster: Header/Footer/Body per Template einbinden
  • Beispiel: Modal-Komponente, Card-Komponente
  • Dynamische UIs mit Template-Komponenten
• State Management in modularen Komponenten
  • Komponenteninterner Zustand vs. Shared State
  • Kontextweitergabe (z. B. über CascadingValue)
  • Beispiel: Wizard-Komponente mit State-Tracking
  • Kommunikation zwischen Komponenten (z. B. Mediator, Services)
• Best Practices & Anti-Patterns
  • Was macht eine gute Komponente aus?
  • Auflösung von Abhängigkeiten (z. B. mit Dependency Injection)
  • Wann Templates, wann Code-Generierung?
  • Testbarkeit von Komponenten
• Hands-On: Praxisprojekt
  • Aufbau eines kleinen UI-Komponenten-Frameworks (Mini-UI-Kit)
  • z. B. Table<T>, Modal, Wizard, Form<T>
  • Integration in bestehende Blazor-Anwendung
  • Wiederverwendung und Testbarkeit
• Ausblick und Erweiterungen
  • Verwendung mit Razor Class Libraries (RCL)
  • Veröffentlichung als NuGet-Komponente
  • Kombination mit JavaScript (Interop)
  • Roadmap .NET 9: neue Features für Komponenten