•  
  •  
  •  
  •  
  •  
Neues Web-Framework von Microsoft

Hier kommt Blazor

Einige .NET-Entwickler tun sich schwer mit der Entwicklung von Web-Applikationen. Genau diese Hürde möchte Microsoft für sie senken und hat dazu ein neues Web-Framework mit dem Namen «Blazor» eingeführt.

30.07.2020Text: bbv0 Kommentare
Blazor 1
  •  
  •  
  •  
  •  

Was ist Blazor?

Um diese Frage zu beantworten müssen wir zunächst die Funktionsweise von Blazor verstehen. Dabei gibt uns der Name einen ersten Hinweis (Quelle: devblogs):

Browser + Razor = Blazor!

Bei Blazor handelt es sich um ein neues, open-source-basiertes Web-Framework von Microsoft. Blazor verwendet wie andere Web-Frameworks HTML und CSS zur Darstellung einer Web-Anwendung – mit dem Unterschied, dass ausführbarer Programmcode mittels C# und der Razor Syntax ausgeführt wird, anstatt mit JavaScript. Wer also bereits Erfahrung mit der Razor Syntax aus ASP.NET Razor Pages hat, der wird sich in Blazor schnell zurechtfinden.

Blazor hat mehrere Ausführungsvarianten. Die zwei wichtigsten sind:

  • Blazor Server
  • Blazor WebAssembly

Daneben gibt es zwar noch weitere Ausführungsvarianten wie «Blazor Electron» (für Desktop-Plattformen) und «Mobile Blazor Bindings» (für Mobile-Plattformen). Doch sind diese noch nicht ausgereift und werden daher in diesem Artikel nicht näher erläutert.

Blazor Server

Blazor Server erschien am 23. September 2019 als Teil von ASP.NET Core 3.0 RTM. Die Funktionsweise ist der von ASP.NET MVC und ASP.NET Razor Pages sehr ähnlich, jedoch mit einigen Abweichungen. So wird die Web-Anwendung als Single Page Application (SPA) auf dem Server gerendert. Zum Client werden nur JavaScript und Markup gesendet und die Daten und Benutzereingaben laufend mittels SignalR zwischen Client und Server ausgetauscht. Eine permanente Verbindung zwischen Client und Server ist dabei notwendig. Dafür flackert bei Roundtrips die Web-Seite aber nicht, wie es von anderen Server-Side Rendering Frameworks bekannt ist.

Blazor Server

Blazor Server bietet mit .NET Core 3.1 den Long-Term-Support (LTS). Es können die volle .NET Core 3.x Funktionalität und alle Ressourcen auf dem Server verwendet werden. Und Es gibt keine Restriktionen einer Browser-Sandbox. Durch die Server-Side generierte Seite lädt die Applikation auf dem Client schnell, hat einen kleinen Download-Umfang und kann auf wenig performanten Clients (ThinClient) verwendet werden. Jeder Browser lässt sich in seiner neueren Version verwenden; sogar IE, sofern die Kommunikationsfähigkeit über WebSockets mittels Polyfills nachgeladen wurde.
Auch bei der Sicherheit kann Blazor punkten: Der ausführbare Quellcode bleibt ausschliesslich auf dem Server und wird nicht an den Client übertragen. Auch Authenication-Tokens für Sessions verlassen den Server nicht.

Blazor Server bietet jedoch nicht nur Vorteile, sondern bringt auch einige Nachteile mit sich. Zum Beispiel sorgt jede Client-Browserinstanz dafür, dass der Anwendungszustand auf den Server zwischengespeichert wird. Dadurch ist die Teilnehmerzahl praktisch durch die Leistungsfähigkeit des Servers beschränkt – die Applikation ist nicht hochskalierbar. Durch die permanente Kommunikation mit dem Server ist Blazor nicht offlinefähig und es entsteht ein erheblicher Netzwerkverkehr. Bei UI-Updates kann es somit zu spürbaren Verzögerungen kommen. Microsoft empfiehlt daher eine maximale Netzwerklatenz von höchstens 250 Millisekunden. Für das Deployment muss ein ASP.NET Core Server zur Verfügung stehen.

