Im ersten Teil dieser Beitragsreihe wurden die Entstehungsgeschichte, die Vorteile und das Potenzial des innovativen Web-Frameworks Blazor betrachtet. Dabei fiel bereits ein kurzer Blick auf die sogenannten Hosting-Modelle. In diesem zweiten Teil erfolgt nun eine genauere Betrachtung und es wird darauf eingegangen, welche Unterschiede es gibt und wie diese ein Faktor bei der Auswahl eines Hosting-Modells spielen können.
Vor der ausführlichen Betrachtung der verschiedenen Hosting-Modelle muss zunächst einmal geklärt werden, was unter Hosting-Modelle eigentlich verstanden wird, da sie bei der Entwicklung mit Blazor von entscheidender Bedeutung sind. An ihnen wird ausgemacht, wo eine Anwendung ausgeführt wird und wie Komponenten gerendert werden. Es wird dabei in die folgende Modelle unterschieden: Blazor Server für serverseitiges Rendering (Server-side Rendering, SSR), Blazor WebAssembly für clientseitiges Rendering (Client-side Rendering, CSR) und Blazor Hybrid für die native Ausführung von Apps auf mobilen Geräten oder dem Desktop. Die Entscheidung, welches Modell genutzt wird, wird hauptsächlich durch unterschiedliche Projektkonfigurationen geregelt. Die eigentliche Entwicklung von Razor-Komponenten bleibt über die verschiedenen Hosting-Modelle hinweg weitgehend gleich.
Blazor Server wurde im Jahr 2018 als das erste produktionsreife Hosting-Modell mit Blazor eingeführt. Bei diesem Hosting-Modell erfolgt das Rendern der Komponenten serverseitig und erinnert an frühere Anwendungen, wie sie beispielsweise mit ASP.NET MVC üblich waren. In solchen Anwendungen wurden komplette HTML-Seiten auf dem Server generiert und an den Client ausgeliefert (SSR). In Blazor Server wird ebenfalls serverseitiges Rendering ausgeführt, jedoch gibt es dabei einen grundlegenden Unterschied. Denn Blazor Server greift auf eine SignalR-Verbindung zurück, die das WebSockets-Protokoll nutzt. Somit können trotz serverseitigem Rendering die zu aktualisierende Komponenten oder Inkremente aus dem Render Tree in Echtzeit berechnet und ausgetauscht werden, um damit als Single Page Application (SPA) zu fungieren.
Wie das Rendering beispielhaft abläuft und wie dabei die Komponenten im Browser aktualisiert werden, wird nachfolgend veranschaulicht.
Zu Beginn wird Blazor auf dem Server ausgeführt (1). Basierend auf den Razor-Komponenten baut Blazor einen Render Tree auf (2). Im Browser wird die Blazor.server.js-Datei geladen, um eine Verbindung per SignalR mit dem Server herzustellen (3). Per SignalR wird der Render Tree vom Server an den Browser übertragen (4), im Document Object Model (DOM) aktualisiert (5) und anschließend dargestellt.
Wenn eine Interaktion im Browser erfolgt (3), wird das Event per SignalR (4) an den Server gesendet. Dort erfolgt das serverseitige Rendering (1) und die Berechnung des neuen Render Tree, beziehungsweise der notwendigen Aktualisierungen (2). Die notwendigen Aktualisierungen werden anschließend wieder per SignalR (4) zurück an den Browser geliefert, verarbeitet (3) und anschließend im DOM aktualisiert (5) und daraufhin dargestellt.
Durch das hier aufgezeigte serverseitige Rendering ergeben sich folgende Vor- und Nachteile.
Blazor WebAssembly ist das clientseitige Hosting-Modell von Blazor und wurde im Jahr 2020 erstmals produktionsreif eingeführt. Es basiert auf dem namensgebenden offenen Standard WebAssembly. Dieser wurde vom World Wide Web Consortium (W3C) im Jahr 2017 veröffentlicht. Mit diesem Standard ist es möglich, kompilierten Code in Webbrowsern auszuführen. Dies eröffnet die Möglichkeit, Programme für Webbrowser in Sprachen zu schreiben, die über JavaScript hinausgehen.
Bei der Kompilierung einer Blazor-WebAssembly-Anwendung werden Inhalte zu .NET Assemblies kompiliert. Beim Öffnen der Anwendung im Browser wird dann die WebAssembly-Implementierung der .NET Runtime zusammen mit den erstellten Assemblies geladen und ausgeführt. Im Gegensatz zu Blazor Server ähnelt Blazor WebAssembly eher den allgemein bekannten Single-Page-Application-Frameworks (SPA) mit clientseitigem Rendering wie Angular oder React.
Der Rendering-Ablauf bei Blazor WebAssembly unterscheidet sich von Blazor Server. Zu Beginn wird die WebAssembly-Implementierung der .NET-Runtime bekannt als Dotnet.wasm im Browser geladen (1). Anhand dieser Implementierung kann das in C# entwickelte Blazor-Projekt im Browser ausgeführt werden (2). Blazor baut anschließend den Render Tree auf (3) und übergibt diesen mittels JS Interop an ein JavaScript-Skript namens Blazor.webassembly.js (4). Dieses Skript führt die erforderlichen DOM-Aktualisierungen durch, da WebAssembly selbst nicht direkt auf den DOM zugreifen kann (5). Anschließend wird der DOM mit den Änderungen aktualisiert und dargestellt (6).
Die Kommunikation zwischen Nutzerinteraktionen und Blazor erfolgt ebenfalls über JS Interop. Wenn ein Nutzer mit der Anwendung interagiert, werden die Informationen über JS Interop an Blazor weitergeleitet, wo die erforderlichen Aktualisierungen berechnet und auf gleichem Weg wieder zurück an den DOM gegeben werden.
Durch das hier aufgezeigte clientseitige Rendering ergeben sich folgende Vor- und Nachteile.
Mit Blazor Hybrid wird .NET MAUI (Framework für Multi-Plattform-Anwendungen) um Webtechnologien erweitert. Anstatt mit XAML - wie in .NET MAUI üblich – kann nun mit HTML die Entwicklung von Komponenten erfolgen und somit auch Komponenten aus einem Blazor-Projekt wiederverwendet werden. Durch die Funktionalitäten von .NET MAUI wird eine Cross-Plattform-Unterstützung angeboten, um eine Blazor-Anwendung auf Windows, macOS, iOS und Android auszuliefern. Das Laden der mit Blazor entwickelten Komponenten erfolgt dabei über eine BlazorWebView, die auch nativen Zugriff auf Funktionalitäten und APIs des jeweiligen Endgeräts ermöglicht.
Durch die Nutzung von Blazor Hybrid ergeben sich folgende Vor- und Nachteile.
Es wird deutlich, dass jedes Modell individuelle Einsatzbereiche sowie Stärken und Schwächen hat. Die Entscheidung für das richtige Hosting-Modell sollte daher immer auf den konkreten Anwendungsfall abgestimmt sein. Wenn es beispielsweise notwendig ist, die Anwendung auf mobilen Endgeräten bereitzustellen, kann Blazor Hybrid eine sinnvolle Wahl sein. Ebenso kann sich jedoch auch Blazor WebAssembly als PWA-Option anbieten. Wenn hingegen Performance ein entscheidender Faktor ist, könnte die Entscheidung auf Blazor Server fallen, bei einer notwendigen niedrigeren Serverlast hingegen eher Blazor WebAssembly.
Die Wahl des Hosting-Modells hängt von verschiedenen Variablen ab, es gibt daher keine Einheitslösung. Es ist ratsam, eine gründliche Analyse der Projektanforderungen durchzuführen und die Vor- und Nachteile der verschiedenen Hosting-Modelle abzuwägen, um die richtige Entscheidung zu treffen.
In diesem zweiten Teil der Blazor-Blogreihe erfolgte ein detaillierter Blick auf die verschiedenen Hosting-Modelle von Blazor. Dabei wurden die spezifischen Eigenschaften von Blazor Server für serverseitiges Rendering, Blazor WebAssembly für clientseitiges Rendering und Blazor Hybrid für die native Ausführung auf mobilen Endgeräten und auf dem Desktop betrachtet.
Anhand dieser Betrachtung zeigte sich, dass die Auswahl des passenden Hosting-Modells nach sorgfältiger Analyse der Projektanforderungen und Abwägung der jeweiligen Vor- und Nachteile getroffen werden sollte. Die Nutzung der Stärken von .NET und C# in der Web-Entwicklung kann jedoch unabhängig von dem jeweils gewählten Hosting-Modell erfolgen.
Hier geht es noch einmal zum ersten Beitrag der Serie: Blazor - das Web-Framework von Microsoft
Autor des Beitrags
Während seiner Ausbildung zum Industriekaufmann bemerkte Samuel als Jugendlicher, dass ihn die Funktionsweise von Computern und Systemen mehr interessierte als deren Nutzung als Endanwender. Also begann er autodidaktisch die erste Programmiersprache …
Wir sind ein Software-Unternehmen mit Hauptsitz in Karlsruhe und auf die Umsetzung von Digitalstrategien durch vernetzte Cloud-Anwendungen spezialisiert. Wir sind Microsoft-Partner und erweitern Standard-Anwendungen bei Bedarf – egal ob Modernisierung, Integration, Implementierung von CRM- oder ERP-Systemen, Cloud Security oder Identity- und Access-Management: Wir unterstützen Sie!
Mehr über uns
Mit unserem Newsletter informieren wir Sie stets über die neuesten Blogbeiträge,
Webcasts und weiteren spannenden Themen rund um die Digitalisierung.
