Blazor in .NET 5: Single-Page-Applications mit 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 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 vielen Beispielen wie Blazor in .NET 5 tickt, wie man es sinnvoll einsetzen kann und wo aktuell die Grenzen liegen – je nach Anwendungsfall.

Transcript

1. Blazor in .NET 5 Single-Page-Applications mit 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 Blazor in .NET 5 Single-Page-Applications mit 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? Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly OK - what is the problem? In the frontend: Can Blazor help here?
4. 4 Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Blazor WebAssembly: how does it feel…?
5. 5 § Automatic-Windows-to-Web-conversion-wonder-machine ™ § Next incarnation of Silverlight (as Blazor is Web-all-the-way) § JavaScript killer Blazor in .NET 5 Single-Page-Applications mit 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 Blazor in .NET 5 Single-Page-Applications mit 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 Blazor in .NET 5 Single-Page-Applications mit 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 Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Blazor WebAssembly in the browser Blazor DOM WebAssembly .NET Razor Components
9. 9 Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Browser support https://caniuse.com/#feat=wasm
10. 10 Blazor in .NET 5 Single-Page-Applications mit 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 15.02.2021 blazor.boot.json
11. 11 Blazor in .NET 5 Single-Page-Applications mit 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 Blazor in .NET 5 Single-Page-Applications mit 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 Blazor in .NET 5 Single-Page-Applications mit 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 Blazor in .NET 5 Single-Page-Applications mit 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 Blazor in .NET 5 Single-Page-Applications mit 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 Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Summary of new features in .NET 5 https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-5.0?view=aspnetcore-5.0#blazor
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) § https://github.com/dotnet/aspnetcore/issues/27883 Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Current state & future
18. 18 Blazor in .NET 5 Single-Page-Applications mit 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 – 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.
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 Blazor in .NET 5 Single-Page-Applications mit 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 Demo-Code: 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