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

Blazor WebAssembly: Neues in .NET 6

7a33106dde82ecc65a220eaf9d131222?s=47 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.

7a33106dde82ecc65a220eaf9d131222?s=128

Patrick Jahr

February 02, 2022
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

Transcript

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

  2. Hello, it’s me. Patrick Jahr Architekt @ Thinktecture AG E-Mail:

    patrick.jahr@thinktecture.com Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Neues in .NET 6 Patrick Jahr P
  3. „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?
  4. 4 Blazor WebAssembly Neues in .NET 6 Alle .NET 6

    Features im Überblick • LTS-Version • Hot Reload • AOT-Compilation (Ahead-of-time) • Relinking • …
  5. 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
  6. • 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
  7. DEMO Blazor WebAssembly Neues in .NET 6

  8. 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
  9. 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
  10. 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)
  11. DEMO Blazor WebAssembly Neues in .NET 6

  12. 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
  13. 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
  14. DEMO Blazor WebAssembly Neues in .NET 6

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

  16. 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
  17. DEMO Blazor WebAssembly Neues in .NET 6

  18. 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
  19. DEMO Blazor WebAssembly Neues in .NET 6

  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
  21. 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
  22. DEMO Blazor WebAssembly Neues in .NET 6

  23. 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
  24. DEMO Blazor WebAssembly Neues in .NET 6

  25. 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
  26. 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
  27. 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
  28. DEMO Blazor WebAssembly Neues in .NET 6

  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. DEMO Blazor WebAssembly Neues in .NET 6

  35. 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
  36. 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
  37. Application State Blazor WebAssembly Neues in .NET 6 Pre-Rendering Hosted

    App Blazor-WASM-Anwendung Authentication Issue: https://github.com/dotnet/aspnetcore/issues/27592
  38. DEMO Blazor WebAssembly Neues in .NET 6

  39. 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
  40. 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
  41. DEMO Blazor WebAssembly Neues in .NET 6

  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. 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
  48. Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick patrick.jahr@thinktecture.com