Blazor - Begriffserklärung im Entwickler-Lexikon/Glossar auf www.IT-Visions.de

Was ist Blazor ?

Blazor ist ein Single-Page-Web-Application (SPA) Framework im Browser von Microsoft.
Der vollständige Name ist "ASP.NET Core Blazor", denn Blazor ist ein Teil von ASP.NET Core.

Kernmerkmale

Blazor ist Teil von ASP.NET Core und ASP.NET Core ist Teil des modernen .NET.
Kostenfrei und Open Source (https://github.com/aspnet/Blazor/) und
Razor-Template-Syntax: Benutzeroberflächenbeschreibung in HTML und CSS sowie Programmierung in C# und die
Ganz ohne JavaScript geht es in Blazor nicht (auch wenn Werbung von Microsoft das verspricht!)

Meinungen zu Blazor

Es gibt sehr kontroverse Meinungen zu Blazor: Liebhaber und Hasser
Blazor ist ein Angebot für .NET-Entwickler, nicht für JavaScript-Entwickler!

Architekturmodelle

Es gibt sechs Architekturmodelle in Blazor:

1. Blazor Static Server Side Rendering: Multi-Page-Anwendungen wie bei ASP.NET Core MVC und Razor Pages, aber modernere Razor-Syntax und mehr Features (HTML-Streaming, Enhanced Navigation)
2. Blazor WebAssembly (alias Client Side Rendering): Die Ausführung von in C# geschriebenen .NET-Anwendungen direkt im Webbrowser war der ursprüngliche Gedanke. Die DLLs werden in Intermediate Language in den Browser geladen und dort interpretiert im Rahmen der WebAssembly Virtual Machine (Ein Ahead-of-Timer-Compiler zu WebAssembly-Bytecode ist schon lange in Arbeit und soll in .NET 6 erscheinen). Da es keinen direkten Zugang zum Document Object Model (DOM) des Browsers gibt, manipulieren Razor Components und C#-Code das Virtual DOM, welches Microsoft dann via JavaScript mit dem echten DOM synchronisiert.
3. Blazor Server (alias interactive Server Side Rendering): Hierbei läuft der C#-Code nicht im Browser, sondern im Webserver. Zwischen dem Virtual DOM und dem echten DOM liegt das Netzwerk. Microsoft synchronisiert beide via Blazor Pack-Protokoll über Websockets. Blazor Server funktioniert aber folglich nur bei kontinuierlicher Netzwerkwerkverbindung (Offline-Fähigkeit ist per se nicht möglich) und bietet auch keine gute Skalierbarkeit, denn der Zustand aller Komponenten und das Virtual DOM für alle Benutzer liegt auf dem Webserver. Eigentlich nur als Nebenprodukt von Blazor WebAssembly entstanden, hat Blazor Server dennoch inzwischen einige Anhänger gefunden, denn eine WebAPI-Middle-Tier braucht man hier nicht.
4. Auto-Render-Modus ("Blazor United"): SPA (Blazor Server + Blazor WebAssembly)
5. Blazor Desktop, eine hybride Anwendung. Eine Blazor-basierte Webanwendung ist einbettbar in eine Desktop-Anwendung oder mobile App. Die Blazor-Webanwendung läuft im gleichen Prozess wie die Rahmen-Anwendungen und teilt sich Zustände mit dieser. Es gibt keinen Webserver und keine WebAssembly-VM: Der .NET-Prozess selbst rendert die Razor Components und integriert einen Webbrowser-Steuerelement für die Darstellung.
6. Blazor MAUI ist eine innerhalb von .NET MAUI gehostete Blazor-Anwendung, die damit auf Windows, iOS, macOS, Android und Tizen als native App laufen kann.

Zeitplan

Erste Vorschauversion war am: 22.3.2018
28.4.2019: Blazor offizielles Projekt (nicht mehr experimentell)
Blazor Server erschienen in .NET Core 3.0 am 23.9.2019, Update in ASP.NET Core 3.1 am 3.12.2019
Blazor WebAssembly ist im Mai 2020 erschienen.
Seitdem jeden November neues Release zusammen mit dem modernen .NET

Blazor-Features

Nutzung des homogenen, konsistenten .NET-Ökosystems
Streng typisierter Code: C# (andere .NET-Sprachen in Bibliotheks-Projekten)
Interoperabilität mit JavaScript/TypeScript + Zugriff auf Browser-APIs + JS-Frameworks + Web Components
Visual Studio oder VS Code mit Befehlsvorschlägen und Debugging
UI: HTML + CSS (LESS, SASS, …), optional SVG
Komponentenmodell (Razor Components): HTML inkl. CSS + Inline-Code | Code "Behind" + CSS "Behind" | nur Code
Komponentennutzung

Dezentrales Routing @page "/abc/def/{parameter:int}"
Einbettung in anderen Komponenten via Tag <Komponentenname parameter="Wert">

Masterpages mit mehreren Platzhaltern
Template-Syntax: <div>@xy</div> oder <div>@(x+y)</div>
Datenbindung an einfache Properties, kein INotityPropertyChanged notwendig, this.StateHasChanged() nur selten notwendig
Ereignisse: Standardlebenszyklusereignisse OnInitialized(), HTML-DOM-Ereignisse @onclick, eigene Ereignisse
Zustandsbehaftung der Komponenten: Werte bleiben erhalten, solange Komponente aktiv
Formulare mit Validierung
Dependency Injection via Microsoft.Extensions.DependencyInjection (oder andere Dependency Injection-Container)
Backend-Kommunikation HTTP(S) (REST/WebAPIs, SignalR, gRPC) bei WebAssembly, andere Blazor-Arten auch andere Protokolle!
Authentifizierung ASP.NET Core Identity, Identity Provider (z.B. Keycloak, Duende Identity Server, Microsoft EntraID)
Kapselung + Erweiterbarkeit