Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Blazor WebAssembly: Neues in .NET 6

Patrick Jahr
February 02, 2022

Blazor WebAssembly: Neues in .NET 6

.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.

Patrick Jahr

February 02, 2022
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

Transcript

  1. 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
  2. „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?
  3. 4 Blazor WebAssembly Neues in .NET 6 Alle .NET 6

    Features im Überblick • LTS-Version • Hot Reload • AOT-Compilation (Ahead-of-time) • Relinking • …
  4. 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
  5. • 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
  6. 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
  7. 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
  8. 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)
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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 P
  21. 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
  22. 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
  23. 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
  24. 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 P
  25. 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
  26. Application State Blazor WebAssembly Neues in .NET 6 Pre-Rendering Hosted

    App Blazor-WASM-Anwendung Authentication Issue: https://github.com/dotnet/aspnetcore/issues/27592
  27. 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 P
  28. 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 <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
  29. 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 P
  30. 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
  31. 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
  32. 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
  33. 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-head- content?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