Serverside Blazor – SPA's einmal anders

cubido
Dienstag, 30. Juli 2019

Blazor ist ein Framework welches es erlaubt, C# Code direkt im Webbrowser auszufüren. Möglich macht das eine als Webassembly Modul compilierte Mono Runtime. Soweit, so gut. Wenn Blazor .NET Code im Browser ist, dann ist Serverside Blazor wiederum .NET Code am Server. Aber was genau ist daran jetzt neu und bahnbrechend? .NET am Server gibt es bereits seit der Einführung von ASP.NET im Jannuar 2002.

Die Namensgebung ist etwas unglücklich und wurde durch die Umbenennung von „Serverside Blazor“ in „ASP.NET Core Web Components“, nur um einige Zeit später wiederum in „Serverside Blazor“ zurück umbenannt zu werden, nicht unbedingt treffender.

Was genau kann Serverside Blazor?

Stark vereinfacht geschieht hier folgendes: Der Webseiten Besucher interagiert mit der Webseite indem er zum Beispiel einen Eintrag in einer Combox auswählt. Dabei wird eine Anfrage an den Server gesandt, doch dieser antwortet nicht mit einer vollständigen HTML-Seite sondern es werden die Unterschiede zwischen dem HTML-Code vor dem Absenden und dem Resultat nach der Interaktion des Benutzers ermittelt. Das geschieht am Server. Daher „Serverside Blazor“ wohingegen bei clientseitigem Blazor keine Anfrage an den Server geschickt wird.

Der als Unterschied ermittelte HTML Code wird nun an den Browser zurück geschickt. Dies geschieht mithilfe von SignalR welches wiederum – im Idealfall - Websockets nutzt. Am Client wird der empfangene HTML Code nun wieder in die Seite integriert ohne dass diese komplett neu aufgebaut werden müsste.

Das mag dem Einen oder Anderen vielleicht bekannt vorkommen. Eine vergleichbare Funktionalität bot bereits das UpdatePanel Control aus ASP.NET Webforms. Man ist somit verleitet, hinter serverseitigem Blazor eine Art „UpdatePanel 2.0“ zu vermuten. Aber: weit gefehlt!

Im Gegensatz zum UpdatePanel sind die vom Server übertragenen Daten deutlich schlanker, was die Reaktionszeit merkbar verringert und dadurch viel eher zu einem Single-Page-Application-Ähnlichen Erlebnis führt.

Hier ein Codeschnippsel aus einer Serverside Blazor Page:

<div class="row mt-5">
    <div class="col-6">
        <div class="form-group">
            <select class="form-control" onchange="@LoadDependantData">
                <option value="0" selected></option>
                @foreach (Option option in firstDropdown.Options)
                {
                    <option value="@option.Value">@option.Text</option>
                }
            </select>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-6">
        <div class="form-group">
            <label for="firstname">Vorname:</label>
            <input type="text" id="firstname" name="firstname" class="form-control" bind="@firstName" onblur='@(() => Validate("firstname"))' />
        </div>
    </div>
</div>

Man sieht in diesem Beispiel die direkte Bindung von Events an Controls, wie z.B. beim onchange Event des Select Tags. Auch Validierung ist relativ einfach zu implementieren.

Browserunterstützung

Serverside Blazor läuft reibungslos mit allen Browsern welche auch von SignalR unterstützt werden. Das fängt mit dem Internet Exlorer 8 an und endet auch nicht bei mobilen Varianten von Chrome oder Firefox. Man kann also von einer breiten Unterstützung ausgehen wenn selbst zehn Jahre alte Browser wie der IE8 noch mit auf der Liste stehen. Vor allem ist SignalR nicht alleine auf die Kommunikation mittels Websockets angewiesen sondern greift je nach Bedarf auch auf Fallbacks zurück.

Vorteile

Meiner Meinung nach ist Serverside Blazor ein gelungener Kompromiss der die Vorteile von clientseitigem Blazor und einer reinen MVC-Anwendung perfekt kombiniert. Gegenüber der reinen WASM-Lösung erspart man sich vor allem die initiale Ladezeit für die Mono Runtime sowie diverser .NET DLLs. Muss man dann auch noch einige Daten von einem Webservice nachladen, so kommt auch noch der Aufwand für die entsprechende Kommunikationslogik mit dem Webservice sowie die Implementierung des Webserivces selbst hinzu.

Serverside Blazor spielt vor allem bei einfachen Anwendungen, für die eine aufwändige Layerarchitektur einen unnötigen Overhead bedeutete, seine Stärken aus. Man kann herkömmliche MVC/Razor Komonenten entwickeln und diese mit Events versehen wie man sie von clientseitigem Blazor her bereits kennt und bekommt augenscheinlich dasselbe Verhalten. Der nächste Vorteil dieser Ähnlichkeit ist, dass man die Anwendung mit vergleichsweise geringem Aufwand dann tatsächlich zu einer clientseitigen Variante umbauen kann sofern sich im Laufe der Implementierung herausstellen sollte, dass das erforderlich ist.

Nachteile

Zum gegenwärtigen Zeitpunkt ist es noch schwer zu sagen, ob die Nachteile bestehen bleiben werden, da hier bis zum finalen Release natürlich noch einiges verbessert werden kann. Eine Sache ist mir bei meinen Tests negativ aufgefallen: Wenn man aufgrund höherer Datenmengen im Rahmen eines Requests eine grössere Menge an Controls erzeugt (z.B. mehr als 1.000 Input-Controls oder Dropdowns), dann wird die Sache schon sehr langsam. Hier gibt es definitiv noch Optimierungsbedarf.

Ein weiterer Nachteil ist, dass sich das Page Update derzeit im UI-Thread abzuspielen scheint was zu einem völligen Einfrieren des Browsers führt bis sämtliche Daten geladen sind und die Änderungen auf die Seite angewendet wurden. Das wäre sicher vermeidbar und hier hoffe ich natürlich, dass das im finalen Release behoben sein wird.

Was mir noch gefehlt hat sind Möglichkeiten, das aktuelle Element an einen Eventhandler zu übergeben, um hier generischeren Code (z.B. für die Validierung) erstellen zu können.

Ausblick

Seit Preview 3 von ASP.NET Core 3.0 ist Serverside Blazor nun ein fixer Bestandteil von ASP.NET Core und es ist auch zu erwarten, dass sich das mit dem finale Release nicht ändern wird. Man kann sich somit darauf freuen, diese Technologie ab jenem Zeitpunkt dann auch produktiv einsetzen zu können. Bis dahin ist auch noch die eine oder andere Verbesserung zu erwartet bzw. zu erhoffen.

Verfasst von Thomas Polaschek

Weitere Blogbeiträge

zum Thema Development

Updates for innovators: Abonnieren Sie unseren Blog