Was ist das Blazor Web Framework von Microsoft und sollten Sie es verwenden?

0
278

Blazor ist ein neues Web-Framework von Microsoft, das entwickelt wurde, um mit branchenführenden Plattformen wie React. Anstatt JavaScript zu verwenden, läuft es auf der .NET-Laufzeit und ermöglicht es Entwicklern, interaktive Webanwendungen mit C# und HTML zu erstellen.

Was ist ASP .NET sogar?

Wenn Sie aus der Welt der JavaScript-Frameworks kommen, sind Sie möglicherweise verwirrt über die Beziehung zwischen Blazor und ASP.NET. Beides sind “Web-Frameworks” aber Blazor ist nur ein Teil des ASP.NET-Ökosystems.

Obwohl die ASP.NET-Plattform zu diesem Zeitpunkt fast 20 Jahre alt ist, ist sie kein Dinosaurier-Framework, sondern wurde zusammen mit C# und .NET insgesamt ständig verbessert, da Microsoft es intern verwendet. Es ist vollständig plattformübergreifend und so performant wie eh und je.

Am Anfang gab es nur ASP.NET, mit dem alle möglichen Webanwendungen erstellt werden können. Es gab ASP.NET MVC (Model-View-Controller), das datengesteuerte Webseiten erstellt, und ASP.NET WebAPI, das auf Backend-APIs spezialisiert ist. Diese wurden kürzlich mit dem modernisierten ASP.NET Core zu einem einheitlichen Paket zusammengeführt.

Vor fünf Jahren wurde Razor Pages (das von Blazor getrennt und verwirrend benannt ist) veröffentlicht, um die ausdrucksstarke Syntax von MVC zu vereinfachen, die viel Boilerplate erfordert und daher nicht gut mit der Komponente zusammenspielt- fokussiertes Design moderner Anwendungen. MVC erfordert, dass Sie für jede Seite eine Ansicht und ein Modell in separaten Dateien erstellen:

Werbung

In der Zwischenzeit können Sie mit Razor optimierte Seiten oder Komponenten mit integriertem Code auf der Seite selbst erstellen. Dies funktioniert besser, wenn die Seiten einfacher sind, aber beide stehen Ihnen als Optionen zur Verfügung.

All diese Funktionen sind Teil von “ASP.NET” Ökosystem. Das Tolle daran sind die Pakete und der Support. Ähnlich wie NPM für JavaScript verfügt auch C# mit dem NuGet-Paketmanager über eine gesunde Paketumgebung.

Was ist also Blazor?

Blazor ändert nichts an der Syntax dieser Seiten. Sie verwenden weiterhin Razor-Seiten und/oder MVC. Das ist eigentlich gar nicht so schlimm, denn es gibt bereits zahlreiche UI- und Komponentenbibliotheken für C#-gestützte Razor-Seiten.

Was Blazor hinzufügt, ist Interaktivität. Herkömmliche MVC/Razor-Seiten, die ASP.NET verwenden, waren schon immer klobig und hatten Mühe, mit Echtzeit-Webanwendungen wie React Schritt zu halten. Echtzeit-Web-Apps sind so schnell, dass sie beginnen, auch den Desktop zu übernehmen, mit Frameworks wie Electron, die Apps in einem Chromium-Container ausführen, ohne dass die Benutzer klüger sind.

Also, Blazor wurde geschaffen, um dieser Nachfrage gerecht zu werden. Es funktioniert ähnlich wie React, wo Aktionen den Status und die Requisiten ändern und Updates der App auslösen. Das Framework übernimmt die Aktualisierung des DOM für Sie basierend darauf, welche Komponenten aktualisiert werden müssen. Dies ermöglicht Echtzeitanwendungen, bei denen die Seite aktualisiert oder sogar komplett neu gezeichnet werden kann, ohne den Browser tatsächlich aktualisieren zu müssen.

Der Vorteil von Blazor gegenüber einem etablierten Framework wie React ist die Sprache. Damit können Sie Web-Apps mit C# erstellen, und das allein macht es für viele Entwickler attraktiv. Welche Meinung Sie auch immer zur Debatte über dynamisches oder statisches Tippen haben mögen, “Desktop” Sprachen wie C# und dem Web fehlen ernsthaft Alternativen zu JavaScript.

Werbung

Wenn Sie ein Back-End haben, das eine hohe Leistung erfordert, wird C# auch viel schneller als JavaScript ausgeführt. Auch wenn JS keineswegs langsam ist und sich im Laufe der Jahre stark verbessert hat, wird es immer noch weniger performant sein als C#, das eigentlich ziemlich nahe an der nativen C++-Leistung läuft.

