Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BLAZOR IN .NET 7: SERVER, WEBASSEMBLY UND HYBRID – EIN WEGWEISER

BLAZOR IN .NET 7: SERVER, WEBASSEMBLY UND HYBRID – EIN WEGWEISER

Schon seit .NET 1.0 aus dem Jahr 2002 bietet uns unser Lieblingsframework die Möglichkeit, Webanwendungen zu bauen. Damals mit ASP.NET Web Forms. In den letzten zwanzig Jahren haben 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 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ärt Ihnen Blazor-Experte Patrick Jahr was ASP.NET Core Blazor, wie es offiziell heißt, überhaupt ist, wie sich die drei Geschmacksrichtungen unterscheiden und ob man Blazor überhaupt (und falls ja: welche Variante davon) für seine Projekte in Erwägung ziehen sollte.

Patrick Jahr

October 12, 2022
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

Transcript

  1. Session Blazor in .NET 7 Server, WebAssembly & Hybrid –

    Ein Wegweiser Patrick Jahr https://thinktecture.com/patrick-jahr @jahr_patrick Developer Consultant
  2. 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
  3. 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
  4. 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
  5. 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
  6. Blazor in .NET 7 Server, WebAssembly & Hybrid - Ein

    Wegweiser Browser Server Klassisches Request-Response-Modell HTML CSS JS Request Response Statische Dateien & Code
  7. 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
  8. 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)
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. Alles in C# bzw. WASM: ist JavaScript Geschichte? Blazor in

    .NET 7 Server, WebAssembly & Hybrid - Ein Wegweiser
  15. 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
  16. 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
  17. Wann nutze ich eher was? Blazor in .NET 7 Server,

    WebAssembly & Hybrid - Ein Wegweiser
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 29 • Wann wird es besser? Fazit Blazor in .NET

    7 Server, WebAssembly & Hybrid - Ein Wegweiser