Blazor: Server, WebAssembly & Hybrid – ein Wegweiser

Schon seit .NET 1.0 in 2002 bietet uns unser Lieblingsframework die Möglichkeit, Webanwendungen zu bauen, damals mit ASP.NET Web Forms. In den letzten 20 Jahren hat sich das Web, und damit eben auch ASP.NET stark weiterentwickelt: zuerst AJAX, dann MVC, Web APIs, Razor, Razor Pages und jetzt eben Blazor. Blazor ist dabei aber nicht nur ein Programmiermodell, sondern gleich drei Dinge auf einmal: Spannung, Spiel und ... äh, naja, Blazor Server, Blazor WebAssembly und Blazor Hybrid. In dieser Session erklären Ihnen die beiden Blazor-Experten Sebastian Gingter und Patrick Jahr, was ASP.NET Core Blazor, wie es offiziell heißt, überhaupt ist, wie sich die drei Geschmacksrichtungen unterscheiden und ob man Blazor wirklich für seine Projekte in Erwägung ziehen sollte und falls ja, welche Variante davon.

Transcript

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

   View Slide

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

   View Slide

3. 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
   ▪ sebastian.gingter@thinktecture.com
   ▪ Twitter: @phoenixhawk
   Sebastian Gingter
   Blazor
   Server, WebAssembly & Hybrid – ein Wegweiser
   

   View Slide

4. 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
   

   View Slide

5. 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
   

   View Slide

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

   View Slide

7. 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
   

   View Slide

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

   View Slide

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

   View Slide

10. 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
    

    View Slide

11. 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
    

    View Slide

12. 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
    

    View Slide

13. 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
    

    View Slide

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

    View Slide

15. 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
    

    View Slide

16. 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
    

    View Slide

17. 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
    

    View Slide

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

    View Slide

19. 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
    

    View Slide

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

    View Slide

21. 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
    

    View Slide

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

    View Slide

23. 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
    

    View Slide

24. 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
    

    View Slide

25. 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
    

    View Slide

26. 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
    

    View Slide

27. Fazit
    Blazor
    Server, WebAssembly & Hybrid – ein Wegweiser
    

    View Slide

28. 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
    

    View Slide

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

    View Slide

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

    View Slide