Blazor WebAssembly: SPAs mit C# und .NET 5

Single Page Applications (SPAs) schreibt man mit JavaScript oder TypeScript – na klar! Mit ASP.NET Core Blazor gibt es jedoch eine mögliche Alternative für .NET-Entwickler. Auf Basis des Web-Standards WebAssembly stellt es Tooling und eine Runtime zur Verfügung, über die man SPAs mit C# & Razor entwickeln kann. In dieser Session zeigt .NET- und Web-Veteran Christian Weyer anhand praktischer Beispiele was mit Blazor WebAssembly in .NET 5 möglich ist, vor allem hinsichtlich "Full Stack"-Programmierung für End-to-End Web-Anwendungen. Ein realistischer Blick auf die Grenzen der Technologie darf hierbei freilich nicht fehlen.

Transcript

1. Blazor WebAssembly SPAs mit C# und .NET 5 Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO 1
2. 2 § Co-Founder & CTO at Thinktecture AG § Personal focus on § Mobile & web-based application architectures § Interoperability, cross-device § Pragmatic end-to-end solutions § Cloud-native & serverless architectures § Independent 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 Blazor WebAssembly SPAs mit C# und .NET 5 Christian Weyer P
3. 3 § 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# everywhere? Blazor WebAssembly SPAs mit C# und .NET 5 OK - what is the problem? In the frontend: Can Blazor help here?
4. 4 Blazor WebAssembly SPAs mit C# und .NET 5 Blazor – how does it feels for developers?
5. 5 § Automatic-Windows-to-Web-conversion-wonder-machine ™ § Next incarnation of Silverlight (as Blazor is Web-all-the-way) § JavaScript killer Blazor WebAssembly SPAs mit C# und .NET 5 What is Blazor NOT? X
6. 6 § 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 Blazor WebAssembly SPAs mit C# und .NET 5 What is Blazor? Mono-based Runtime .NET CLR .NET 5 / .NET Standard 2.1 .NET Framework Blazor WebAssembly Blazor Server Razor Components Browser (WASM / .NET / JS) Browser (JS Stub) Server (.NET)
7. 7 Blazor WebAssembly SPAs mit C# und .NET 5 Our Blazor journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Current State & Future Data Binding & Forms WebAssembly .NET Razor Components ✔
8. 8 Blazor WebAssembly SPAs mit C# und .NET 5 Blazor WebAssembly in the browser Blazor DOM WebAssembly .NET Razor Components
9. 9 Blazor WebAssembly SPAs mit C# und .NET 5 Browser support https://caniuse.com/#feat=wasm
10. 10 Blazor WebAssembly SPAs mit C# und .NET 5 Blazor WebAssembly technical architecture in .NET 5 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 03.08.2021 blazor.boot.json P
11. 11 Blazor WebAssembly SPAs mit C# und .NET 5 Our Blazor journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Current State & Future Data Binding & Forms Pages vs. Components HTML, CSS C# ✔ ✔
12. 12 Blazor WebAssembly SPAs mit C# und .NET 5 Our Blazor journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Current State & Future Data Binding & Forms DI Class Libraries Full Stack (APIs, Push, Security) ✔ ✔ ✔ K
13. 13 Blazor WebAssembly SPAs mit C# und .NET 5 Our Blazor journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Current State & Future Data Binding & Forms Data Passing Forms Validation ✔ ✔ ✔ ✔
14. 14 Blazor WebAssembly SPAs mit C# und .NET 5 Our Blazor journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Current State & Future Data Binding & Forms JS Interop PWA ✔ ✔ ✔ ✔ ✔ E
15. 15 Blazor WebAssembly SPAs mit C# und .NET 5 Our Blazor journey The Web as a Platform Blazor WebAssembly Idea & Approach Components all over SPAs with .NET Interop & Integration Comparison Data Binding & Forms Current State & Future Status Quo Roadmap ✔ ✔ ✔ ✔ ✔ ✔
16. 16 § Blazor WebAssembly is in “v1.1” as of .NET 5 § WASM is an MVP (and SPAs are not a target of it) § Mono/.NET 5 WASM runtime is still immature § Blazor WASM is under ongoing evolvement (15 months old now) § Missing features, e.g. § Real lazy loading § AOT builds § Better developer tooling (e.g. improved debugger, live/hot reload) § Ecosystem is evolving § OSS & commercial § Roadmap § Blazor WASM will further improve w/ .NET 6 (November 2021) & upcoming .NET releases § https://github.com/dotnet/aspnetcore/issues/27883 Blazor WebAssembly SPAs mit C# und .NET 5 Current state & future
17. 17 Blazor WebAssembly SPAs mit C# und .NET 5 Blazor recap – viable option for .NET-centric development teams 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 Web architecture, no boundaries. Stateful server-side with dumb client UI. W
18. Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer christian.weyer@thinktecture.com Demoanwendung: 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 18
19. 19 § Blazor § https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor § Running Your ASP.NET Core Blazor WebAssembly Application As A Progressive Web App (PWA) § https://www.thinktecture.com/de/blazor/progressive-web-apps-pwa/ § Re-Using Angular Components In A Blazor WebAssembly Application Using Angular Elements – Web Components Custom Elements, FTW! § https://www.thinktecture.com/de/blazor/integration-angular-elements-web-components/ § FluentValidation library § https://github.com/Blazored/FluentValidation Blazor WebAssembly SPAs mit C# und .NET 5 Resources
20. Appendix SPAs mit C# und .NET 5 Blazor WebAssembly 20
21. 21 Blazor WebAssembly SPAs mit C# und .NET 5 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
22. ✅ 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 Blazor WebAssembly SPAs mit C# und .NET 5 My Personal Comparison Blazor WebAssembly Blazor Server 22