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.

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 § sebastian.gingter@thinktecture.com § 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: patrick.jahr@thinktecture.com 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. ”The web has won.” Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
19. 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
20. 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
21. 24 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly
22. 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
23. 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
24. 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
25. 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
26. 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
27. 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
28. Components Fundamentals Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
29. RenderTree Generated C# Code Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
30. Pages Fundamentals Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
31. Routing Fundamentals Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
32. 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
33. Dependency Injection Components & Services Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
34. Code-Behind Clean code Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
35. Web APIs Fundamentals Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
36. Web APIs Entity Framework Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
37. Web APIs DTOs Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
38. Web APIs Validation Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
39. Web APIs HttpClient Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
40. SignalR Fundamentals Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
41. SignalR Clients Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
42. Authentication OIDC Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
43. SEO & Performance Prerendering Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
44. 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
45. Data Binding One-way and Two-way Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
46. Forms Fundamentals Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
47. Validation DataAnnotations Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
48. Validation FluentValidation Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
49. 3rd Party Components Native vs. JavaScript Wrapper Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
50. 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
51. JavaScript Interop .NET-to-JS Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
52. JavaScript Interop JS-to-.NET Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
53. Progressive Web Apps (PWA) The new Cross-Platform Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
54. UI Frameworks Commercial and Open Source Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Workshop
55. 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
56. 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
57. 71 Blazor Workshop Full-Stack- und Cross-Plattform-Anwendungen mit C# und WebAssembly Blazor Server – Disconnected UX
58. ✅ 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
59. 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
60. 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
61. .NET 8 Outlook Full-Stack- und Cross-Pla[orm-Anwendungen mit C# und WebAssembly Blazor Workshop
62. 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
63. 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
64. 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.
65. 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
66. https://www.thinktecture.com/ueber-uns/karriere/ Dankeschön! Demos aus der Workshop: https://github.com/thinktecture-labs/basta- spring-2023-blazor-workshop https://github.com/thinktecture/blazor- webassembly-demo 80 Sebastian Gingter https://thinktecture.com/sebastian-gingter Patrick Jahr hgps://thinktecture.com/patrick-jahr