Workshop: Blazor - Moderne Businessanwendungen mit C# & WebAssembly: Full-Stack- und Cross-Plattform

In diesem Workshop lernen Sie bei Christian Weyer und Patrick Jahr alles über den Praxiseinsatz des clientseitigen Blazor-Frameworks des ASP.NET-Core-Teams, das auf dem Standard WebAssembly basiert. Erleben Sie, wie man mit Blazor, C# und .NET webbasierte Single Page Applications (SPAs) baut und wie man mit einer passenden Anwendungsarchitektur über API und Push Services eine Full-Stack-Lösung mit C# implementiert.

Transcript

1. Workshop Blazor: Moderne Businessanwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO Patrick Jahr https://thinktecture.com/patrick-jahr @jahr_patrick Developer Consultant
2. 2 § Co-Founder & CTO at Thinktecture AG § Personal focus on § Pragmatic end-to-end solutions § Cloud-native & serverless architectures § Mobile & web-based application architectures § Microsoft Regional Director § Microsoft MVP for Developer Technologies & Azure ASPInsider, AzureInsider § Google GDE for Web Technologies, Angular christian.weyer@thinktecture.com @christianweyer https://www.thinktecture.com ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Christian Weyer
3. 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Patrick Jahr
4. 4 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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
5. 5 § 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Modern Business Applications
6. 6 § 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? ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform OK - What is the Problem? 🤔
7. 7 § Automatic-Windows-to-Web-conversion-wonder-machine ™ § Next incarnation of Silverlight (as Blazor is Web-all-the-way) § JavaScript killer ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform What is Blazor NOT? X
8. 8 § Blazor is a family of web technologies § Server § WebAssembly § 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform What is Blazor? Mono-based Runtime .NET CLR .NET 6 .NET Framework Blazor WebAssembly Blazor Server Razor Components Browser (WASM / .NET / JS) Browser (JS Stub) Server (.NET)
9. End-to-End Architecture Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
10. Architecture Online vs. Offline Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
11. 11 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Bird’s-Eye-View: Typical (Online) Target Architecture HTTP API WS API Service D HTTPS HTTPS WebSocket Service A Service B Service C HTTP API
12. 12 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Our Journey Today Architecture + The Web as a Platform Blazor Idea & Approach Components all over SPAs with .NET with .NET Backends Interop & Integration Comparison Data Binding & Forms Current State & Future
13. 13 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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 Web Assembly
14. ”The web has won.” Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
15. 15 § Progressive Web Apps § Web Components § WebAssembly ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Three pillars of the Modern Web
16. 16 § 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Progressive Web Apps (PWA) – the Web gets more native
17. 17 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform
18. ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Offline Capability with Service Worker Mobile or Desktop system Remote storage Server HTTPS Browser sandbox Web App HTML/JS Cache storage fetch Service Worker
19. ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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
20. 20 § Low-level bytecode for the Web – beyond asm.js § Bring any language into the browser § Currently targeted at C/C++ § Achieve superior performance in certain cases § Because JavaScript 😉 (but not a replacement for JavaScript!) § Stack machine-based § Not AST, or register- or SSA-based bytecode § See https://github.com/WebAssembly/design/blob/master/Rationale.md § Goals § Fast, efficient, portable ▪ Use existing sandboxing tools § Readable and debuggable ▪ Don’t break the Web ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform WebAssembly (WASM) https://twitter.com/getify/status/997098808344547328
21. 21 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Browser Support https://caniuse.com/#feat=wasm
22. 22 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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. 23 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Blazor WebAssembly in the Browser Blazor DOM Web Assembly .NET Razor Components
24. 24 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Blazor WebAssembly Technical Architecture in .NET 6.0 – 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. 25 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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. Pages Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
27. RenderTree Generated C# Code Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
28. Routing Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
29. Components Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
30. 30 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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
31. Dependency Injection Components & Services Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
32. Code-Behind Clean code Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
33. Web APIs Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
34. Web APIs Entity Framework Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
35. Web APIs DTOs Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
36. Web APIs Validation Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
37. Web APIs HttpClient Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
38. SignalR Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
39. SignalR Clients Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
40. Authentication OIDC Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
41. gRPC Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
42. gRPC Clients Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
43. Modularization RCLs Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
44. Modularization Lazy Loading Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
45. SEO & Performance Prerendering Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
46. Testing Unit Testing Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
47. 47 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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
48. Data Binding One-way and Two-way Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
49. Forms Fundamentals Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
50. Validation DataAnnotations Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
51. Validation FluentValidation Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
52. 3rd Party Components Native vs. JavaScript Wrapper Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
53. 53 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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
54. JavaScript Interop .NET-to-JS Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
55. SPA Integration Web Components Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
56. JavaScript Interop JS-to-.NET Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
57. Electron Cross-Platform Desktop Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
58. Capacitor Cross-Platform Mobile Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
59. Progressive Web Apps (PWA) The new Cross-Platform Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
60. UI Frameworks Commercial and Open Source Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
61. 61 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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
62. 62 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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
63. 63 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Blazor Server – Disconnected UX
64. ✅ Full SPA architecture approach ✅ No latency, code runs locally in the browser ✅ Full support for offline scenarios ✅ Deployment: static files on web server or cloud storage; Desktop or mobile app packaging ✴ Initial download size may be large (assets cached in browser, via Service Worker) ❌ .NET Standard code is currently interpreted by special WASM-version of Mono runtime ❌ Always needs JavaScript/TypeScript, until WASM standard is being further evolved ✅ Thin Client approach for light devices ✅ Full .NET runtime on the server, not just .NET Standard ✅ No need for API-based architecture ✴ All your code is on the server ❌ Inherently stateful execution model ❌ Need for permanent physical connections ❌ No viable option to implement offline features ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Personal Comparison Blazor WebAssembly Blazor Server
65. 65 Blazor WebAssembly Angular Language C# JavaScript, TypeScript Pre-Requisites No further pre-requisites Promotes usage of RxJS Tooling Visual Studio 2019, VS Code, VS for Mac, Rider WebStorm, VS Code et. al. Packaging Your assemblies/DLLs in the browser 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 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 Standard JS/TS (e.g. nest.js) Size Not really optimized yet; quite large 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform My Personal View Blazor ⇔ Angular
66. 66 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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
67. .NET 7 Outlook Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform ASP.NET Core Blazor
68. 68 § 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Current State & Future
69. 69 § 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 5.0 § https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-5.0?view=aspnetcore-5.0 § bUnit § https://github.com/egil/bUnit § Mobile Blazor Bindings § https://github.com/dotnet/MobileBlazorBindings § ASP.NET Core 6 Roadmap § https://github.com/dotnet/aspnetcore/issues/27883 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform Resources
70. 70 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 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.
71. 71 § 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 ASP.NET Core Blazor Moderne Business-Anwendungen mit C# & WebAssembly – Full-Stack- und Cross-Plattform 🗣 Call-to-Action
72. Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer christian.weyer@thinktecture.com Demo-Code: https://github.com/thinktecture/basta-spring-2022-blazor-workshop https://github.com/thinktecture/blazor-webassembly-demo Blazor Knowledge Hub: https://www.thinktecture.com/de/asp-dotnet-core-blazor/ Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://www.thinktecture.com/de/newsletter