DDF-2023-Blazor WebAssembly: UI-Performance-Optimierungen in .NET 7

Slide 1

Slide 1 text

Patrick Jahr https://thinktecture.com/patrick-jahr Blazor WebAssembly: UI-Performance-Optimierungen in .NET 7 @jahr_patrick Developer Consultant

Slide 2

Slide 2 text

Hallo, das bin i. Patrick Jahr Developer Consultant @ Thinktecture AG E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Patrick Jahr

Slide 3

Slide 3 text

DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 4

Slide 4 text

Listen Optimierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 5

Slide 5 text

Listen Optimierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 6

Slide 6 text

- Müssen alle Elemente im DOM geladen sein? - Wie schnell komm ich an meine Daten für die Liste? - Optimierung: Virtualize Komponente - Nur der Sichtbereich wird geladen - Lazy Loading - Ladeanimation Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Virtualizierung

Slide 7

Slide 7 text

Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Virtualizierung Zeile außerhalb des Sichtbereichs Zeile im Sichtbereich Zeile außerhalb des Sichtbereichs Zeile im Sichtbereich ... Zeile außerhalb des Sichtbereichs Zeile außerhalb des Sichtbereichs

Slide 8

Slide 8 text

Blazor WebAssembly

Slide 9

Slide 9 text

DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 10

Slide 10 text

Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 EXPERIMENTAL: QuickGrid

Slide 11

Slide 11 text

- Erstes Framework Data Grid - Microsoft.AspNetCore.Components.QuickGrid - (limited) customizeable - NOCH: Experimental Package - Hohe Performance bei der Daten Bindung - Queryable - Itemsprovider - EF Database Context Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 EXPERIMENTAL: QuickGrid

Slide 12

Slide 12 text

Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 EXPERIMENTAL: QuickGrid

Slide 13

Slide 13 text

Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 DEMO

Slide 14

Slide 14 text

Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 15

Slide 15 text

Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Wann wird eine Komponente gerendert? Initialisierung Änderung von Parametern Änderung von Parametern der übergeordneten Komponente DOM-Events StateHasChanged()

Slide 16

Slide 16 text

Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Erstes Rendern? || ShouldRender() Render Component OnAfterRender/ OnAfterRenderAsync Render tree wird erstellt und an den DOM gesendet DOM Update Rendern wird beendet Nein Ja 1 2a 2b 3 4

Slide 17

Slide 17 text

Listen Optimierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 18

Slide 18 text

- ShouldRender prüft ob eine Komponente gerendert werden soll - Methode der Basisklasse ComponentBase - Default Wert true - Optimierung - Komponenten Re-Rendring über eigene Logik steuern - Leicht für primitiven Typen wie string, int oder bool als Parameter - Aufwändiger für komplexe Typen Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Clevere Komponenten

Slide 19

Slide 19 text

DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 20

Slide 20 text

Listen Optimierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 21

Slide 21 text

Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Erstes Rendern? || ShouldRender() DOM Event oninput, onclick, onblur,... Event Handler ausführen Render Component OnAfterRender/ OnAfterRenderAsync Render tree wird erstellt und an den DOM gesendet DOM Update Rendern wird beendet Nein Ja 1 2 3 4a 4b 5 6

Slide 22

Slide 22 text

- Durch jedes Event wird die Methode HandleEventAsync des Interface IHandleEvent in der Basisklasse ComponentBase aufgerufen - Optimierung - Interface IHandleEvent in der Komponenten Klasse implementieren - Einsatz der Hilfsklasse EventUtils, die von Microsoft angeboten wird - Hinweis: Die Hilfsklasse muss dem Projekt selbst hinzugefügt werden EventUtils: https://docs.microsoft.com/de-de/aspnet/core/blazor/webassembly-performance-best-practices?view=aspnetcore-6.0#avoid-rerendering-after-handling-events- without-state-changes Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Events-Reaction

Slide 23

Slide 23 text

DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 24

Slide 24 text

- Wird das Re-Rendering benötigt nach einem Event: - Debounce Events - Throttle Events - Slice Events - … Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Events-Reaction

Slide 25

Slide 25 text

DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 26

Slide 26 text

Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7

Slide 27

Slide 27 text

- Listenoptimierung durch - Virtualize-Komponente - QuickGrid-Komponente (Experimental) - Muss meine Komponente wirklich immer gerendert werden? - Soll ein Event immer ein Re-Rendering triggern? Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Resümee

Slide 28

Slide 28 text

https://www.thinktecture.com/ueber-uns/karriere/ Dankeschön! Demos aus der Session: https://github.com/thinktecture/ddf-2023- blazor-performance-optimization Patrick Jahr https://thinktecture.com/patrick-jahr