Blazor ermöglicht eine bessere Interoperabilität. Viele Apps verwenden auch bereits C# im Backend. Sie können beispielsweise über eine ASP.NET-API verfügen, die mit Ihrem React-Front-End interagiert. Sie benötigen separate Modelle für die Server- und die Clientseite sowie separaten Code für die Interaktion mit ihnen. Wenn es sich um dieselbe Sprache handelt, können Sie Code und Bibliotheken problemlos zwischen Client und Server freigeben. Dies ist der einzige Grund, warum NodeJS serverseitig existiert&8212;obwohl JavaScript nicht die ideale Desktop-Sprache ist, verkürzt sich die Entwicklungszeit, wenn Apps in einer Sprache erstellt werden.

Die Zukunft von Blazor

Tatsächlich gibt es einige verschiedene Arten von Blazor, da Microsoft in letzter Zeit einen großen Entwicklungsschub unternommen hat, um das ASP.NET-Ökosystem zu modernisieren. Derzeit gibt es zwei Versionen, die veröffentlicht wurden:

  • Blazor Server, der wie React Server Side Rendering funktioniert und den größten Teil der Verarbeitung auf dem Server übernimmt.
  • Blazor WebAssembly, das die Magie von WebAssembly nutzt, um tatsächlichen .NET-Code in einem tatsächlichen Client-Webbrowser auszuführen.

Microsoft plant auch die Veröffentlichung drei weitere Versionen von Blazor, die sich noch in der Entwicklung befinden und als Vorschau verfügbar sind:

  • Blazor PWA, die darauf abzielt, die Website als installierbare Progressive Web App (PWA) zu veröffentlichen.
  • Blazor Desktop/Hybrid, mit der Blazor-Apps gepackt werden können in Desktop-Apps und ist im Grunde wie Electron, aber mit besserer Leistung.
  • Blazor Native,die die webbasierte Benutzeroberfläche durch eine plattformnative Benutzeroberfläche ersetzt. Es ist nicht klar, wie nützlich dies sogar neben der Interoperabilität mit bestehenden Blazor-Tools ist, und diese Version befindet sich noch in der Planungsphase.

In ihrer Ankündigung für Blazor Desktop erklärte Microsoft, dass “Blazor ist ein Anwendungsprogrammiermodell. Es ist sehr anpassungsfähig und kann auf verschiedene Weise ausgeführt werden (je nach Bedarf).”

Microsoft scheint Blazor als ihren nächsten Standard für die Erstellung von Anwendungs-Frontends zu betrachten. Auch ihre Arbeit lohnt sich, denn da Anwendungen immer webabhängiger werden, ist es immer schwieriger, separate Frontends für Web und Desktop zu erstellen. Blazor hat eine glänzende Zukunft und Webanwendungen, die heute auf Blazor Server und WebAssembly erstellt werden, werden viel Raum für Wachstum haben.

Blazor Server vs. Blazor WebAssembly

Blazor Server verwendet eine SignalR-Verbindung, um zwischen dem Client und dem Server zu kommunizieren. Dies ist nur eine ausgefallene Ebene über einer WebSocket-Verbindung, die bei Bedarf optional auf andere Verbindungen zurückgreifen kann. Dadurch bleibt die gesamte Verarbeitung auf dem Server und der Client bleibt eine einfache Ansicht mit einer einfachen Möglichkeit, das DOM zu manipulieren.

Werbung

Bei Blazor WebAssembly wird es richtig cool. WebAssembly (WASM) ist nicht wirklich eine Sprache, in der Sie schreiben, sondern ein Compiler-Ziel. Es funktioniert tatsächlich fast genau wie die Microsoft Intermediary Language (MSIL), in die alle C#, F# und VB.NET kompilieren. Abgesehen davon, dass es nicht mit einer .NET-Laufzeit läuft, sondern mit der WebAssembly-Laufzeit im Browser.

Das Coole an WebAssembly ist, dass es ein relativ leicht zu erreichendes Compilerziel ist. Ähnlich wie C# nach MSIL kompilieren kann, kann C# auch in WebAssembly kompilieren. Technisch gesehen ist es die MSIL-Kompilierung zu WebAssembly (da das einfacher ist), aber der Punkt ist der gleiche.

