Was ist Blazor? Das Web-Framework für moderne .NET und C# Anwendungen

Die Geschichte von Blazor: Die Entstehung eines neuen Web-Entwicklungstools

Blazor wurde ursprünglich von Microsoft-Entwickler Steve Sanderson als experimentelles Projekt im Jahr 2017 vorgestellt. Der Name „Blazor“ ist eine Kombination aus „Browser“ und „Razor“, wobei Razor eine von Microsoft entwickelte Syntax für C#- und HTML-Templates ist. Seit seiner ersten Einführung hat Blazor mehrere Entwicklungsstadien durchlaufen und wurde schließlich als offizielles Microsoft-Produkt im September 2019 mit der Veröffentlichung von .NET Core 3.0 eingeführt.

Der Erfolg von Blazor ist auf eine Kombination aus verschiedenen Faktoren zurückzuführen, darunter die wachsende Popularität von WebAssembly, das starke Ökosystem der .NET-Plattform und das Engagement von Microsoft, innovative Webentwicklungstools bereitzustellen. Blazor hat im Laufe der Zeit eine wachsende Community von Entwicklern und Unternehmen angezogen, die das Framework für die Erstellung verschiedener Webanwendungen einsetzen, von einfachen interaktiven Seiten bis hin zu komplexen Geschäftsanwendungen.

Steve Sanderson gilt zurecht als der Vater von Blazor. Seine Fähigkeit großartige Technologien zu entwerfen und sie dann auch noch bescheiden und präzise zu präsentieren, macht es zu einem Vergnügen ihm zuzuhören. Wer etwas Zeit hat, dem sei z.B. dieses Vorstellungsvideo auf der NDC Konferenz ans Herz gelegt um seine Antwort auf die Frage „Was ist Blazor“ kennenzulernen:

Grundkonzepte und Architektur von Blazor

Blazor basiert auf einem komponentenorientierten Ansatz, bei dem Webanwendungen aus wiederverwendbaren und unabhängigen Komponenten erstellt werden. Jede Blazor-Komponente besteht aus HTML, CSS und C#-Code, der für das Rendering und die Interaktion mit der Benutzeroberfläche verantwortlich ist. Die Komponenten kommunizieren miteinander über Parameter, Ereignisse und Cascading Values, um Daten und Informationen auszutauschen.

Die Architektur von Blazor folgt dem Model-View-Update (MVU)-Pattern, das eine klare Trennung von Zuständigkeiten und eine unidirektionale Datenflusssteuerung unterstützt. In Blazor aktualisiert der Entwickler den Anwendungszustand, indem er auf Ereignisse reagiert, die durch Benutzerinteraktionen ausgelöst werden. Anschließend wird die Benutzeroberfläche automatisch aktualisiert, um den neuen Zustand widerzuspiegeln.

Blazor-Hostingmodelle: Server und WebAssembly

Blazor bietet zwei Hostingmodelle für Webanwendungen: Blazor Server und Blazor WebAssembly. Beide Modelle haben ihre eigenen Vor- und Nachteile und sind für verschiedene Anwendungsfälle geeignet.

Blazor Server-Anwendungen werden auf einem Server ausgeführt und verwenden SignalR, eine Echtzeit-Kommunikationsbibliothek, um Benutzerinteraktionen und UI-Updates zwischen dem Server und dem Browser auszutauschen. Blazor Server bietet eine schnelle Startzeit, da die Anwendung auf dem Server vorgerendert wird und nur die notwendigen UI-Updates an den Browser gesendet werden. Allerdings kann diese Architektur bei hoher Netzwerklatenz zu einer reduzierten Benutzererfahrung führen und erfordert eine ständige Internetverbindung.

Blazor WebAssembly hingegen ist clientseitig und läuft direkt im Browser des Benutzers. Die Anwendung wird als WebAssembly-Code heruntergeladen und ausgeführt, wodurch keine ständige Serververbindung erforderlich ist. Blazor WebAssembly bietet eine bessere Skalierbarkeit und reduziert die Serverlast, da die gesamte Verarbeitung auf dem Client stattfindet. Allerdings sind die Anwendungsstartzeiten in der Regel länger, da der gesamte Code und die Ressourcen heruntergeladen werden müssen.

