Blazor WebAssembly Performance Optimierung in .NET 5 Patrick Jahr @jahr_patrick Architekt

Hello, it’s me. Patrick Jahr Architekt @ Thinktecture AG E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Performance Optimierung in .NET 5 Patrick Jahr

Motivation Render Prozess Komponenten Events Listen Resumé Blazor WebAssembly Performance Optimierung in .NET 5 P T

- Stockende UI - Keine Reaktion nach einem Klick auf einen Button - Lange „unsichtbare“ Ladezeiten → Nur was sich flüssig bedienen lässt, nutzen Anwender auch gerne Blazor WebAssembly Performance Optimierung in .NET 5 Motivation

DEMO Blazor WebAssembly Forms in Action

Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé

- Initialisierung - Änderung von Parameter des Parent - Parameter der Komponente sich ändern - Aufruf von StateHasChanged() - Nach jedem Event wie z.B. @onclick oder @oninput Blazor WebAssembly Performance Optimierung in .NET 5 Wann wird eine Komponente gerendert?

Blazor WebAssembly Performance Optimierung in .NET 5 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

Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé P

- ShouldRender prüft ob eine Komponente gerendert werden soll - Methode der Basisklasse ComponentBase - Default Wert true - Optimierung - Nutzen von primitiven Typen wie string, int oder bool bei Parametern - ShouldRender überschreiben Blazor WebAssembly Performance Optimierung in .NET 5 Komponente

DEMO Blazor WebAssembly Forms in Action

Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé

Blazor WebAssembly Forms in Action 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

- Bei jedem 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-5.0#avoid-rerendering-after-handling-events- without-state-changes Blazor WebAssembly Performance Optimierung in .NET 5 Events

- Wird das Re-Rendering benötigt nach einem Event: - Debounce Events - Throttle Events - Slice Events Blazor WebAssembly Performance Optimierung in .NET 5 Events

DEMO Blazor WebAssembly Forms in Action

Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé

- 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 Performance Optimierung in .NET 5 Listen

DEMO Blazor WebAssembly Forms in Action

Blazor WebAssembly Performance Optimierung in .NET 5 Motivation Render Prozess Komponenten Events Listen Resumé

- Muss meine Komponente wirklich immer gerendert werden? - Soll ein Event immer ein Re-Rendering triggern? - Listenoptimierung durch Virtualize-Komponente Blazor WebAssembly Performance Optimierung in .NET 5 Resumé

Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick [email protected]