.NET 6 ist hier, das neue LTS-Release unserer Lieblingsplattform . Vor allem im Bereich Blazor WebAssembly gab es dieses Mal einige Verbesserungen und Neuerungen, die es lohnt, sich anzuschauen.
Blazor WebAssembly ist ein waschechtes SPA-Framework • Blazor Server hat komplexe, nicht Web-Style Basisarchitektur – aka „Server-Client“ • Code wird immer auf Serverseite ausgeführt • Zustand wird ausschließlich auf Serverseite gehalten • Skalierung wird deutlich aufwändiger • Auf dem Client ist nur ein schmaler JavaScript-Stub aktiv (aus dem Blazor-Framework) • Jegliche UI-Interaktionen wandern immer über das Netzwerk (SignalR-Verbindung) • Ständige Netzwerkverbindung nötig - fehleranfällig • Keine Offlinefähigkeit - Möglichkeiten als SPA / PWA werden eingeschränkt • Zustandsbehaftete Datenhaltung erschwert • Infos über die technischen Details und Eigenheiten von Blazor Server: • https://www.thinktecture.com/de/blazor/webinar-blazor-server-moegliche-alternative-zu-spas/ Blazor WebAssembly Neues in .NET 6 Was ist mit Blazor Server?
• Hot Reload bei Änderungen des Codes (*.razor, *.cs, *.css, etc.) • Bei Änderungen die den DOM betreffen, muss die Anwendung neu gebaut und geladen werden Was geht „noch“ nicht: • Debugging & Hot Reload kann „noch“ nicht gleichzeitig genutzt werden Blazor WebAssembly Neues in .NET 6 Hot Reload & Debugging
Core Framework .NET Runtime Culture-Code .NET 5 .NET 6 .NET 5 .NET 6 DE EN … Entfernen von ungenutztem Code bisher nur im .NET Core Framework Durch Relinking jetzt auch in der .NET Runtime Optional: Ignorieren der Culture mit InvariantGlobalization
Sind mehrere Titel gesetzt, wird der Inhalt der zuletzt gerenderten PageTitle-Komponente übernommen Blazor WebAssembly Neues in .NET 6 Neue Komponenten
weiterer Inhalt, dem Kopf des Dokuments hinzugefügt werden • Die Informationen werden dann angezeigt, wenn die Seite oder Komponente gerendert ist • Hinweis: Auch hier wird bei mehrfacher Verwendung, der Inhalt der zuletzt gerenderten HeadContent-Komponente genutzt Blazor WebAssembly Neues in .NET 6 Neue Komponenten
Unbehandelte Fehler innerhalb der ErrorBoundary-Komponente, werden abgefangen • Über den ErrorContent- Parameter kann der Inhalt der Fehlermeldung selbst gestaltet werden • Der Kontext von ErrorContent beinhaltet die aktuelle Exception
werden • Hinweis: Die Unterstützung von Typen ist wie auch bei Routen • z.B. string, int, bool, decimal, Guid, DateTime, etc. Blazor WebAssembly Neues in .NET 6 Komponenten-Model
werden • Beim nutzen der Komponente, wird dann ein Hinweis angezeigt, sollten nicht alle Pflichtfelder ausgefüllt sein. Blazor WebAssembly Neues in .NET 6 Komponenten-Model
nachdem die Blazor- Anwendung vollständig gestartet ist, ausgeführt werden • Im wwwroot-Verzeichnis die Datei {Namespace}.lib.module.js anlegen • beforeStart → Methode wird vor dem Start der Blazor- Anwendung ausgeführt • afterStarted → Methode wird nach dem Start der Blazor- Anwendung ausgeführt • Muss nicht der index.html hinzugefügt werden Blazor WebAssembly Neues in .NET 6 JavaScript Interop
unterhalb einer Komponente • ./{PATH}/{PAGE OR COMPONENT}.razor.js • _content/{PACKAGE ID}/{PATH}/{PAGE OR COMPONENT}.razor.js • Hinweis: Ist nur Struktur, keine Isolation Blazor WebAssembly Neues in .NET 6 JavaScript Interop
Model JavaScript Interop Ahead of Time Compilation (AOT) Pre-Rendering Application State Native Dependencies Resumé Blazor WebAssembly Neues in .NET 6 P
Compilation (AOT) Download Blazor-Runtime wird gestartet IL-Code wird interpretiert und ausgeführt Blazor-App-Code in IL (*.dll) Andere .NET-Bibliotheken in IL (*.dll) Blazor-Runtime in WebAssembly (blazor.webassembly.js, donet.wasm) Download 1a 1b 2 3 Webanwendung Server Client
Compilation (AOT) Download WASM-Code wird nativ ausgeführt Nötige DLLs für werden weiterhin heruntergeladen Blazor Anwendung in WASM-Code (blazor.webassembly.js , dotnet.wasm) Download 1a 1b 2 Webanwendung Server Client
Effekte: • .NET-Code wird direkt in optimierten WASM-Code kompiliert • Leistungssteigerung bei CPU- intensiven Aufgaben, bspw. • Bildbearbeitung • Große HTTP-Responses • Cryptography (Erstellung von SHA- 256-Hashes) Wichtig zu wissen: • Es werden weiterhin .NET-Dateien (*.dll) heruntergeladen • Release-Builddauer umfangreicher • Durch die Größe der Anwendung, gut geeignet für Anwendungen die nicht mehrmals geöffnet werden müssen
Model JavaScript Interop Ahead of Time Compilation (AOT) Pre-Rendering Application State Native Dependencies Resumé Blazor WebAssembly Neues in .NET 6 P
dass der HTML-Code bereits auf dem Server erstellt wird • Diese Funktion gilt aber nur für das initiale Laden der Anwendung bei der aktuellen Route Was ist neu: • Zustand bereits gerenderter Komponenten kann gespeichert werden • Entwickler entscheidet darüber, welche Daten im ApplicationState gespeichert und auch wieder geladen werden Hinweis: Kann nur bei gehosteten Blazor-WASM-Anwendungen eingesetzt werden Blazor WebAssembly Neues in .NET 6 Pre-Rendering
Model JavaScript Interop Ahead of Time Compilation (AOT) Pre-Rendering Application State Native Dependencies Resumé Blazor WebAssembly Neues in .NET 6 P
• Voraussetzung: Abhängigkeiten müssen für die Ausführung in WebAssembly erstellt werden • Tools: dotnet workload install wasm-tools • Projekt Datei eine <NativeFileReference> hinzufügen • Jede WASM-kompilierte Dependency kann eingebunden werden • C/C++ können sogar ohne Kompilierung eingebunden werden Blazor WebAssembly Neues in .NET 6 Native Dependencies
Model JavaScript Interop Ahead of Time Compilation (AOT) Pre-Rendering Application State Native Dependencies Resumé Blazor WebAssembly Neues in .NET 6 P
patrickjahr
xosofox
oekazuma
xuwei_k
okuzawats
maroon1st
karugamo
stoneream
kazatohiei
daisukeshinoku
soarteclab
chiroruxx
blueswen
eileencodes
zakiyama
ammeep
cromwellryan
scottboms
samlambert
aleyda
cassininazir
lemiorhan
smashingmag
colly
carmenintech
![Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick [email protected]](https://files.speakerdeck.com/presentations/0f20ff827b304d26baae58148e41346f/slide_47.jpg){kind=link}