Vergleich der Modelle

Die folgende Tabelle zeigt die wichtigsten Unterschiede der beiden Hostingmodelle:

Merkmale	Blazor Server	Blazor WebAssembly
Hosting	Serverseitig	Clientseitig (im Browser)
Kommunikation	SignalR (Echtzeit-Kommunikation)	Direkte Browser-Interaktion
Internetverbindung	Ständige Verbindung erforderlich	Keine ständige Verbindung erforderlich
Startzeit	Schneller, da vorgerendert	Länger, da gesamter Code heruntergeladen wird
Skalierbarkeit	Begrenzt durch Server-Ressourcen	Bessere Skalierbarkeit, clientseitige Verarbeitung
Serverlast	Höher, da UI-Updates vom Server verwaltet werden	Geringer, da Verarbeitung im Browser erfolgt
Netzwerklatenz	Kann zu reduzierter Benutzererfahrung führen	Weniger betroffen
Offline-Fähigkeit	Nicht unterstützt	Unterstützt
Browser-API-Integration	Indirekt über SignalR	Direkte Integration
Debugging	Einfacher, da serverseitig	Komplexer, da clientseitig

Manchmal kann auch ein hybrider Ansatz sinnvoll sein, bei dem die Blazor Anwendung so entwickelt wird, dass schnell wischen beiden Modellen gewechselt werden kann. Man muss sich zwar beim Veröffentlichen der App für ein Modell entscheiden, kann aber beim Entwickeln Hin- und Herwechseln. So kann man z.B. die Vorteile wie schnelle Startzeit und einfaches Debugging zur Entwicklungszeit mit den Vorteilen bei der Skalierbarkeit von WebAssembly vereinen.

Blazor-Komponenten: Die Bausteine einer Blazor-Anwendung

Blazor-Komponenten sind die grundlegenden Bausteine jeder Blazor-Anwendung. Sie bestehen aus C#-Code und Razor-Markup und ermöglichen die Erstellung von wiederverwendbaren UI-Elementen, die leicht in anderen Komponenten oder Anwendungen verwendet werden können. Eine Blazor-Komponente kann Parameter enthalten, die es ermöglichen, Daten und Einstellungen von übergeordneten Komponenten zu erhalten, und kann auch eigene Ereignisse auslösen, um übergeordneten Komponenten Benachrichtigungen über interne Änderungen zu senden.

In Blazor können Entwickler sowohl einfache als auch komplexe Komponenten erstellen, die sowohl statische als auch dynamische Inhalte verwalten. Beispiele für Komponenten sind Schaltflächen, Eingabefelder, Dropdown-Menüs, Dialogfelder und sogar vollständige Layouts, die den Rahmen für eine Anwendung bilden.

Von Haus aus bringt Blazor nur eine sehr kleine Anzahl von Komponenten mit. Es ist jedoch sehr einfach html tags mit C# code so zu erweitern, dass das gewünschte Resultat auf dem Bildschirm erscheint. Eine dynamische Html Liste lässt sich z.B. mit Code wie diesem erstellen:

Hier kann man sehen, wie einfach C# Code genutzt werden kann um direkt in der .razor Datei dynamisch Html zu generieren. Selbstverständlich genießt man dabei Features, die durch die statischen Typen von C# ermöglicht werden wie Syntax Highlighting und Auto-Completion.

Möchte man die Code wiederverwenden, lässt sich sehr einfach eine Komponente aus Razor Code, C# Code und ggf. CSS und JavaScript erstellen. Dabei ist es dem Entwickler freigestellt, ob er alles in eine Datei stecken möchte, oder ob er von der Möglichkeit profitiert Alles oder Teile in separate Dateien zu schreiben. Die meisten IDEs gruppieren diese Dateien automatisch, sodass die Übersicht nicht verloren geht.