Jede Sprache kann in WASM kompiliert werden, sogar vollständig native Desktop-Sprachen wie C++. Das ist nicht theoretisch, sondern funktioniert in der Praxis. AutoDesk konnte AutoCAD, eine 30 Jahre alte C++-Codebasis, innerhalb weniger Monate relativ einfach auf eine WebAssembly-basierte Web-App portieren. Jemand hat sogar Doom 3 portiert.

Blazor WebAssembly nimmt im Grunde den gesamten Server sowie die .NET-Laufzeit und führt sie auf WASM aus. Anstatt über SignalR mit dem Server zu kommunizieren, kommuniziert er dann direkt mit dem DOM. Dadurch entfällt die serverseitige Verarbeitung, die für einige Apps ideal sein kann.

Dies macht es einzigartig positioniert, um mit Frameworks wie React zu konkurrieren, da es im Wesentlichen der erste echte Konkurrent von JavaScript für Client-Webanwendungen ist. Während Sie ein paar Skript-Tags hinzufügen müssen, um die Laufzeit zu laden, und möglicherweise für einige Dinge in JavaScript-Code eintauchen müssen, sollten Sie in den meisten Fällen in der Lage sein, eine komplette Produktions-Webanwendung zu erstellen, ohne eine einzige Zeile zu schreiben von JavaScript.

Werbung

Ob Sie Blazor Server oder Blazor WebAssembly verwenden, liegt bei Ihnen. Beide haben ihre Vorteile. Blazor Server führt den gesamten Verarbeitungscode in einer vertrauenswürdigen Umgebung aus und erfordert keine öffentliche API. Blazor WASM ist reaktionsschnell und schnell und kann sogar als statische Site bereitgestellt werden, die nur mit NGINX bereitgestellt wird.

Wie funktioniert Blazor mit JavaScript?

In beiden Fällen haben Sie tatsächlich vollständige JavaScript-Interoperabilität. Blazor kann JS-Funktionen aus verwaltetem Code aufrufen:

private async Task ConvertArray() { text = new(await JS.InvokeAsync<string>(“convertArray”, quoteArray)); }

Und umgekehrt:

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

Denken Sie jedoch daran, dass dies natürlich Reflexion verwendet und sicherlich nicht die leistungsfähigste Sache der Welt ist.

Sie können technisch gesehen alle NPM-Pakete mit Blazor verwenden, obwohl die Einrichtung und Interaktion damit von der .NET-Seite ein bisschen Kopfschmerzen bereiten kann, daher sollten Sie die meiste Zeit ein NuGet-Paket bevorzugen.

Können Sie Blazor auf dem Desktop (Elektron) verwenden?

Überraschenderweise lautet die Antwort darauf ja. Während Microsoft plant, Blazor Desktop/Hybrid zu veröffentlichen, was das gleiche tut, kann man in der Zwischenzeit eigentlich nur normales Electron verwenden. Dies liegt daran, dass Electron sich wirklich nicht darum kümmert, welche Webseite es bereitstellt und nur eine Blazor-App bereitstellen kann.

Sie könnten denken, dass eine Blazor WebAssembly-App verwendet wird, aber es ist tatsächlich einfacher, Electron einfach zu einem vorhandenen ASP.NET Core-Server hinzuzufügen. WASM hat einen gewissen Overhead, daher ist diese Methode schneller. Genau das macht Electron.NET, und es funktioniert überraschend gut. Sie müssen es nur installieren und Electron als ASP.NET-Dienst hinzufügen. Sie können auch native Electron-Funktionen aus C# aufrufen.

Werbung

Microsoft hat jedoch größere Pläne für Blazor Desktop. Sie planen, die Abhängigkeit von einem Browser und JavaScript vollständig loszuwerden und einfach einen nativen Container mit einer Webansicht auszuführen, die .NET ganz unten ist.

“Blazor Desktop wird ähnlich wie Electron aufgebaut sein. Es wird ein WebView-Steuerelement geben, das Inhalte von einem eingebetteten Blazor-Webserver rendert, der sowohl Blazor als auch andere Webinhalte (JavaScript, CSS usw.) bereitstellen kann.”

Dies Webansicht würde je nach Betriebssystem Safari, WebKitGTK oder WebView2 verwenden. WebView2 verwendet Chromium unter der Haube, würde also ähnlich wie Electron funktionieren, außer dass es leistungsfähiger ist und weniger Speicher verbraucht.

Wie auch immer die Implementierung aussehen mag, es ist aufregend, eine andere Plattform zu sehen konkurrieren mit JavaScript und Electron beim Erstellen plattformübergreifender Web- und Desktop-Apps. Blazor Desktop soll im November 2021 mit der ersten Vorschau von .NET 6 veröffentlicht werden.