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

Stockendes UI, keine Reaktion nach dem Klick auf einen Button oder einer Eingabe in einem Feld – das sind nur wenige Beispiele alltäglicher Probleme, die beim Benutzen von Clientanwendungen im Allgemeinen und bei Webanwendungen im Speziellen immer wieder auftreten. In der Entwicklung von Webanwendungen, so auch in der Entwicklung von Blazor WebAssembly SPAs, ist es wichtig, die Laufzeitperformance der Anwendung immer im Auge zu behalten und wenn nötig zu optimieren. Patrick Jahr zeigt Ihnen, wie komponentenbasierte UIs in Blazor WebAssembly optimiert werden können, um dadurch eine für die Benutzer spürbar gute Geschwindigkeit und ein flüssigeres UI zu bekommen.

Transcript

1. Patrick Jahr https://thinktecture.com/patrick-jahr Blazor WebAssembly: UI-Performance-Optimierungen in .NET 7 @jahr_patrick Developer Consultant
2. Hallo, das bin i. Patrick Jahr Developer Consultant @ Thinktecture AG E-Mail: patrick.jahr@thinktecture.com Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 Patrick Jahr
3. DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
4. Listen Optimierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
5. Listen Optimierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
6. - 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
7. 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
8. Blazor WebAssembly
9. DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
10. Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 EXPERIMENTAL: QuickGrid
11. - 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
12. Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 EXPERIMENTAL: QuickGrid
13. Blazor WebAssembly UI-Performance-Optimierungen in .NET 7 DEMO
14. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
15. 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()
16. 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
17. Listen Optimierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
18. - 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
19. DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
20. Listen Optimierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
21. 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
22. - 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
23. DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
24. - 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
25. DEMO Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
26. Listen virtualizierung Render Prozess Clevere Komponenten Render- Fragments Events- Reaction Resümee Blazor WebAssembly UI-Performance-Optimierungen in .NET 7
27. - 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
28. 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