Hier sieht man wie die PersonList Komponente in vier Dateien zerlegt wurde: Eine .razor Datei, die den Mix aus Html und C# für die Darstellung beinhaltet, eine .CS Datei die reinen C# Code beinhaltet (z.B. für die Eventbehandlung oder für das asynchrone Laden von Daten), eine CSS Datei für Styles und eine .js Datei mit JavaScript.

Interaktion mit JavaScript in Blazor-Anwendungen

Obwohl Blazor primär auf C# basiert, ist die Interaktion mit JavaScript in Blazor-Anwendungen weiterhin möglich und oft notwendig, um auf bestimmte Browser-APIs zuzugreifen oder bestehende JavaScript-Bibliotheken zu nutzen. Blazor bietet JavaScript Interop, eine Funktion, die es ermöglicht, JavaScript-Funktionen aus C#-Code aufzurufen und umgekehrt.

Um JavaScript in Blazor einzubinden, können Entwickler die IJSRuntime-Schnittstelle verwenden, die Methoden zum Aufrufen von JavaScript-Funktionen und zum Empfangen von Rückgabewerten bereitstellt. Dabei ist es wichtig, darauf zu achten, dass die Kommunikation zwischen C# und JavaScript asynchron erfolgt, um eine reibungslose Benutzererfahrung zu gewährleisten.

JS-Interop-Aufrufe sind grundsätzlich asynchron konzipiert, unabhängig davon, ob der aufgerufene Code selbst synchron oder asynchron ist. Die asynchrone Standardausführung stellt sicher, dass Komponenten mit beiden Blazor-Hostingmodellen – Blazor Server und Blazor WebAssembly – kompatibel sind. Im Fall von Blazor Server ist es notwendig, dass alle JS-Interop-Aufrufe asynchron ablaufen, da sie über eine Netzwerkverbindung übermittelt werden. Hingegen sind bei Anwendungen, die ausschließlich auf das Blazor WebAssembly-Hostingmodell setzen, auch synchrone JS-Interop-Aufrufe möglich.

Ein Beispiel

Es gibt mehrere Möglichkeit JavaScript und Blazor zu kombinieren. Wenn man JavaScript Code hat, der genau für eine Komponente geschrieben wurde, empfiehlt es sich den JavaScript Code in eine Datei mit dem gleichen Name wie die Blazor Komponente + Dateiendung ‚.js‘ zu schreiben. Auf die Weise wird der Code automatisch gebundled und kann in der Komponete einfach referenziert werden.

In meinem Beispiel habe ich etwas JavaScript in die Datei PersonList.razor.js geschrieben:

Um den Code von C# (Datei PersonList.razor.cs) aus zu verwenden überschreibt man die Methode OnAfterRenderAsync() und für einen import des JavaScript Codes durch. Im Anschluss stehen die JavaScript Funktionen für einen Aufruft in C# zur Verfügung:

Datenbindung und Event-Handling in Blazor

Datenbindung ist ein zentrales Konzept in Blazor, das es ermöglicht, Daten zwischen UI-Elementen und C#-Code nahtlos zu synchronisieren. Blazor unterstützt sowohl One-Way- als auch Two-Way-Datenbindung, wodurch Entwickler die Datenbindung entsprechend ihrer Anforderungen anpassen können. One-Way-Datenbindung bindet die Datenquelle an ein UI-Element, sodass Änderungen an der Datenquelle automatisch im UI-Element widergespiegelt werden. Two-Way-Datenbindung hingegen ermöglicht es, dass Änderungen im UI-Element auch automatisch in der Datenquelle aktualisiert werden.

Event-Handling ist ein weiterer wichtiger Aspekt von Blazor, der Entwicklern ermöglicht, auf Benutzerinteraktionen und andere Ereignisse innerhalb der Anwendung zu reagieren. In Blazor-Anwendungen können Entwickler Ereignishandler für verschiedene Ereignisse wie Klicks, Eingaben oder Hover hinzufügen, die dann C#-Methoden aufrufen, um entsprechende Aktionen auszuführen.

