Mit der Veröffentlichung von .NET 5 gibt es auch einige Änderungen in Blazor. Blazor ist ein Framework, das zum Erstellen einer interaktiven clientseitigen Webbenutzeroberfläche mit .NET geeignet ist. Eine Übersicht und die wichtigsten Neuerungen demonstriert dieser Blogpost anhand von kleinen Beispielen.
Übersicht
Aufgrund der Vielzahl der Änderungen geht dieser Blogpost nur auf die wichtigsten Änderungen im Detail ein. Die nachfolgende Übersicht zeigt, wie viel sich mit .NET 5 in der Blazor-Welt verändert hat:
- Aktualisierter Support für Globalisierung
- Blazor Komponenten-Virtualisierung
- Blazor WebAssembly prerendering
- Browser compatibility analyzer
- CSS-Isolierung
- Formkomponenten unterstützen Anzeigenamen
- Custom validation class attributes
- Isolierung von JavaScript und Objektreferenzen
- Lazy Loading von Assemblies
- Microsoft Identity v2.0 and MSAL v2.0
- Neue Komponente: InputFile
- Neue Komponenten: InputRadio und InputRadioGroup
- Parameter für Catch-all-Route
- Performance-Verbesserungen
- Geschützter Browserspeicher für Blazor Server
- Setzen des UI-Fokus in Blazor Apps
- Verbesserungen im Debugging
- Support IAsyncDisposable
- Support ontoggle-Event
Highlights
Blazor Komponenten-Virtualisierung
Mit Blazor 5 ist es nun möglich das Rendering von Komponenten über die neue Unterstützung für Virtualisierung vorzunehmen. Virtualisierung ist in diesem Kontext eine Technik zur Limitierung des UI-Renderings. Es werden nur die Teile im UI gerendert, welche aktuell sichtbar sind. Mit Blazor in .NET 5 steht hierfür die neue Virtualize-Komponente zur Verfügung.
Beispiel: Eine Liste oder tabellenbasierte Komponente nutzt eine C#-foreach-Schleife. Falls diese Liste tausende Zeilen enthielte, würde das Rendern eine Weile dauern. Im schlimmsten Fall wäre es so rechenintensiv, dass es zu einem für den Nutzer bemerkbaren Verhalten (kurzzeitiger „Freeze-Zustand“) kommen könnte.
@foreach (var employee in employees) { <tr> <td>@employee.FirstName</td> <td>@employee.LastName</td> <td>@employee.JobTitle</td> </tr> }
Stattdessen kann die foreach-Schleife mit der Virtualize-Komponente ersetzt werden. Die Komponente berechnet nun wie viele Items gerendert werden basierend auf der Höhe und der Größe der zu rendernden Items.
<Virtualize Items="employees" Context="employee"> <tr> <td>@employee.FirstName</td> <td>@employee.LastName</td> <td>@employee.JobTitle</td> </tr> </Virtualize>
Falls nicht alle Items direkt in den Speicher geladen werden sollen, kann das mittels ItemsProvider erreicht werden.
<Virtualize ItemsProvider="LoadEmployees" Context="employee"> <tr> <td>@employee.FirstName</td> <td>@employee.LastName</td> <td>@employee.JobTitle</td> </tr> </Virtualize>
Im Weiteren müssen noch der ItemsProviderRequest und das ItemsProviderResult<TItem> definiert werden. Ein ItemsProvider ist ein Delegat, der asynchron die Items auf Nachfrage erhält. Der ItemsProvider bekommt dann die erfragten Items von einer Datenbank oder einem anderen Dienst und gibt sie als ItemsProviderResult<TItem> zurück. Mehr Details dazu gibt es im Microsoft Blogpost.
async ValueTask<ItemsProviderResult<Employee>> LoadEmployees(ItemsProviderRequest request) { var numEmployees = Math.Min(request.Count, totalEmployees - request.StartIndex); var employees = await EmployeesService.GetEmployeesAsync(request.StartIndex, numEmployees, request.CancellationToken); return new ItemsProviderResult<Employee>(employees, totalEmployees); }
Das Abfragen von Daten kann zeitintensiv sein. Daher gibt es die Möglichkeit Platzhalter zu verwenden.
<Virtualize ItemsProvider="LoadEmployees" Context="employee"> <ItemContent> <tr> <td>@employee.FirstName</td> <td>@employee.LastName</td> <td>@employee.JobTitle</td> </tr> </ItemContent> <Placeholder> <tr> <td>Loading...</td> </tr> </Placeholder> </Virtualize>
Performance-Verbesserungen in Blazor
Mit der .NET 5 Version von Blazor gab es signifikante Verbesserungen im Laufzeitverhalten mit Blazor WebAssembly. Die Performance-Tests von Microsoft zeigten eine zwei- bis dreifache Beschleunigung für die meisten getesteten Szenarien.
Wie die beiden Charts aufzeigen, konnte die Geschwindigkeit beim JSON-Handling um Faktor zwei und das Laden von Tabellen um Faktor zwei bis drei verbessert werden. Wer die Perfomance-Tests überprüfen oder durchführen möchte, kann den Code dazu auf GitHub finden.
Abbildung 1: Blazor WebAssembly JSON Performance Comparison (Quelle: Microsoft)
Abbildung 2: Blazor WebAssembly Grid Performance Comparison (Quelle: Microsoft)
Lazy Loading von Assemblys in Blazor Komponenten
Mit Lazy Loading können die Ladezeiten dadurch verbessert werden, dass bestimmte Abhängigkeiten erst geladen werden, wenn sie wirklich benötigt werden. Mit .NET 5 steht in Blazor nun Lazy Loading von Assemblies zur Verfügung. Um dies verwenden zu können, muss zunächst die Assembly in die BlazorWebAssemblyLazyLoad-Itemgruppe hinzugefügt werden. Als nächstes muss der LazyAssemblyLoader verwendet werden, sodass das Lazy Loading dann zur Laufzeit verfügbar ist.
@inject LazyAssemblyLoader LazyAssemblyLoader @code { var assemblies = await LazyAssemblyLoader.LoadAssembliesAsync(new string[] { "Lib1.dll" }); }
Um Lazy Loading für eine spezifische Seite zu ermöglichen, empfiehlt sich die Verwendung des OnNavigateAsync-Events in der Router-Komponente. Das Auslösen dieses Events erfolgt bei jeder Page-Navigation. Es eignet sich hervorragend dazu, Assemblies für eine spezifische Route nachzuladen. Mehr Details hierzu können der Microsoft-Dokumentation entnommen werden.
CSS-Isolierung für Blazor-Komponenten
Blazor unterstützt nun das Definieren von CSS-Styles, deren Scope innerhalb einer Komponente liegt. Komponentenspezifische Styles erleichtern die Strukturierung um ein Vielfaches und vermeiden unbeabsichtigte Effekte mit den global definierten Styles.
MyComponent.razor
<h1>My Component</h1> <ul class="cool-list"> <li>Item1</li> <li>Item2</li> </ul>
MyComponent.razor.css
h1 { font-family: 'Comic Sans MS' } .cool-list li { color: red; }
Supportende für alte Browser-Versionen
Mit der Version 5.0 fällt auch der Support für einige ältere Webbrowser weg. Damit könnte für einige Entwickler und Projekte der Umstieg schwerer werden. Nicht mehr unterstützt werden der Internet Explorer und der klassische Edge-Browser (vor Version 79). Weitere Details dazu gibt es auf GitHub.
Fazit
Mit .NET 5.0 und Blazor Version 5.0 hat Microsoft die Usability stark erhöht und die Entwicklungs-Experience verbessert. Neben den größeren Änderungen wie Lazy-Assembly-Loading, Virtualisierung und den Perfomance-Optimierungen sind es auch die vielen kleinen Punkte, die den Entwickleralltag verbessern und Blazor frischen Wind geben. Eine komplette Übersicht und detailliertere Beschreibungen zu den Änderungen sind der Microsoft-Dokumentation zu entnehmen.
Ich persönlich finde die Neuerungen als Startschuss für .NET 5 gelungen, auch wenn bei den Features einige Abstriche gemacht wurden. Zudem freue ich mich schon darauf, die neuen Features im Entwickleralltag anzuwenden und auf das Erscheinen der nächsten Neuerungen rund um .NET.
Sprechen Sie uns an, wenn auch Sie Fragen zu Themen rund um .NET haben oder Hilfe bei Portierung Ihrer Anwendung nach .NET 5.0 und Blazor 5.0 in Ihrem Unternehmen benötigen. Wir führen Sie gerne ans Ziel.