Full Stack .NET: Single Page Applications mit Blazor, C# & WebAssembly

Single Page Applications (SPAs) – bisher implementierte man sie vornehmlich mit JavaScript oder TypeScript, oft im Rahmen eines SPA Frameworks wie Angular oder React. Mittlerweile können nun durch den WebAssembly-Standard theoretisch beliebige Sprachen genutzt werden. Mit dem Blazor Framework auf Basis von WebAssembly hat das ASP.NET-Core-Team einen neuen Kandidaten am Start, um auch praktisch mit C# und .NET-SPAs für den Browser realisieren zu können. Christian Weyer zeigt in diesem Vortrag in gewohnt praktischer Manier anhand von Beispielen, wie Blazor tickt, wie man es sinnvoll einsetzen kann und wo aktuell – je nach Anwendungsfall – die Grenzen liegen.

Transcript

1. Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly Christian Weyer https://thinktecture.com/christian-weyer @christianweyer CTO @ Thinktecture AG
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 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly Christian Weyer
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? Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly OK - what is the problem? In the frontend: Can Blazor help here?
4. 4 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly Blazor – how does it feel for developers?
5. 5 § Automatic-Windows-to-Web-conversion-wonder-machine ™ § Next incarnation of Silverlight (as Blazor is Web-all-the-way) § JavaScript killer Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly 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 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly 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 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly 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 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly Blazor WebAssembly in the browser Blazor DOM WebAssembly .NET Razor Components
9. 9 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly Browser support https://caniuse.com/#feat=wasm
10. 10 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly Blazor WebAssembly technical architecture 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 08.02.2021 blazor.boot.json
11. 11 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly 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 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly 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) ✔ ✔ ✔
13. 13 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly 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 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly 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 ✔ ✔ ✔ ✔ ✔
15. 15 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly 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 Performance improvements Debugging improvements CSS isolation Microsoft Identity v2.0 and MSAL v2.0 New InputFile component WASM prerendering New InputRadio and InputRadioGroup components Trimming/linking improvements Component virtualization Browser compatibility analyzer ontoggle event support Lazy load assemblies Set UI focus in Blazor apps Updated globalization support Custom validation class attributes Form components support display name IAsyncDisposable support Catch-all route parameters JavaScript isolation and object references Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly New features in .NET 5 (compared to Blazor WebAssembly 3.2)
17. 17 § 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 immature § Blazor is under ongoing evolvement § It will turn 1 year in May 2021 § Missing features, e.g. § Real lazy loading § AOT builds § Better developer tooling (e.g. improved debugger, live/hot reload) § Roadmap § Blazor WASM will further improve with .NET 6 (November 2021) § Tied to major .NET releases § https://github.com/dotnet/aspnetcore/issues/27883 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly Current state & future
18. 18 Full Stack .NET Single Page Applications mit Blazor, C# & 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 – may 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.
19. 19 § 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 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly 🗣 Call-to-Action ⁉
20. 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 20
21. 21 § 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 Full Stack .NET Single Page Applications mit Blazor, C# & WebAssembly Resources