Session Blazor in .NET 7 Server, WebAssembly & Hybrid – Ein Wegweiser Patrick Jahr https://thinktecture.com/patrick-jahr @jahr_patrick Developer Consultant

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 Server, WebAssembly & Hybrid - Ein Wegweiser Blazor in .NET 7

Special Day Blazor Thema Sprecher Datum, Uhrzeit Blazor in .NET 7: Server, WebAssembly und Hybrid – ein Wegweiser Sebastian Gingter, Patrick Jahr DI, 11. Oktober 2022, 10.45 bis 11.45 Blazor WebAssembly: Performanceoptimierungen fürs UI Patrick Jahr DI, 11. Oktober 2022, 12.15 bis 13.15 Blazor Hybrid: Wie sich Blazor in WPF, Windows Forms und MAUI integriert Dr. Holger Schwichtenberg DI, 11. Oktober 2022, 15.30 bis 16.30 gRPC und Blazor WebAssembly: Ein Traumpaar? Christian Weyer DI, 11. Oktober 2022, 17.00 bis 18.00 Praxisnahes State Management in Blazor WebAssembly – Was sind denn das für Zustände? Sebastian Gingter DI, 11. Oktober 2022, 19.00 bis 20.00

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 in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

Was ist Blazor? Blazor in .NET 7 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 • Blazor-Komponenten 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 in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

Die verschiedenen “Geschmacksrichtungen” Blazor in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

Blazor in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser Browser Server Klassisches Request-Response-Modell HTML CSS JS Request Response Statische Dateien & Code

Blazor in .NET 7 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 in .NET 7 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 in .NET 7 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 in .NET 7 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

Unterschiede zu SPAs? Blazor in .NET 7 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 in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

Blazor in .NET 7 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

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 in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

Alles in C# bzw. WASM: ist JavaScript Geschichte? Blazor in .NET 7 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 in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

Bewährtes und neues Know-How Blazor in .NET 7 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 in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

Wann nutze ich eher was? Blazor in .NET 7 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 in .NET 7 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 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 • 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 in .NET 7 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 • Download-Größe (.NET Runtime + Anwendung) • Startup-Zeit (.NET Initialisierung) • Authentifizierung durch redirects/reloads 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 in .NET 7 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…) • B2C • Akzeptanz im Consumer-Umfeld wegen Performance ggf. problematisch Blazor WASM vs. andere SPA-Technologien Blazor in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

Fazit Blazor in .NET 7 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 in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

29 • Wann wird es besser? Fazit Blazor in .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser

https://www.thinktecture.com/ueber-uns/karriere/ Dankeschön! Patrick Jahr https://thinktecture.com/patrick-jahr