BLAZOR WEBASSEMBLY: PERFORMANCEOPTIMIERUNGEN FÜRS UI

Stockende UI, keine Reaktion nach dem Klick auf einen Button oder einer Eingabe in einem Feld – das sind nur einige Beispiele alltäglicher Probleme, die beim Benutzen von Clientanwendungen im Allgemeinen und bei Webanwendungen im Speziellen immer wieder auftreten können. In der Entwicklung von Webanwendungen, und 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 flüssigere UI zu bekommen.

Transcript

1. Session Blazor WebAssembly: Performanceoptimierungen fürs UI Patrick Jahr https://thinktecture.com/patrick-jahr @jahr_patrick Developer Consultant
2. Special Day Blazor Thema Sprecher Datum, Uhrzeit Blazor in .NET 7: Server, WebAssembly und Hybrid – ein Wegweiser Sebastian Gingter, Patrick Jahr DI, 11. Oktober 2022, 10.45 bis 11.45 Blazor WebAssembly: Performanceoptimierungen fürs UI Patrick Jahr DI, 11. Oktober 2022, 12.15 bis 13.15 Blazor Hybrid: Wie sich Blazor in WPF, Windows Forms und MAUI integriert Dr. Holger Schwichtenberg DI, 11. Oktober 2022, 15.30 bis 16.30 gRPC und Blazor WebAssembly: Ein Traumpaar? Christian Weyer DI, 11. Oktober 2022, 17.00 bis 18.00 Praxisnahes State Management in Blazor WebAssembly – Was sind denn das für Zustände? Sebastian Gingter DI, 11. Oktober 2022, 19.00 bis 20.00
3. Hello, it’s me. Patrick Jahr Developer Consultant @ Thinktecture AG E-Mail: patrick.jahr@thinktecture.com Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Performanceoptimierungen fürs UI Patrick Jahr
4. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI P
5. Listen virtualisierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly Performanceoptimierungen fürs UI P
6. Listen virtualisierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
7. - 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 Performanceoptimierungen fürs UI Listenvirtualizierung
8. Blazor WebAssembly Performanceoptimierungen fürs UI Listenvirtualizierung 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
9. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI
10. Listen virtualizierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
11. Blazor WebAssembly Performanceoptimierungen fürs UI Wann wird eine Komponente gerendert? Initialisierung Änderung von Parametern Änderung von Parametern der übergeordneten Komponente DOM-Events StateHasChanged()
12. Blazor WebAssembly Performanceoptimierungen fürs UI 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
13. Listen virtualizierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
14. - 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 Performanceoptimierungen fürs UI Clevere Komponenten
15. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI
16. Listen virtualizierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
17. Blazor WebAssembly Performanceoptimierungen fürs UI 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
18. - 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 Performanceoptimierungen fürs UI Events-Reaction
19. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI
20. Was tun wenn das Re-Rendering nach einem Event benötigt wird? - Debounce Events - Throttle Events - Slice Events Blazor WebAssembly Performanceoptimierungen fürs UI Events-Reaction
21. DEMO Blazor WebAssembly Performanceoptimierungen fürs UI
22. Listen virtualizierung Render Prozess Clevere Komponenten Events- Reaction Resümee Blazor WebAssembly Performanceoptimierungen fürs UI
23. - Listenoptimierung durch Virtualize-Komponente - Muss meine Komponente wirklich immer gerendert werden? - Soll ein Event immer ein Re-Rendering triggern? Blazor WebAssembly Performanceoptimierungen fürs UI Resümee
24. https://www.thinktecture.com/ueber-uns/karriere/ Dankeschön! Patrick Jahr https://thinktecture.com/patrick-jahr Demos aus der Session: https://github.com/thinktecture-labs/basta-fall-2022- blazor-wasm-performance