Ein Beispiel

In diesem Beispiel erstellen wir eine einfache Blazor-Komponente, die Two-Way-Datenbindung demonstriert. Die Komponente enthält ein Eingabefeld und einen Text, der den Inhalt des Eingabefelds in Echtzeit anzeigt.

Erstellt man z.B. eine neue Razor-Komponente in der Datei TwoWayBinding.razor mit diesem Inhalt:

In diesem Beispiel binden wir den Wert des Eingabefelds an die Eigenschaft InputText mit dem @bind-Direktiv. Dadurch wird Two-Way-Datenbindung erreicht: Änderungen im Eingabefeld werden automatisch in der Eigenschaft InputText aktualisiert, und umgekehrt.

Fügen wir nun einen Link zur Komponente in der NavMenu.razor-Datei hinzu, damit die Komponente in der Anwendung erreichbar ist:

Routing und Navigation in Blazor-Anwendungen

Blazor bietet ein integriertes Routing-System, das es ermöglicht, einfache und benutzerfreundliche URLs für verschiedene Seiten und Komponenten innerhalb der Anwendung zu erstellen. Das Routing-System basiert auf dem @page-Direktiv, das in Razor-Dateien verwendet wird, um den Routenpfad einer Komponente oder Seite anzugeben.

Das Blazor-Routing-System unterstützt auch Parameter und optionale Parameter, die es ermöglichen, zusätzliche Informationen an die Komponenten zu übergeben und die Navigation innerhalb der Anwendung flexibel zu gestalten. Entwickler können außerdem auf das NavigationManager-Objekt zugreifen, um programmgesteuerte Navigation innerhalb der Anwendung zu ermöglichen.

Ein Beispiel

Erstellen wir eine neue Razor-Komponente (z.B. MyParameterizedComponent.razor) mit folgendem Inhalt:

In diesem Beispiel verwenden wir die @page-Direktive, um die Route für die Komponente festzulegen. Die Route enthält Platzhalter für zwei Parameter: RequiredParam und OptionalParam. Der RequiredParam ist ein zwingend benötigter Parameter, während der OptionalParam vom Typ int? ist und optional ist.

Blazor-Erweiterungen und Community-Ressourcen: Die Blazor-Community entwickelt sich

Die wachsende Blazor-Community hat dazu beigetragen, eine Vielzahl von Erweiterungen, Bibliotheken und Tools für die Entwicklung von Blazor-Anwendungen bereitzustellen. Diese Ressourcen erleichtern den Entwicklern die Arbeit und ermöglichen die schnelle und effiziente Implementierung von Funktionen und Lösungen in ihren Anwendungen.

Zu den beliebten Blazor-Erweiterungen zählen UI-Bibliotheken wie Radzen Blazor Components, DevExpress Blazor und Syncfusion Blazor, die eine große Anzahl von vorgefertigten Komponenten und Steuerelementen für die Erstellung ansprechender Benutzeroberflächen bieten. Darüber hinaus gibt es auch viele Ressourcen wie Blogs, Tutorials, Videos und Online-Kurse, die Entwicklern helfen, ihre Blazor-Kenntnisse zu vertiefen und ihre Fähigkeiten zu erweitern.

Neben den kommerziellen Komponenten gibt es inzwischen auch eine Reihe von wirklich guten Bibliotheken aus dem Open Source Bereich. Für mich persönlich sticht hier MudBlazor heraus. Man merkt der Bibliothek an, dass alles zusammen passt und mit wenig Code direkt eingesetzt werden kann. Darüber hinaus bietet MudBlazor ein ansprechendes Design und eine wirklich umfangreiche Sammlung an Komponenten. Ein kleines Manko an MudBlazor ist die zumindest derzeit noch fehlenden, native Unterstützung für OData.

Vergleich von Komponentenbibliotheken