Die genannten Nachteile kommen besonders in der mobile Anwendung zum Vorschein, wo Nutzer unterwegs sind und nicht immer Zugriff auf eine stabile und Latenzfreie Verbindung haben.

Blazor Server: Die Vor- und Nachteile

+ Kurze Ladezeit

+ Browserunabhängig

+ Quellcode bleibt auf dem Server

– Eingeschränkte Teilnehmerzahlen

– Lange Netzwerklatenz führt zu spürbaren Verzögerungen im UI

– Permanente Kommunikation zum Server vorausgesetzt

 

Blazor WebAssembly

Im Gegensatz zu Blazor Server läuft der Code bei Blazor WebAssembly auf dem Client im Browser und kommuniziert mit dem Server über eine Web API. Wie der Name bereits vermuten lässt, baut Blazor WebAssembly auf WebAssembly (kurz WASM) auf. WASM ist ein Bytecode zur Ausführung von nativem Code im Webbrowser und wird von grossen Entwicklern von BrowserEngines (wie Mozilla, Google, Microsoft, Apple & Co) vorangetrieben sowie vom W3C standardisiert. Der grosse Vorteil von WASM liegt in seiner schnellen Ausführung auf dem Client: Der Code läuft im Browser in einer Sandbox und manipuliert die DOM im Browser über ein JavaScript. Dabei wird dank WASM eine fast native Performance erreicht. JavaScript verschwindet dabei nicht gänzlich, sondern wird lediglich ergänzt. WASM läuft mit den neueren Versionen der Major Browsern (dazu gibt Caniuse Auskunft). Nicht unterstützt wird unter anderen der IE von Microsoft.

Blazor WebAssembly 2

Bei Blazor WebAssembly werden die WebAssembly-Fähigkeit, die .NET-Runtime sowie der App spezifische .NET-Code mit den für die Darstellung zuständigen Razor-Komponenten heruntergeladen. Der Zugriff auf Peripherie (Kamera, Mikrophone usw.) des Clients ist ohne JavaScript möglich. Wo es keine Blazor Component für ein Gerät gibt, kann mit JS-Interop nativ über Javascript zugegriffen werden. Jeder WebServer, der Static File Deployment anbietet, wie z.B. ein Content Delivery Network (CDN), kann für das Hosting verwendet werden – dazu ist kein ASP.NET Core fähiger Server notwendig. Als PWA sind Offline-Betrieb und lokale Installation kein Problem. Zudem gibt es keine Wartezeiten bei UI-Updates (zero latency). Die Applikation ist hochskalierbar, da der gesamte Code auf den Clients läuft.

Durch die zusätzlichen .NET-Assemblies und dem WASM Framework ist der initiale Download verhältnismässig gross, was sich negativ auf die Startzeit der Anwendung auswirkt. Bei jeder weiteren Ausführung verkürzt der Browser-Cache die Wartezeit. Für die Zukunft sind aber Mechanismen wie TreeShaking oder AheadOf-Time-Compile angekündigt, welche die Download-Grösse und Wartezeit reduzieren sollen. Wie effektiv diese sein werden, wird sich noch zeigen. Der Applikation Code und z.B. Authetication-Tokens werden zum Client übertragen. Im Gegensatz zu Blazor Server bietet Blazor WebAssembly noch keinen Long-Term-Support (LTS).

Blazor WebAssembly: Die Vor- und Nachteile

+ Skalierbar

+ Perfomant

+ Offlinefähig

– Verhältnismässig grosse Anwendungsdateien müssen auf den Client heruntergeladen werden

– Lange Wartezeit beim ersten Start

– Code auf Client

 

Vergleich Blazor Server vs. Blazor WebAssembly

Für beide Architekturen können User natürlich das .NET Framework verwenden. Darüber hinaus gilt:

  • Nutzer haben Zugriff auf das bekannte Ökosystem (Tools, FX, Lib, Tests) – egal ob VisualStudio 2019, VS Code, VS for Mac, Rider oder .NET CLI. Automatisierte Tests können mit bekannten Frameworks (xUnit, NUnit, MSTest & Co) realisiert werden. Für stabile E2E Test empfehlen sich TestHosts (Microsoft.AspNetCore.Components.Testing / MS experimental) oder BUnit; andere E2E Test-Suiten wie Cypress, Ranorex, Selenium können natürlich auch verwendet werden.
  • Durchgängiges Debugging vom Client bis in den Server ist möglich.
  • Auf dem Client und dem Server kann dasselbe API-Model als Shared Library verwendet werden, ohne einen Generator oder Converter zu bemühen.
  • Blazor ist für die Darstellung und Benutzerinteraktion optimiert. Es ist zwar teilweise möglich bestehenden Code zu übernehmen. Stimmt allerdings die Architektur nicht oder sind intensive algorithmische Aufgaben zu lösen, ist davon abzuraten.

 

