Blazor: Moderne Full-Stack Webentwicklung mit C#

Seminarziel

Am Ende des Seminars sind die Teilnehmenden in der Lage, Blazor effektiv zu nutzen, um moderne Webanwendungen zu erstellen, zu steuern und die Leistung ihrer Anwendungen zu optimieren. Sie lernen, wie sie die Effizienz und Qualität ihrer Webentwicklungsprojekte verbessern können.

Inhalt

• Einführung in Blazor: Überblick und Bedeutung
  • Was ist Blazor und warum ist es wichtig?
    • Definition und Hintergrund: Blazor als Teil des .NET-Frameworks, ermöglicht die Entwicklung interaktiver Webanwendungen mit C#.
    • Bedeutung und Vorteile: Verwendung von C# anstelle von JavaScript für die Client-Seite, Unterstützung für WebAssembly.
    • Vergleich mit anderen Frameworks: Unterschiede und Vorteile gegenüber Angular, React und Vue.js.
• Grundlagen der Blazor-Installation und -Einrichtung
  • Installation und Konfiguration
    • Systemanforderungen und unterstützte Plattformen: Hardware- und Softwarevoraussetzungen.
    • Installation von .NET SDK und Blazor-Tools: Schritt-für-Schritt-Anleitung zur Einrichtung.
    • Erste Konfiguration: Erstellung eines neuen Blazor-Projekts, Überblick über Projektstruktur und Komponenten.
• Grundlegende Bedienung und Funktionen
  • Basis-Funktionen und Architektur
    • Einführung in die Blazor-Architektur: Komponentenmodell, Razor-Syntax, Datenbindung.
    • Grundlegende Konzepte: Blazor Server vs. Blazor WebAssembly, Lifecycle-Methoden, Event-Handling.
    • Verwendung von Blazor: Erstellen und Verwalten von Blazor-Komponenten und -Anwendungen.
• Erste Schritte mit Blazor
  • Einfache Blazor-Komponenten
    • Erstellung und Integration von Komponenten: Syntax, Parameterübergabe, Datenbindung.
    • Einführung in die Navigation und Routing: Konfiguration, Link-Komponenten, Parameterübergabe.
    • Anwendung von Blazor in der Praxis: Aufbau einfacher Webanwendungen.
• Praxisübung 1: Einrichtung und Grundkonfiguration von Blazor
  • Ziel der Übung: Anwendung der erlernten Techniken zur Einrichtung und Grundkonfiguration von Blazor.
    • Projektbeschreibung: Teilnehmer erstellen ein neues Blazor-Projekt und entwickeln erste Komponenten.
    • Anforderungen: Nutzung der grundlegenden Funktionen und Befehle von Blazor.
  • Schritt-für-Schritt-Anleitung:
    • Vorbereitung: Einführung in die Projektanforderungen, Einrichtung der Entwicklungsumgebung.
    • Durchführung: Installation von Blazor, Erstellung einfacher Komponenten und Navigationselemente.
    • Präsentation: Vorstellung der Ergebnisse durch die Teilnehmer.
  • Tools: .NET SDK, Visual Studio oder Visual Studio Code, Blazor-Tools.
  • Ergebnisse und Präsentation:
    • Präsentation der eingerichteten Umgebung und der ersten Blazor-Komponenten.
    • Diskussion und Feedback: Analyse der Ergebnisse und Verbesserungsvorschläge.
• Erweiterte Blazor-Techniken
  • Komplexe Komponenten und Datenbindung
    • Nutzung komplexerer Datenbindung: Two-Way-Datenbindung, Binding an komplexe Datenstrukturen.
    • Zustandsmanagement: Verwendung von StateHasChanged, Dependency Injection, Services.
    • Fehlerbehandlung und Debugging: Einbau von Fehlerbehandlungsmechanismen, Debugging-Techniken.
• Integration und Verwaltung
  • Integration mit Backend-Services
    • Anbindung an APIs: Verwendung von HTTP-Clients, RESTful APIs, SignalR für Echtzeitkommunikation.
    • Sicherheit und Authentifizierung: Implementierung von Authentifizierungs- und Autorisierungsmechanismen.
    • Nutzung von Datenbanken: Integration mit Entity Framework Core, Datenzugriff und Verwaltung.
