Session Blazor in .NET Server, WebAssembly & Hybrid – Ein Wegweiser Patrick Jahr @jahr_patrick Developer Consultant Sebastian Gingter @PhoenixHawk Consultant & Erklärbär 🐻💬

Hello, it’s me. Patrick Jahr Developer Consultant @ Thinktecture AG E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Patrick Jahr Blazor Server, WebAssembly & Hybrid – ein Wegweiser

3 ▪ Consultant & Erklärbär 🐻💬 bei der Thinktecture AG ▪ Fokus auf ▪ Generative AI ▪ Flexible und skalierbare Backend-Architekturen ▪ Softwarequalität ▪ Entwicklerproduktivität ▪ Alles rund um .NET (Core) und Blazor ▪ [email protected] ▪ Twitter: @phoenixhawk Sebastian Gingter Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Thema Sprecher Datum / Uhrzeit Blazor: Server, WebAssembly und Hybrid – ein Wegweiser Sebastian Gingter, Patrick Jahr DI, 26. September 2023, 10.45 bis 11.45 Automatisiertes Testen von Blazor- Anwendungen Dr. Holger Schwichtenberg DI, 26 September 2022, 12.15 bis 13.15 Blazor WebAssembly in .NET 8: Game Changer für .NET SPAs? Patrick Jahr DI, 26. September 2023, 15.30 bis 16.30 Was sind denn das für Zustände? Praxisnahes State Management in Blazor WebAssembly Sebastian Gingter DI, 26. September 2023, 17.00 bis 18.00 Special Day Blazor

5 ▪ Was ist Blazor? ▪ Die verschiedenen “Geschmacksrichtungen” ▪ Unterschiede zu anderen SPA - Frameworks ▪ Bewährtes und neues Know-How ▪ Wann nutze ich eher was? ▪ Fazit ▪ Fragen. Und Antworten. Inhalte Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Was ist Blazor? Blazor Server, WebAssembly & Hybrid – ein Wegweiser

7 • Blazor: Kofferwort aus Razor und Browser • .NET basiertes OSS-Framework für Webanwendungen • HTML-Templates basierend auf Razor-Syntax • Razor-Components vereinen HTML, CSS und Funktionalität in C# (statt in JavaScript wie in Angular / React / Vue etc.) • Businesslogik (hinter dem UI) wird auch in C# geschrieben • Erlaubt Code-Sharing zwischen Server (API) und dem Client im Browser Was ist Blazor? Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Die verschiedenen “Geschmacksrichtungen” Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Browser Server Klassisches Request-Response-Modell HTML CSS JS Request Response Statische Dateien & Code Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Browser Server SPA (Angular, React, Vue, …) HTML CSS JS Request Response Statische Dateien & Code API (Code) JS-Runtime Request Response State Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Browser Server Blazor Webassembly JS-Runtime WASM-Runtime .NET Runtime C# App HTML CSS JS Request Response Statische Dateien & ASP.NET Core State HTML CSS JS .NET & IL Interop API (Code) Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Browser Server Blazor Server JS-Runtime HTML CSS JS Request Response Statische Dateien & ASP.NET Core .NET Runtime C# App State Interop SignalR Code Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Browser Server Blazor – Hybrid (MAUI / WinForms / WPF) JS-Runtime HTML CSS JS Request Load Statische Dateien & ASP.NET Core .NET Runtime C# App State SignalR Code Desktop (or Mobile) Application Blazor WebView Component Response Embedded Resources Statische Dateien Intra-Process Communication Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Unterschiede zu SPAs? Blazor Server, WebAssembly & Hybrid – ein Wegweiser

15 • Hybrid / MAUI ist für native Apps • Webview wird nur als Darstellungscontainer genutzt • Hat nichts mit SPAs zu tun Blazor Hybrid vs. SPA Blazor Server, WebAssembly & Hybrid – ein Wegweiser

S Server Blazor Server vs. SPAs .NET Runtime Blazor Application State DB Sockets Hardware SignalR State SignalR State SignalR S Browser S Browser S Browser Blazor Server, WebAssembly & Hybrid – ein Wegweiser

17 • Blazor WebAssembly ist echtes SPA-Konzept • Die vollständige Client-Anwendung lebt im Browser • Offline-Fähigkeit • Auch wenn die WASM-Runtime keinen unmittelbaren Zugriff auf JS-Apis hat • JS-Interop hilft hier aus Blazor WebAssembly vs. SPA Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Alles in C# bzw. WASM: ist JavaScript Geschichte? Blazor Server, WebAssembly & Hybrid – ein Wegweiser

19 • Browser können erstmal nur JavaScript ausführen • Auch WebAssembly wird per JS initialisiert und gestartet • Browser-APIs können (derzeit?) nur aus JavaScript verwendet werden • Die WebAssmbly-Runtime kann z.B. nicht aufs DOM zugreifen oder HTTP-Requests ausführen • Kommunikation in beide Richtungen passiert mittels JS-Interop • Eigentliche Idee von WASM: Bibliotheken die in C / C++ / Rust / Go / etc… geschrieben sind (z.B. Bildbearbeitung, Berechnungen etc.) im Browser durch JS verwendbar zu machen • Treiber: Game-engines • Also: Nein 😉 Ist JavaScript Geschichte? Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Bewährtes und neues Know-How Blazor Server, WebAssembly & Hybrid – ein Wegweiser

