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

Blazor-Workshop: Full-Stack- und Cross-Plattfor...

Patrick Jahr
February 22, 2023

Blazor-Workshop: Full-Stack- und Cross-Plattform-Lösungen mit C# und WebAssembly

Das Web als Plattform und der Browser als Ausführungsumgebung haben vor vielen Jahren ihren Siegeszug als Basis für moderne Businessanwendungen angetreten. Mit dem WebAssembly-Standard kann ein Entwickler heute neben JavaScript und TypeScript auch andere, nicht webnative Programmiersprachen und Frameworks nutzen, um Cross-Platform-Lösungen für den Browser zu realisieren. In diesem Workshop widmen sich Patrick Jahr und Sebastian Gingter dem clientseitigen Blazor-WebAssembly-Framework des ASP.NET-Core-Teams. Erleben Sie, wie man mit Blazor, C# und .NET webbasierte Single Page Applications (SPAs) baut und mit einer passenden End-to-End-Anwendungsarchitektur über APIs und Push Services eine Full-Stack-Lösung mit C# implementiert.

Patrick Jahr

February 22, 2023
Tweet

More Decks by Patrick Jahr

Other Decks in Programming

Transcript

  1. 1 § Was SIE ERWARTET § Full-Stack und Cross-Plattform-Anwendungen mit

    C# (… und auch JavaScript…) § End-to-End-Architekturen § Sichere .NET-7-Backends mit Web-APIs, SignalR, gRPC § Single-Page-Applications (SPAs) mit Blazor WebAssembly § Realistische & pragmatische Einschätzung von Blazor - Status Quo & Ausblick § Demos § Was Sie NICHT erwartet § Blazor Deep Dives § Blazor Server / Hybrid (aber Vergleich & Einschätzung dazu) Workshop Blazor: Full-Stack- und Cross-Plattform-Anwendungen mit C# & WebAssembly Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly !!! KEIN Hands-On für Teilnehmer!!!
  2. Workshop Blazor-Workshop: Full-Stack- und Cross-Plattform-Anwendungen mit C# & WebAssembly Patrick

    Jahr https://thinktecture.com/patrick-jahr @jahr_patrick Developer Consultant Sebastian Gingter https://thinktecture.com/sebastian-gingter @phoenixhawk Consultant & Erklärbär 🐻💬
  3. 3 § Consultant & Erklärbär 🐻💬 bei der Thinktecture AG

    § Fokus auf § Flexible und skalierbare Backend-Architekturen § Blazor WebAssembly § Identity und Access-Management § Entwicklerproduktivität § Softwarequalität § Alles rund um .NET Core § [email protected] § Twitter: @phoenixhawk Sebastian Gingter Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
  4. Hello, it’s me. Patrick Jahr Developer Consultant @ Thinktecture AG

    E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Patrick Jahr
  5. 5 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Four Blocks – approx. break down Intro Story … a bit boooring stuff … But please bear with us! Technology Architecture Code 😏 😊 Technology Architecture Code 😊 Technology Architecture Code Final Q&A 😊 09.00 – 10.30 11.00 – 12.30 13.30 – 15.00 15.30 – 17.00
  6. 6 § No longer Windows-only § Web-enabled § Deployment §

    Updates § Native-like features § Still: Smart Clients (SPA) § Path to Software-as-a-Service (SaaS) § APIs are king § Possibilities for specialized microservices § SaaS is the big transformation Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Full-Stack & Cross-Platform Applications
  7. 7 § Users want: § Cross-Platform, Cross-Device § No installations

    § Offline (important for many use cases) § Developers think: § Web is the solution, but web is different § SPA is the solution, but SPA is different § JavaScript seems to be an issue for some .NET developers § There is existing .NET code, what to do about it? § Which technologies to choose? § JavaScript, everywhere? C# & .NET everywhere? § In the Frontend: Can Blazor help here? Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly OK - What is the Problem? 🤔
  8. 8 § Automatic-Windows-to-Web-conversion-wonder-machine ™ § Next incarnation of Silverlight (as

    Blazor is Web-all-the-way) § JavaScript killer Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly What is Blazor NOT? X
  9. 9 § Blazor is a family of web technologies §

    Server § WebAssembly § Hybrid / MAUI § Blazor WebAssembly is a SPA framework § Web, SPA & distributed computing knowledge § HTML, CSS knowledge § DOM knowledge § JavaScript for DOM interaction & 3rd party integration § C# & .NET Standard for client-side logic → Full-stack C# possible Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly What is Blazor? Mono-based Runtime .NET CLR .NET .NET Framework Blazor WebAssembly Blazor Server Razor Components Browser (WASM / .NET / JS) Browser (JS Stub) Server (.NET) Blazor MAUI Blazor WebView (JS Stub) App (.NET)
  10. Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Browser

    Server Classic Request-Response-Model HTML CSS JS Request Response Static files & Code
  11. Blazor Workshop Browser Server SPA (Angular, React, Vue, …) HTML

    CSS JS Request Response Static files & Code API (Code) JS-Runtime Request Response State Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
  12. Blazor Workshop Browser Server Blazor Webassembly JS-Runtime WASM-Runtime .NET Runtime

    C# App HTML CSS JS Request Response Static files & ASP.NET Core State HTML CSS JS .NET & IL Interop API (Code) Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
  13. Blazor Workshop Browser Server Blazor Server JS-Runtime HTML CSS JS

    Request Response Static files & ASP.NET Core .NET Runtime C# App State Interop SignalR Code Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
  14. Blazor Workshop Browser Server Blazor – Hybrid (MAUI / WinForms

    / WPF) JS-Runtime HTML CSS JS Request Load Static files & ASP.NET Core .NET Runtime C# App State SignalR Code Desktop (or Mobile) Application Blazor WebView Component Response Embedded Resources Static files Intra-Process Communication Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
  15. 15 • ASP.NET Core Infrastructure (DI, Config, Hosting, Logging...) •

    ASP.NET Core MVC and/or Razor Pages • Writing business logic with current C# language features • EF Core • HTML & CSS • UI-Framework of your choice (Bootstrap, Material, Foundation, etc...) • JS (a bit, for interop) • „Situational Awareness“ or „Where happens what?“ (Browser, SignalR, Server-rendered, Razor component, which Scope?) Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly What knowledge can I reuse & what do I need to learn?
  16. 19 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Our Journey Today Architecture + The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Backends Interop & Integration Comparison Data Binding & Forms Current State & Future
  17. 20 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future PWA Web Components
  18. 22 § Progressive Web Apps § Web Components § WebAssembly

    Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Three pillars of the Modern Web
  19. 23 § Web applications should… § Feel & behave more

    like a native app § Be installable, without (classic) app stores § Be able to work completely offline, without any server connections § Receive push notifications, without running § PWAs are targeted at both, mobile and desktop § Progressive Web Apps are not a technology § Collection of characteristics an application must/should support ➔ “Uber Pattern” § Various technologies are available to progressively enhance an application § Some outstanding standards like Web App Manifest, Service Workers § Web Capabilities wants to close gap between native and web Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Progressive Web Apps (PWA) – the Web gets more native
  20. Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Offline

    Capability with Service Worker Mobile or Desktop system Remote storage Server HTTPS Browser sandbox Web App HTML/JS Cache storage fetch Service Worker
  21. Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Web

    Components § Reuse existing functionality as components § Safe your investments § Bring semantics into UI § Web Components are not a standard, but a collection of technologies § Custom Elements § HTML templates § Shadow DOM § Web Components bring a native component model to the web instead of having to use frameworks
  22. 29 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Web Assembly .NET Razor Components
  23. 30 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Blazor WebAssembly in the Browser Blazor DOM Web Assembly .NET Razor Components
  24. 31 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Blazor WASM Technical Architecture since .NET 6 – non-AOT Compiler Parser JIT (.NET Assemblies are interpreted) Web APIs (DOM, IndexedDb, File Storage etc.) Browser blazor. webassembly.js Blazor SPA page (.html) JS Runtime dotnet.wasm dotnet.js mscorlib.dll etc. myapp.dll * As of 17.02.2022 blazor.boot.json
  25. 32 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Razor → Blazor HTML, CSS C# Pages vs. Components
  26. 37 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Class Libraries Full Stack DI .NET-isms
  27. 54 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Data Binding Forms Validation
  28. 60 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future 3rd Party JS Interop PWA Web Components
  29. 69 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Blazor Server Established SPA Frameworks Cross-Platform
  30. 70 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Blazor Server Blazor JS Stub DOM .NET Razor Components ASP.NET Core (Server) SignalR-based binary data exchange State, Connections etc. Browser (Client) UI Diffs Events
  31. ✅ Full SPA architecture approach ✅ No latency, code runs

    locally in the browser ✅ Full support for offline scenarios ✅ Deployment: staPc files on web server or cloud storage; Desktop or mobile app packaging ✴ IniPal download size may be large (assets cached in browser, via Service Worker) ❌ .NET IL code is currently interpreted by special WASM- version of Mono runPme ❌ Always needs JavaScript/TypeScript, unPl WASM standard is being further evolved ✅ Thin Client aproach for light devices ✅ Full .NET runPme on the server, not just .NET Standard ✅ No need for API-based architecture ✴ All your code is on the server ❌ Inherently stateful execuPon model ❌ Need for permanent physical connecPons ❌ No viable opPon to implement offline features Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Our Thinktecture Comparison Blazor WebAssembly Blazor Server
  32. 73 Blazor WebAssembly Angular Language C# TypeScript, JavaScript Framework Opinion

    .NET & ASP.NET Core (like Razor) Promotes usage of RxJS Tooling Visual Studio 2022, (VS Code, VS for Mac, Rider) WebStorm, VS Code et. al. Packaging Your assemblies/DLLs in the browser (+Runtime) Optimized JS via webpack Maturity Brand new, even Preview; no predecessor Very mature; lots of experience from previous versions Community Just starts to build up Very large Ecosystem OSS will build up; Various commercial vendors expected & available Lots of OSS; Also commercial vendors Integration 3rd party For every JS/TS library we need a proxy/shim npm universe: pick and choose; easy to integrate Dependencies WASM support in browsers - Full Stack with single tech C#, .NET (6+) JS/TS (e.g. nest.js) Size Not really optimized yet; quite large (WASM > IL) Continuously improved over years Runtime performance No experience, no real numbers; .NET is interpreted; interop WASM and JS worlds Continuously improved over years; may have pitfalls Blazor Workshop Full-Stack- und Cross-Pla[orm-Anwendungen mit C# und WebAssembly Our Thinktecture View Blazor ⇔ Angular
  33. 74 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Our Blazor Journey The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Limits Missing Features Roadmap
  34. 76 § Blazor WebAssembly (WASM) is a browser SPA framework

    § For C# and .NET developers § .NET code runs assemblies interpreted on a CLR compiled to WASM § AOT-ed code will mostly run as native WASM § Blazor WASM is still young § Release end of April 2020 § Lots of space for improvement § Blazor WASM in .NET 6.0 establishes a reasonable baseline § More to come in NET 7.0+ https://github.com/dotnet/aspnetcore/issues/39504 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Current State & Future
  35. 77 § Fallacies of Distributed Computing § https://de.wikipedia.org/wiki/Fallacies_of_Distributed_Computing § What

    Web can do today? § https://whatwebcando.today/ § Blazor Knowledge Hub § https://www.thinktecture.com/de/asp-dotnet-core-blazor/ § FluentValidation § https://fluentvalidation.net/ § Blazor in .NET 6.0 § https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-6.0?view=aspnetcore-6.0 § bUnit § https://github.com/egil/bUnit § Mobile Blazor Bindings § https://github.com/dotnet/MobileBlazorBindings § ASP.NET Core 7 Roadmap § https://github.com/dotnet/aspnetcore/issues/39504 Blazor Workshop Full-Stack- und Cross-Pla[orm-Anwendungen mit C# und WebAssembly Resources
  36. 78 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly

    Blazor recap Blazor WebAssembly enables SPAs based on C# and .NET Standard. You need to know Web, SPA architectures, Security et. al. – and JavaScript! Blazor is young & immature – technical architecture, app size, missing features. The ecosystem is immature – will evolve similar to JS SPA frameworks, plus commercial vendors. The modern web with PWA & Web Components can also work and live with Blazor WebAssembly. Beware of Blazor Server. No real Web architecture, no boundaries. Stateful server-side with dumb client UI.
  37. 79 § Microsoft is building a new UI framework for

    the browser – so… § … ask yourself § “How do we deal with Blazor?” § “Why would we pick Blazor WebAssembly over an established JS SPA framework?” § “Why would we choose a JS SPA framework, and not Blazor WebAssembly?” § … you need to check your § Team skills § Architecture § Codebase § Try it out & build Proof-of-Concepts (with experienced people) § Web Assembly & Blazor might change the game – but it may not be a game changer for you Blazor Workshop Full-Stack- und Cross-Pla[orm-Anwendungen mit C# und WebAssembly 🗣 Call-to-AcLon