• Scripting und Automatisierung
  • Automatisierung von Build- und Deploy-Prozessen
    • Einführung in CI/CD-Pipelines: Grundlagen und Einrichtung von automatisierten Workflows.
    • Erstellung und Verwendung von Unit-Tests: Testgetriebene Entwicklung (TDD), Testautomatisierung.
    • Erweiterte Scripting-Techniken: Verwendung von CLI-Tools, Skripting für wiederkehrende Aufgaben.
• Analyse und Optimierung von Blazor-Projekten
  • Performance-Optimierung
    • Überwachung und Optimierung der Ladezeiten: Lazy Loading, Pre-Rendering, Caching.
    • Protokollierung und Fehlersuche: Methoden zur Fehleranalyse und -behebung.
    • Optimierung von Projekten: Best Practices zur Verbesserung der Codequalität und Wartbarkeit.
• Praxisübung 2: Erweiterte Blazor-Komponenten und Integration
  • Ziel der Übung: Anwendung der erlernten Techniken zur Entwicklung erweiterter Blazor-Komponenten und Integration mit Backend-Services.
    • Projektbeschreibung: Teilnehmer entwickeln komplexe Blazor-Komponenten und integrieren sie mit APIs und Datenbanken.
    • Anforderungen: Nutzung der erweiterten Funktionen und Techniken von Blazor.
  • Schritt-für-Schritt-Anleitung:
    • Vorbereitung: Einführung in die Projektanforderungen, Einrichtung der Backend-Integration.
    • Durchführung: Erstellung und Konfiguration erweiterter Komponenten, Implementierung von Datenbindung und Authentifizierung.
    • Präsentation: Vorstellung der Ergebnisse durch die Teilnehmer.
  • Tools: .NET SDK, Visual Studio oder Visual Studio Code, Blazor-Tools, API-Clients.
  • Ergebnisse und Präsentation:
    • Präsentation der erstellten Blazor-Komponenten und durchgeführten Integrationen.
    • Diskussion und Feedback: Analyse der Ergebnisse und Verbesserungsvorschläge.
• Blazor-WebAssembly vs. Blazor Server
  • Unterschiede und Anwendungsfälle
    • Vergleich von Blazor WebAssembly und Blazor Server: Architektur, Performance, Skalierbarkeit.
    • Auswahlkriterien: Wann welches Modell verwenden, Vor- und Nachteile.
    • Praxisbeispiele: Implementierung beider Modelle in unterschiedlichen Szenarien.
• Blazor und moderne Webtechnologien
  • Integration mit modernen Webtechnologien
    • Nutzung von JavaScript Interop: Integration von JavaScript-Bibliotheken und -Funktionen.
    • Verwendung von CSS-Frameworks: Einbindung von Bootstrap, Material Design, Tailwind CSS.
    • Progressive Web Apps (PWA): Umsetzung von PWAs mit Blazor, Offline-Funktionalität, Installation.
• Blazor-Projektmanagement und Best Practices
  • Effektives Projektmanagement
    • Nutzung von Versionskontrollsystemen: Git und GitHub, Branching-Strategien.
    • Projektstrukturierung und -dokumentation: Best Practices für sauberen und wartbaren Code.
    • Deployment-Strategien: Veröffentlichung und Skalierung von Blazor-Anwendungen, Nutzung von Azure, Docker.
• Praxisübung 3: Komplexe Blazor-Projekte und moderne Webtechnologien
  • Ziel der Übung: Anwendung der erlernten Techniken zur Integration moderner Webtechnologien in Blazor-Projekte.
    • Projektbeschreibung: Teilnehmer entwickeln komplexe Blazor-Projekte, die JavaScript-Interop, CSS-Frameworks und PWA-Funktionalitäten integrieren.
    • Anforderungen: Nutzung der erweiterten Funktionen und modernen Technologien in Blazor.
  • Schritt-für-Schritt-Anleitung:
    • Vorbereitung: Einführung in die Projektanforderungen, Einrichtung der modernen Technologien.
    • Durchführung: Integration von JavaScript-Bibliotheken, CSS-Frameworks und PWA-Features in Blazor-Projekte.
    • Präsentation: Vorstellung der Ergebnisse durch die Teilnehmer.
  • Tools: .NET SDK, Visual Studio oder Visual Studio Code, Blazor-Tools, JavaScript-Bibliotheken, CSS-Frameworks.
  • Ergebnisse und Präsentation:
    • Präsentation der erstellten Blazor-Projekte mit modernen Webtechnologien.
    • Diskussion und Feedback: Analyse der Ergebnisse und Verbesserungsvorschläge.