Bei Blazor handelt es sich um ein Open Source Framework von Microsoft. Es verwendet wie andere Web Frameworks HTML und CSS zur Darstellung. Ein Unterschied besteht jedoch darin, dass die Logik nicht mit JavaScript, sondern mit C# und der Razor Syntax ausgeführt wird. Bevor wir also konkret einsteigen können, müssen wir diese technischen Hintergründe aufklären. Die Basis für den neuen Ansatz ist die WebAssembly (wasm)-Technologie. WebAssembly ist ein binäres Befehlsformat für die virtuelle Maschine im Browser. Es wurde als portables Kompilierungsziel für Programmiersprachen entwickelt und ermöglicht die Bereitstellung im Web für Client- und Serveranwendungen. Ziel der Entwicklung ist eine Ergänzung von performanten Funktionen zu JavaScript, sowohl was die Ladezeiten als auch die Ausführung betrifft. Das Projekt wird von allen großen Entwicklern der Browser-Engines, also Mozilla, Microsoft, Google und Apple, betrieben. Was sind die Gründe für diesen neuen Standard? WebAssembly bietet zwei Hauptvorteile:

  • Das Binärformat, welches für WebAssembly angewendet wird, kann viel schneller dekodiert werden als JavaScript-Code. Experimente zeigen, dass der Code bis zu 20-mal schneller ausgeführt wird. Auf Mobilgeräten kann dieser Vorteil noch größer sein. Der Schub an Performance verbessert die Benutzererfahrung.
  • Der neue Standard erleichtert das Hinzufügen von neuen Funktionen.

Natürlich bringt jeder neue Standard auch die Notwendigkeit von Anpassungen mit sich, dennoch geht man davon aus, dass langfristig die Vorteile die Nachteile übersteigen. Die Unterschiede in der Technologie, d.h. eine klassische JavaScript- und eine auf WebAssembly basierende Web Applikation sind in Bild 1 gegenübergestellt. Vor der Nutzung von WebAssembly wurde der JavaScript Code durch den Client (Browser) vom Server geladen, analysiert (Parser, Compiler) und dann ausgeführt. Mit der WebAssembly-Technologie kompiliert der Server den Code in WASM (WebASseMbly). Dieser wird dann direkt vom Just-In-Time (JIT)-Compiler des Browsers ausgeführt. Damit ist WebAssembly ein binäres Format, welches für die Ausführung im Browser optimiert ist und kein JavaScript-Code.

Web Applikationen mit JavaScript vs. WebAssembly
Bild 1: Web Applikationen mit JavaScript vs. WebAssembly [5]


WebAssembly bietet zusammengefasst die folgenden Merkmale (Vorteile):

  • Standardisierung: Die Entwicklung und Standardisierung wird vom W3C gesteuert.
  • Breite Unterstützung: WebAssembly kann bereits heute in allen gängigen Browsern ausgeführt werden. Es ist direkter Bestandteil des Browsers, d.h. ein zusätzliches Plugin ist nicht notwendig.
  • Nutzung außerhalb des Browsers: WebAssembly wurde nicht für den Einsatz in einem Browser konzipiert, sondern kann auch für Desktop- und Mobile Plattformen genutzt werden.
  • Interaktion mit JavaScript: WebAssembly läuft in einer Art „Sandkasten“ im Browser. Eine Interaktion mit JavaScript, d.h. ein gegenseitiger Aufruf ist möglich.
  • Performant: WebAssembly ist so schnell wie nativer Code.
  • Sprachneutral: WebAssembly ist grundsätzlich sprachneutral einsetzbar, d.h. man kann den Quellcode einer Programmiersprache in WebAssembly kompilieren.

WebAssembly ist eine technische Basis für Blazor. Die andere Basis ist Razor. Es gilt:
Browser + Razor = Blazor

Blazor gibt es in mehreren Ausführungsvarianten:

  • Blazor Server (Web Apps)
  • Blazor WebAssembly (Web Apps)
  • Blazor Electron (Desktop Apps)
  • Blazor Mobile Bindings (Mobile Apps).

Die Funktionsweise von Blazor Server ist in Bild 2 zu sehen.

Bild 2: Architektur von Blazor Server [6].

Die Arbeitsweise ist der von ASP.NET MVC und ASP.NET Razor Pages ähnlich, jedoch wird auf dem Server eine SPA gerändert und diese wird an den Client ausgeliefert. Zum Client werden JavaScript und Markup gesendet und die Daten und Benutzereingaben laufend mittels der Bibliothek SignalR zwischen Client und Server ausgetauscht.

Literatur und Links

[1] https://www.excellentwebworld.com/what-is-a-single-page-application/
[2] https://docs.microsoft.com/de-de/aspnet/core/blazor/?view=aspnetcore-5.0
[3] https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
[4] https://webassembly.org/
[5] https://blog.noser.com/einfuehrung-in-microsoft-asp-net-blazor/
[6] https://www.bbv.ch/blazor/
[7] https://docs.microsoft.com/en-us/mobile-blazor-bindings/