Einführung in Blazor WebAssembly

Seminarinformationen

Seminar - Ziel

In diesem 3-tägigen Seminar "Einführung in Blazor WebAssembly" erhalten Sie eine ausführliche Einführung in die Erstellung von UI-Apps mit dem Blazor-Framework. Blazor ermöglicht es Ihnen, komponentenbasierte Muster zu nutzen, die auch in bekannten Bibliotheken wie Angular und React vorkommen, jedoch unter Verwendung von C#-Programmierung. Der Kurs legt den Fokus darauf, weitgehend unabhängig von JavaScript-UI-Bibliotheken und -Frameworks zu arbeiten, wobei JavaScript nur bei Bedarf und nicht als Grundlage für Ihre clientseitigen Anwendungen eingesetzt wird.

Sie lernen, wie Sie mit Blazor WebAssembly ansprechende UI-Apps entwickeln und gleichzeitig die Vorteile der C#-Programmierung nutzen. Der Kurs umfasst auch die Nutzung eines ASP.NET Core-Backends, um eine vollständige Lösung für die Webanwendungsentwicklung zu bieten.

Nach Abschluss des Kurses verfügen Sie über fundierte Kenntnisse und Fähigkeiten, um eigenständige und leistungsstarke UI-Apps mit Blazor WebAssembly zu erstellen. Dieser Kurs richtet sich an Entwickler und Softwareingenieure, die bereits grundlegende Webentwicklungskenntnisse und C#-Erfahrungen haben und ihr Wissen in der Entwicklung moderner Webanwendungen mit Blazor erweitern möchten.

Teilnehmer - Zielgruppe

• Entwickler

Kurs - Voraussetzungen

• C# Programmierung
• HTML
• CSS
• JavaScript Programmierung

Seminardauer

• 4 Tage
• 09:00 Uhr bis 17:00 Uhr

Schulungsunterlagen

• nach Absprache

Seminar-Inhalt / Agenda

Überblick und Einführung

• Was ist Blazor?
• Blazor-Hosting-Modelle
• Was ist WebAssembly?
• Unteschied Blazor Server versus Blazor WebAssembly?
• Browser-Kompatibilität
• Web-Versammlung vs. JavaScript
• Wie wird .NET Core / C# in einem Webbrowser ausgeführt?

Blazor WebAssembly-Anwendung

• Projekt-Vorlage
• Neue Anwendung erstellen
• Hosten von Blazor WebAssembly mit einem ASP.NET Core Server
• Konfiguration
• Abhängigkeits-Injektion
• Umgebungen
• Protokollierung
• Behandlung von Fehlern
• Debugging WebAssembly

Razor Komponenten und Datenbindung

• Was ist eine Komponente?
• Ein Datenmodell erstellen
• Bindung des Datenmodells an das HTML
• Beliebige Attribute übergeben
• Behandlung von Ereignissen
• Manuelle Auslösung von Zustandsaktualisierungen und Re-Rendering

Komponieren von Razorkomponenten

• Zerlegen einer Komponente in kleinere Komponenten
• Einseitige Datenbindung
• Zwei-Wege-Datenbindung
• Daten von einer Elternkomponente an eine Unterkomponente mit Hilfe von Parametern übergeben
• Übergeben von Daten von einer untergeordneten Komponente an eine übergeordnete Komponente unter Verwendung von Ereignis-Rückrufen
• Verwenden Sie Tasten zur Leistungsoptimierung
• Verwenden Sie Refs für den Zugriff auf DOM-Elemente
• Bibliotheken für Razor-Komponenten
• Design Pattern für Razor-Komponenten
  • Parameter sind unveränderlich
  • Zustand aufheben
  • Verwaltung von Zuständen

Forms für Razor-Komponenten

• Was ist der Zweck von Forms?
• Sammeln von Daten mit einem Form, Input, Select und Textarea Element
• Form Element Zwei-Daten-Bindung
• Forms mit der Blazor Edit Form Razor-Komponente erstellen
• Konzept des Bearbeitungskontextes
• Spezielle Steuerelemente zum Bearbeiten von Formularen
  • Input Text
  • Input TextArea
  • Input Select
  • Input Number
  • Input Checkbox
  • Input Date
• Validierung auf das Formular anwenden
• View Model mit Validierungsattributen gestalten
• Code Benutzerdefinierte Validierungsattribute

Razor Component Pages

• Was ist das Page Model?
• Unterschiede zwischen Razor Pages und Razor Components
• Verwenden einer Razor-Components Page
• Router-Komponente
• Konfigurieren des Page-Routing
• Route zu Komponenten aus mehreren Baugruppen
• Route Parameter verwenden
• Querystring verwenden
• Autorisierung einer Razor-Page
• Verwendung der Autorisierung innerhalb des Component Tree

Server-Daten verwenden

• ASP.NET Core MVC Web API
• Was ist ASP.NET Core MVC?
• Was ist eine REST-API?
• Was ist ein API-Controller?
• Injizieren des Http-Clients
• Untersuchung des Http-Clients
• Aufrufen einer REST-API von einer Blazor-Komponente über den HttpClient

Interagieren mit JavaScript

• Was ist die JavaScript-Interop?
• Wann wird JavaScript benötigt?
• Synchrone vs. Asynchrone Calls
• So rufen Sie eine JavaScript-Funktion von einer Komponente auf
• Wie rufe ich C#-Code aus JavaScript auf?
• Aufruf statischer Methoden
• Aufruf von Instanzmethoden
• Organisieren von JavaScript-Code innerhalb einer Blazor WebAssembly-App
• Erkunden Sie das JavaScript-Ökosystem
  • Clientseitige Bibliotheken

Unit Testing

• Was sind Unit-Tests?
• Grundsätze von Unit-Tests
  • Definieren von einer Unit
  • Setup/Teardown
  • Isoliertes-Testing
  • Definieren, was zu testen ist
  • Code-Abdeckung
  • Test-Frameworks
  • Stubs, Mocks und Spies
• xUnit
  • Was ist xUnit?
  • Test-Framework
  • Fakten vs. Theorie
  • Assertions
  • Integration in Visual Studio
• Razor-Komponenten
  • Was sollte an einer Razorkomponente getestet werden?
  • Was ist bUnit?
  • Verwendung von bUnit mit xUnit
  • Setup von getesteten Komponenten in C#- oder Razor-Syntax
  • Verifizieren von Seitenausgaben mit semantischem HTML vergleich
  • Mit Komponenten interagieren und untersuchen
  • Event handler auslösen
  • Bereitstellen von kaskadierenden Werten
  • Inject services
  • Mock IJs-Laufzeit
  • Durchführen von Snapshot-Tests

Weitere Schulungen zu Thema Microsoft .NET