SMFSMFSMF

ASP.NET Blazor

Ein Fachbeitrag von Sebastian Heimfarth, Senior Software

Single Page Applications mit WebAssembly

ASP.NET Blazor verwendet die aus dem .NET MVC Framework bekannten Razor Views. Diese werden aber nicht wie bisher auf der Serverseite gerendert. Stattdessen laufen die Razor Views in einer speziellen Laufzeitumgebung im Browser. Dies ermöglicht die Modellierung von clientseitigen Abhängigkeiten und clientseitigem Routing, ohne dass der Browser einen Server Request ausführen muss. Die Laufzeitumgebung wird durch eine neue Webtechnologie verfügbar gemacht: WebAssembly. Im Gegensatz zu bisherigen clientseitigen Frameworks wie Silverlight oder Flash ist WebAssembly ein bereits in allen Browsern unterstützter W3C Standard.

Das ASP.NET Blazor Framwork wurde von dem Microsoft Mitarbeiter Steve Sanderson ins Leben gerufen. Steve Sanderson ist bereits für seine Arbeit an ASP.NET und vor allem knockout.js bekannt. ASP.NET Blazor gehört zur Open Source Strategie von Microsoft und ist selber Open Source. Die aktuelle Version befindet sich in einer frühen alpha Phase, die clientseitig auf den .NET Standard 2.0 setzt.

Clientseitige Laufzeitumgebung mit WebAssembly

WebAssembly ist ein W3C Standard, der in allen großen Browsern ( inklusive mobilen Browsern, exklusive Internet Explorer) implementiert ist. WebAssembly ist eine assemblerartige Sprache, die von einer virtuellen Maschine innerhalb einer Sandbox im Webbrowser ausgeführt wird. Diese virtuelle Maschine arbeitet Stack orientiert und kann auf modernen Computersystemen mit annähernd nativer Geschwindigkeit ausgeführt werden. Für Browser, die WebAssembly nicht unterstützen gibt es mit asm.js einen Fallback. Anwendungen, die mit WebAssembly realisiert sind, können also größtenteils auch im alten Internet Explorer lauffähig sein.

Clientseitig wird das ASP.NET Blazor Framework in einer .NET Runtime ausgeführt. In der aktuellen Version wird hierfür eine spezielle Mono Runtime verwendet. Die Mono Runtime ist selber in WebAssembly bereitgestellt (mono.wasm File). Es wird lediglich .NET Standard 2.0 unterstützt NET Core Bibliotheken können nicht verwendet werden. Die Sandbox hat eine minimale Schnittstelle zum Browser, die beispielsweise die Manipulation des DOM und die Interaktion mit JavaScript erlaubt. Erweiterte Kommunikation wie Web Sockets werden nicht unterstützt! In der Praxis zeigt sich jedoch, dass .NET Standard für komplexe Anwendungen völlig ausreicht. Insbesondere können weitere .NET Standard Bibliotheken eingebunden werden.

Da .NET Standard von .NET Core und .NET Framework implementiert wird, kann die Serverseiteentweder mit .NET Core oder mit dem .NET Framework realisiert werden, während gleichzeitig .NET Standard Bibliotheken im Client und auch auf dem Server eingesetzt werden können. Prinzipiell kann ASP.NET Blazor jedoch von beliebigen Servertechnologien gehostet werden. Auch statische Filehosts können verwendet werden.

Abbildung 2 zeigt die Realisierung im Browser. Zur Entwicklungszeit werden C# Klassen und Razor Views erstellt und in eine .NET Standard Assembly (YourApp.dll) kompiliert.

Die Anwendung wird zusammen mit der .NET Runtime (mono.wasm) und der Schnittstelle zwischen Mono und dem Browser (Browser API) ausgeliefert. Nachdem die Browserseite geladen wurde, wird die Mono Runtime mit dem Blazor Framework gestartet. Diese interpretiert die Razor Views und manipuliert das DOM, um die Anwendung im Browser darzustellen.

ASP .NET Features anhand der Beispielanwendung

Dieser Dokumentation ist eine Beispielanwendung „Blazor Tutorial“ beigelegt. Diese lässt sich entweder mit der neusten Visual Studio Version (spezielles Blazor PlugIn erforderlich:
https://blazor.net/docs/get started.html ) oder direkt mit dem .NET Core CLI gestartet werden (.NET Core 2.1 SDK erforderlich):

Wie in Abbildung 3 muss lediglich der Befehl „dotnet run“ innerhalb des Server Projektverzeichnisses gestartet werden. Anschließend wird die Blazor Anwendung lokal gehostet (siehe Konsolenausgabe). Das ASP.NET Blazor Framwork bietet selbst in diesem frühen Entwicklungsstadium viele bekannte Features, die man von anderen modernen SPA Frameworks kennt. Die einzelnen Features werden auf den einzelnen Webseiten des Tutorial Projektes anschaulich gemacht:

  • Rendern mithilfe von Razor (siehe RazorBasics.cshtml)
  • Binding und Parameter mit automatischer Änderungsverfolgung (siehe UIBindings.cshtml)
  • UI Components: Selbst definierbare, wiederverwendbare und insbesondere schachtelbare Komponenten (siehe UsingComponents.cshtml)
  • Layouts (siehe MainLayout.cshtml)
  • SPA Routing (siehe NavMenu.cshtml)
  • Dependency Injection (@inject Di rektive)
  • einfache Client/Server Interaktion (siehe ClientServerCommunication.cshtml)
  • JavaScript/DOM Interop (siehe JavaScriptInterop.cshtml)
  • VisualStudio Integration
  • Debugger
  • Hot Deploy/Develop
Fazit

Das ASP.NET Blazor Framework bietet viele Vorteile:

  • kein Technologiebruch Client/Server
  • Open Source
  • Sicherheit
  • Performance (auch Dateigröße)
  • flache Lernkurve
  • Wiederverwendbarkeit
  • Spaß

Nachteilig ist bisher noch die frühe alpha Phase. Auch hat Microsoft bisher noch nicht gesagt, ob ASP.Blazor ein Produkt wi rd. Von der Verwendung von Blazor für produktive Anwendungen wird deshalb vorerst abgeraten. Jedoch lässt sich das Framework für einfache Projekte und insbesondere bei der Prototypen Erstellung bereits jetzt gut einsetzten.