Blazor WebAssembly: Neues in .NET 6

by Patrick Jahr

Slide 1

Slide 1 text

Blazor WebAssembly Neues in .NET 6 Patrick Jahr @jahr_patrick Architekt

Slide 2

Slide 2 text

Hello, it’s me. Patrick Jahr Architekt @ Thinktecture AG E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Neues in .NET 6 Patrick Jahr P

Slide 3

Slide 3 text

„Terminal Server für Web-Entwickler“ • Thinktecture fokussiert auf SPA-Architekturen • 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?

Slide 4

Slide 4 text

4 Blazor WebAssembly Neues in .NET 6 Alle .NET 6 Features im Überblick • LTS-Version • Hot Reload • AOT-Compilation (Ahead-of-time) • Relinking • …

Slide 5

Slide 5 text

Hot Reload & Debugging Allgemeine Performance- verbesserungen Neue Komponenten Komponenten- modell JavaScript Interop Ahead-of-Time Compilation (AOT) Pre-Rendering Application State Native Dependencies Resumé Blazor WebAssembly Neues in .NET 6

Slide 6

Slide 6 text

• VS2022 / JetBrains Rider • Code-Debugging in der IDE • 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

Slide 7

Slide 7 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 8

Slide 8 text

Hot Reload & Debugging Allgemeine Performance- Verbesserungen Neue Komponenten Komponenten- Model JavaScript Interop Ahead of Time Compilation (AOT) Pre-Rendering Application State Native Dependencies Resumé Blazor WebAssembly Neues in .NET 6

Slide 9

Slide 9 text

9 Blazor WebAssembly Neues in .NET 6 Allgemeine Performanceverbesserungen .NET 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

Slide 10

Slide 10 text

10 Optimierung des Razor-Compilers durch Source-Generators https://www.thinktecture.com/de/net/roslyn-source-generators-introduction/ Blazor WebAssembly Neues in .NET 6 Allgemeine Performanceverbesserungen development time compile time run time Roslyn (IDE) Roslyn (explicit compilation)

Slide 11

Slide 11 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 12

Slide 12 text

Slide 13

Slide 13 text

PageTitle-Komponente • Seitentitel der Anwendung kann dynamisch gesetzt werden • Sind mehrere Titel gesetzt, wird der Inhalt der zuletzt gerenderten PageTitle-Komponente übernommen Blazor WebAssembly Neues in .NET 6 Neue Komponenten

Slide 14

Slide 14 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 15

Slide 15 text

PageTitle-Komponente Blazor WebAssembly Neues in .NET 6 Neue Komponenten

Slide 16

Slide 16 text

HeadContent-Komponente • Mit Hilfe der HeadContent-Komponente kann der SPA dynamisch 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

Slide 17

Slide 17 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 18

Slide 18 text

ErrorBoundary-Komponente 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

Slide 19

Slide 19 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 20

Slide 20 text

Slide 21

Slide 21 text

SupplyParameterFromQuery-Attribut • Parameter kann über die Route als Query-Parameter übergeben 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

Slide 22

Slide 22 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 23

Slide 23 text

CascadingTypeParameter-Parameter Blazor WebAssembly Neues in .NET 6 Komponenten-Model • Hinweis: Der Name des Parameters muss eindeutig sein • Generischer Typparameter wird an die Kindkomponenten weiter gegeben

Slide 24

Slide 24 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 25

Slide 25 text

EditorRequired-Attribut • Mit dem EditorRequired-Parameter, können Parameter als Pflichtfeld deklariert 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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

JavaScript Initializers • Eigenes JavaScript kann vor dem Start, und 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

Slide 28

Slide 28 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 29

Slide 29 text

Komponentenorientierte Einbindung von JavaScript-Modulen • Erstellen und Laden einer JavaScript-Datei 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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Blazor-Anwendung ohne AOT-Kompilierung Blazor WebAssembly Neues in .NET 6 Ahead-of-Time 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

Slide 32

Slide 32 text

Blazor-Anwendung mit AOT-Kompilierung Blazor WebAssembly Neues in .NET 6 Ahead-of-Time 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

Slide 33

Slide 33 text