Gegenüberstellung Blazor WebAssembly vs. Blazor Server

 

  Blazor Webassembly Blazor Server
Performance zur Ausführungszeit /
Zero Latency
🙂
Offline Betrieb möglich / PWA 🙂
Kleine bzw. schnelle Downloads 🙂
 Skalierbar 🙂
Released / Commitment vom Hersteller
(hier Microsoft)
🙂 🙂
Static File Deployment mittels CDN möglich 🙂  
Volle .NET Framework Funktionalität /
Zugriff auf Server Ressourcen
  🙂
Code und Security auf dem Server   🙂
Geeignet für Performance limitierte Clients (ThinClient)   🙂

Tipp

Sollten Sie nicht wissen, welche die für Sie richtige Blazor-Architektur ist: Beginnen Sie mit einer und lagern sie ihre Razor Components in eine Bibliothek aus. So können Sie später die Architektur ohne grossen Aufwand wechseln.

 

Ausblick

Microsoft hat sich für Blazor-Server sowie Blazor WebAssembly verpflichtet. Blazor WebAssembly gliedert sich als direkter Mitbewerber der vorhandenen JavaScripts SPAs (Angular, VueJS, React usw.) in die Reihen ein. Diese Web-Technologien haben bereits mehrere Jahre auf dem Buckel. Blazor dagegen steht noch am Anfang.

Wie eingangs angedeutet, werden zudem Bestrebungen unternommen, Blazor auch auf Desktop- und Mobile-Plattformen anzubieten. Vor allem beim LTS lässt Blazor WebAssembly noch länger auf sich warten: Der erste LTS wurde erst mit .NET 6 angekündigt und erscheint voraussichtlich im November 2021.

Einen Überblick darüber, wie die Blazor-Community die Lösung vorangetrieben hat – und weiter vorantreibt – gibt Awesome-Blazor.

Fazit

Wie gut sich mit Blazor entwickelte Anwendungen in der Praxis schlagen werden, wird sich zeigen. Wir sind auf jeden Fall der Ansicht, dass Blazor eine reelle Chance hat, sich seinen Platz unter den beliebtesten Webframeworks zu sichern.
Ist ein Entwicklungsteam aber mit Angular, React & Co. zufrieden, empfiehlt sich ein Wechsel auf Blazor nur bedingt. Wir empfehlen Blazor vor allem .NET-Entwicklungsteams, die ihre gewohnte Entwicklungsumgebung nicht verlassen möchten oder können und nicht in eine intensive Schulung investieren können. Ohne Ausbildung in den Bereichen Web, HTML, CSS, Responsive Design & Co geht es allerdings auch mit Blazor nicht.

Der Autor

Othmar Christen

Othmar Christen ist Senior Software-Ingenieur bei bbv. Als Full-Stack .NET Entwickler ist er ein Befürworter effizienter Lösungen. Dazu gehört, die Kunden gut zu beraten und ihre Wünsche umzusetzen, auch wenn es nicht immer die neuste Technologie ist. Ganz nach dem Motto: Der Kundenwunsch ist mir Befehl.

Der Autor

Marko Marković

Marko Marković ist Software Architekt bei bbv Software Services AG. Als Verfechter bewährter Prinzipien wie Clean Code, TDD und Pair-Programming legt er grossen Wert auf qualitativ hochwertige Softwareentwicklung. Seine Erfahrungen gibt Marković an Schulungen der bbv Academy weiter.

Unser Wissen im Abo

Artikel kommentieren

Die E-Mail-Adresse wird nicht publiziert. Notwendige Felder sind mit einem * versehen.

Attention!

Sorry, so far we got only content in German for this section.

Attention!

Sorry, so far we got only content in German for this section.