21 • ASP.NET Core Infrastruktur (DI, Config, Hosting, Logging...) • ASP.NET Core MVC (Razor Pages) • Businesslogik mit .NET umsetzen • EF Core • HTML & CSS • UI-Framework der Wahl (Bootstrap, Material, Foundation, etc...) • JS (etwas, für interop) • „Situational Awareness“ oder „Wo passiert was?“ (Browser, SignalR, Server-rendered, Blazor-Komponente, welcher Scope?) Bewährtes und neues Know-How Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Wann nutze ich eher was? Blazor Server, WebAssembly & Hybrid – ein Wegweiser

23 • Desktop • Windows • WinForms oder WPF: Blazor Hybrid mit Blazor WebView • MAUI • macOS • MAUI (mac-catalyst) • Mobile • iOS & Android • PWA mit Blazor WebAssembly • MAUI • Web / Browser • Blazor WebAssembly Wann nutze ich eher was? Blazor Server, WebAssembly & Hybrid – ein Wegweiser

24 • Blazor Server hat komplexe, nicht Web-Style Basisarchitektur – aka „Server-Client“ • Code wird immer auf Serverseite ausgeführt • Zustand wird ausschließlich auf Serverseite gehalten • Skalierung wird deutlich aufwändiger • Auf dem Client ist nur ein schmaler JavaScript-Stub aktiv (aus dem Blazor-Framework) • Jegliche UI-Interaktionen wandern immer über das Netzwerk (SignalR-Verbindung) • Ständige Netzwerkverbindung mit niedriger Latenz nötig - fehleranfällig • Keine Offlinefähigkeit - Möglichkeiten als SPA / PWA werden massiv eingeschränkt • Zustandsbehaftete Datenhaltung erschwert • MVC oder Razor Pages sind deutlich einfacher wenn man reine Server-Side Webanwendungen braucht • In .NET 8 (Preview) ist es schon möglich, Razor Components auch in MVC und Razor Pages zu verwenden • Aber es gibt evtl. (sehr) kleine Nischen für sinnvollen Einsatz von Blazor Server • Infos über die technischen Details und Eigenheiten von Blazor Server: • https://www.thinktecture.com/de/blazor/webinar-blazor-server-moegliche-alternative-zu-spas/ Was ist mit Blazor Server? Blazor Server, WebAssembly & Hybrid – ein Wegweiser

25 • Blazor ist noch sehr jung und hat noch Ecken und Kanten: • .dll‘s / PE-Executables müssen in den Browser • Firewalls blockieren das gerne • In .NET 8 (Preview) neues WebCIL Format • Download-Größe (.NET Runtime + Anwendung) • Startup-Zeit (.NET Initialisierung) • Authentifizierung durch redirects/reloads & restarts langsam • Blazor ist kein Wundermittel und kann existierende WinForms & WPF-Anwendungen NICHT einfach mal so webifizieren • Gute User-Experience ist mit JavaScript sehr einfach in Blazor muss man alles durch Interop durchschieben Blazor WASM vs. andere SPA-Technologien Blazor Server, WebAssembly & Hybrid – ein Wegweiser

26 • Business-Anwendungen • Blazor kann bedenkenlos bei internen Forms-over-Data Tools eingesetzt werden • B2B • kann beeinträchtigt sein (Zielkunde hat ggf. aggressive Firewall…) (nicht mehr in .NET 8) • Akzeptanz im Kunden-Umfeld wegen Performance ggf. problematisch • B2C • Akzeptanz im Consumer-Umfeld wegen Performance ggf. problematisch Blazor WASM vs. andere SPA-Technologien Blazor Server, WebAssembly & Hybrid – ein Wegweiser

Fazit Blazor Server, WebAssembly & Hybrid – ein Wegweiser

28 • Blazor ist ein noch sehr junges Framework zum Erstellen von Web-Anwendungen • Blazor WebAssembly ist das einzige echte SPA - Framework • Blazor Hybrid erlaubt es, Blazor-Komponenten (und komplette Anwendungen) in existierenden Windows-Anwendungen zu verwenden • Blazor MAUI erlaubt es, Web-Anwendungen als native Cross-Plattform Apps bereitzustellen (analog Electron / Capacitor) • Blazor Server ist ein über-komplexes neues WebForms-Updatepanel Fazit Blazor Server, WebAssembly & Hybrid – ein Wegweiser

29 • Wann wird es besser? Fazit Blazor Server, WebAssembly & Hybrid – ein Wegweiser

https://www.thinktecture.com/ueber-uns/karriere/ Dankeschön! 30 Sebastian Gingter https://thinktecture.com/sebastian-gingter Patrick Jahr https://thinktecture.com/patrick-jahr