33 Blazor WebAssembly Neues in .NET 6 Ahead-of-Time Compilation (AOT) 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

Slide 34

Slide 34 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Application State Was gab es bereits: • Pre-Rendering sorgt dafür, 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

Slide 37

Slide 37 text

Application State Blazor WebAssembly Neues in .NET 6 Pre-Rendering Hosted App Blazor-WASM-Anwendung Authentication Issue: https://github.com/dotnet/aspnetcore/issues/27592

Slide 38

Slide 38 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 39

Slide 39 text

Slide 40

Slide 40 text

40 • Native Abhängigkeiten können in der Blazor-Anwendung genutzt werden • Voraussetzung: Abhängigkeiten müssen für die Ausführung in WebAssembly erstellt werden • Tools: dotnet workload install wasm-tools • Projekt Datei eine 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

Slide 41

Slide 41 text

DEMO Blazor WebAssembly Neues in .NET 6

Slide 42

Slide 42 text

Slide 43

Slide 43 text

43 Blazor WebAssembly Neues in .NET 6 Alle .NET 6 Features im Überblick • LTS-Version • Hot Reload • AOT Compilation (Ahead-of-time) • Relinking • Native Dependencies • ErrorBoundary-Komponente • CustomEventArgs • EditorRequired-Attribut • QueryParameter-Attribut • PageTitle- und HeadContent- Komponente • Generische Cascading Type Parameter • JavaScript-Initializers • JavaScript-Module per Komponente • JS-Interop für • Streaming • Binary Data • SVG-Support • Experimentell: RootComponents für JavaScript

Slide 44

Slide 44 text

44 • Verbesserte Entwickler-Performance • Use-Case mögliche Optimierung in Buildprozess und Runtime-Performance • Jede Bibliothek die WASM-fähig ist kann eingebunden werden! Blazor WebAssembly Neues in .NET 6 Resümee

Slide 45

Slide 45 text

45 - https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-6.0?view=aspnetcore- 6.0#blazor - https://docs.microsoft.com/en-us/dotnet/standard/glossary#aot - https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and- deploy/webassembly?view=aspnetcore-6.0#ahead-of-time-aot-compilation - https://devblogs.microsoft.com/dotnet/announcing-asp-net-core-in-net-6/ - https://docs.microsoft.com/de-de/aspnet/core/blazor/components/?view=aspnetcore-6.0#render- razor-components-from-javascript - https://docs.microsoft.com/de-de/aspnet/core/blazor/components/prerendering-and- integration?view=aspnetcore-6.0&pivots=server#preserve-prerendered-state - https://docs.microsoft.com/de-de/aspnet/core/blazor/fundamentals/handle- errors?view=aspnetcore-6.0&pivots=server#error-boundaries Blazor WebAssembly Neues in .NET 6 Links

Slide 46

Slide 46 text

46 - https://docs.microsoft.com/de-de/aspnet/core/blazor/components/event- handling?view=aspnetcore-6.0#custom-event-arguments - https://docs.microsoft.com/de-de/aspnet/core/blazor/components/templated- components?view=aspnetcore-6.0#infer-generic-types-based-on-ancestor-components - https://docs.microsoft.com/de-de/aspnet/core/blazor/components/?view=aspnetcore- 6.0#component-parameters - https://docs.microsoft.com/de-de/aspnet/core/blazor/fundamentals/routing?view=aspnetcore- 6.0#query-strings - https://docs.microsoft.com/de-de/aspnet/core/blazor/components/control-headcontent?view=aspnetcore-6.0 - https://docs.microsoft.com/de-de/aspnet/core/blazor/fundamentals/startup?view=aspnetcore- 6.0#javascript-initializers Blazor WebAssembly Neues in .NET 6 Links

Slide 47

Slide 47 text

47 - https://docs.microsoft.com/de- de/aspnet/core/blazor/components/dynamiccomponent?view=aspnetcore-6.0 - https://github.com/dotnet/aspnetcore/issues/37092 - https://devblogs.microsoft.com/dotnet/performance-improvements-in-net-6/#blazor-and-mono Blazor WebAssembly Neues in .NET 6 Links

Slide 48

Slide 48 text

Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick [email protected]