{"id":3554,"date":"2023-09-01T08:21:55","date_gmt":"2023-09-01T08:21:55","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?p=3554"},"modified":"2024-02-07T10:15:50","modified_gmt":"2024-02-07T10:15:50","slug":"web-uis-mit-blazor","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-uis-mit-blazor\/","title":{"rendered":"Web-UIs mit Blazor und m\u00f6gliche Anwendungsf\u00e4lle in der Industrie"},"content":{"rendered":"\n

Blazor ist ein Framework von Microsoft, um interaktive Web-Frontends mit C# statt mit JavaScript zu erstellen. Es wurde 2019 im Rahmen von .NET Core 3.0 ver\u00f6ffentlicht. Seitdem wird es konstant weiterentwickelt. So wird es beispielsweise auch mit .NET 8 weitere Verbesserungen geben [1]<\/a>. Parallel zu den Features von Blazor reift auch das \u00d6kosystem an hilfreichen Komponenten und Bibliotheken. Mittlerweile hat sich das Framework bew\u00e4hrt und den anf\u00e4nglichen Hype hinter sich gelassen. Daher soll nachtr\u00e4glich genauer betrachtet und erl\u00e4utert werden wo Blazor ggf. im industriellen Kontext eingesetzt werden kann.<\/p>\n\n\n\n

<\/div>\n\n\n\n

C# statt JavaScript \u2013 Die Gestaltung der UI<\/h2>\n\n\n\n
@page \"\/counter\"\n\n<PageTitle>Counter<\/PageTitle>\n\n<h1>Counter<\/h1>\n\n<p role=\"status\">Current count: @currentCount<\/p>\n\n<button class=\"btn btn-primary\" @onclick=\"IncrementCount\">Click me<\/button>\n\n@code {\n    private int currentCount = 0;\n\n    private void IncrementCount()\n    {\n        currentCount++;\n    }\n}<\/pre>\n\n\n\n
Abbildung 1: Codebeispiel mit Razor-Syntax f\u00fcr eine Blazor-Website<\/em><\/p>\n\n\n\n
<\/div>\n\n\n\n
Blazor verwendet die sogenannte Razor-Syntax. Diese besteht aus HTML, speziellem Razor-Markup und C#. Mit Grundkenntnissen in HTML findet man sich darin auch als C#-Entwickler schnell zurecht. JavaScript spielt bei Blazor im Normalfall nur im Hintergrund eine Rolle und wird in den meisten F\u00e4llen nicht direkt eingesetzt. Ausnahmen von dieser Regel sind z.B. spezielle Interaktionen mit dem Browser oder um JavaScript-Bibliotheken anzusprechen. Gerade f\u00fcr beliebte JavaScript-Bibliotheken gibt es jedoch auch immer h\u00e4ufiger entsprechende Wrapper, welche durch die Community bereitgestellt werden.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Hosting-Modelle von Blazor<\/h2>\n\n\n\n
F\u00fcr Blazor-Apps gibt es drei Hosting-Modelle, die bestimmen, wie eine Blazor-App funktioniert, welche Funktionen zur Verf\u00fcgung stehen und welche Einschr\u00e4nkungen es gibt.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Blazor Server \u2013 Server-Side Rendering<\/h3>\n\n\n\n
In diesem Fall wird die Webseite in einer ASP.NET Core-App auf dem Server dynamisch erzeugt und das HTML an den Browser \u00fcbertragen. Durch das Rendering auf dem Server steht die gesamte Funktionalit\u00e4t des Backends zur Verf\u00fcgung. F\u00fcr jede Interaktion zwischen Browser und Server wird eine aktive SignalR-Verbindung ben\u00f6tigt. Die Latenz dieser Netzwerkverbindung wirkt sich direkt auf die Reaktionszeit der UI aus. Au\u00dferdem wird die Performance der Blazor-Anwendung durch die Performance des Servers begrenzt, was zum Beispiel viele gleichzeitige Client-Verbindungen kostspielig macht.<\/p>\n\n\n\n
Dieses Hosting-Modell ist gut geeignet, wenn \u2026<\/p>\n\n\n\n