Einführung in Blazor WebAssembly

Seminarinformationen

Seminar - Ziel

In dieser 3-tägigen Schulung "Einführung in Blazor WebAssembly" erhalten Sie eine umfassende Einführung in die Erstellung von UI-Apps mit dem Blazor-Framework. Blazor ermöglicht es Ihnen, Komponenten basierte Pattern zu verwenden, die auch in beliebten Bibliotheken wie Angular und React zum Einsatz kommen, jedoch mit der Verwendung von C#-Programmierung. Der Kurs konzentriert sich darauf, unabhängiger von JavaScript-UI-Bibliotheken und -Frameworks zu entwickeln und JavaScript nur bei Bedarf und nicht als Grundlage Ihrer clientseitigen Anwendungen zu verwenden.

Sie lernen, wie Sie mit Blazor WebAssembly ansprechende UI-Apps erstellen und dabei die Vorteile der C#-Programmierung nutzen. Der Kurs beinhaltet auch die Verwendung eines ASP.NET Core-Backends, um eine vollständige Lösung für die Entwicklung von Webanwendungen bereitzustellen.

Nach Abschluss des Kurses werden Sie über solide Kenntnisse und Fähigkeiten verfügen, um mit Blazor WebAssembly eigenständige und leistungsstarke UI-Apps zu entwickeln. Dieser Kurs richtet sich an Entwickler und Softwareingenieure, die bereits über grundlegende Kenntnisse in der Webentwicklung und C# verfügen und ihr Wissen und ihre Fähigkeiten in der Entwicklung von modernen Webanwendungen mit Blazor erweitern möchten.

Teilnehmer - Zielgruppe

• Entwickler

Kurs - Voraussetzungen

• C# Programmierung
• HTML
• CSS
• JavaScript Programmierung

Seminardauer

• 3 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 MVC-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
• NPM & Garn
• Webpack
• Nützliche 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