Die folgenden Tabelle vergleicht die wichtigsten Merkmale von vier Blazor-Komponentenbibliotheken: Blazor Radzen, DevExpress Blazor, Syncfusion Blazor und MudBlazor. Die Tabelle enthält Informationen über die Lizenz, die Anzahl der Komponenten, den Design-Stil, die Responsivität, den mobilen Support, die unterstützten Browser, die Dokumentation, die Community, die Template-Anpassung und die Unterstützung. Beachten Sie, dass diese Informationen je nach Updates und Änderungen der jeweiligen Bibliotheken variieren können.

Merkmale	Blazor Radzen	DevExpress Blazor	Syncfusion Blazor	MudBlazor
Lizenz	Proprietär (Freemium)	Proprietär (Freemium)	Proprietär (Freemium)	Open Source (MIT)
Anzahl Komponenten	Über 60	Über 65	Über 65	Über 50
Design-Stil	Radzen Theme	DevExpress Themes	Syncfusion Themes	Material Design
Responsivität	Ja	Ja	Ja	Ja
Mobiler Support	Ja	Ja	Ja	Ja
Unterstützte Browser	Moderne Browser	Moderne Browser	Moderne Browser	Moderne Browser
Dokumentation	Umfangreich	Umfangreich	Umfangreich	Umfangreich
Gemeinschaft	Wachsend	Wachsend	Wachsend	Sehr aktiv und wachsend
Template-Anpassung	Ja	Ja	Ja	Ja
Unterstützung	Kostenlos (Community) kostenpflichtig (Enterprise)	Kostenlos (Community) kostenpflichtig (Enterprise)	Kostenlos (Community) kostenpflichtig (Enterprise)	Kostenlos (Community)

Zukunftsperspektiven und Vorteile von Blazor im Vergleich zu anderen Web-Entwicklungstechnologien

Blazor hat sich als eine vielversprechende Alternative zu herkömmlichen Web-Entwicklungstechnologien wie Angular, React und Vue.js etabliert. Durch die Verwendung von C# und .NET ermöglicht Blazor Entwicklern, auf ein einheitliches Ökosystem für die gesamte Anwendungsentwicklung zuzugreifen, was die Produktivität und Wartbarkeit erhöht.

Ein weiterer Vorteil von Blazor ist die Unterstützung für WebAssembly, das eine bessere Leistung und Geschwindigkeit für Webanwendungen bietet. Da WebAssembly weiterhin an Popularität gewinnt und von Browserherstellern

Fazit: Was ist Blazor und wozu lässt es sich nutzen?

Blazor ist ein innovatives und leistungsstarkes Framework für die Entwicklung von Webanwendungen, das auf .NET und C# basiert. Es ermöglicht Entwicklern, clientseitige Webanwendungen mit einer vertrauten Programmiersprache und einer einheitlichen Codebasis für Backend und Frontend zu erstellen. Besonders gut eignet sich Blazor für Business-spezifische Anwendungen, bei denen die Interaktion mit Daten und Geschäftslogik im Vordergrund steht.

Obwohl Blazor kontinuierlich weiterentwickelt wird und viele Vorteile bietet, hat es im Vergleich zu anderen Frameworks wie React oder Angular bei öffentlichen Websites noch etwas Aufholbedarf. Hier können Aspekte wie Performance und SEO entscheidend sein, und es gibt Bereiche, in denen Blazor noch nicht so ausgereift ist wie die etablierten Alternativen.

Es ist wichtig zu betonen, dass kein Werkzeug oder Framework für alle Anwendungsfälle gleichermaßen gut geeignet ist. Bei der Auswahl der richtigen Technologie für ein Projekt sollte immer eine sorgfältige Abwägung der spezifischen Anforderungen und Ziele erfolgen. Dennoch bietet Blazor für viele Szenarien eine überzeugende Option, insbesondere für Entwickler, die bereits mit .NET und C# vertraut sind.

Ich persönlich versuche Blazor in allen Projekten anzuwenden, die sich dafür eignen weil die Arbeit damit wirklich effizient und trotzdem gut skalierbar ist.