Blazor WebAssembly SPAs mit C# und .NET 5 Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO 

2 Blazor WebAssembly SPAs mit C# und .NET 5 Note: Blazor WebAssembly: Neues in .NET 5 https://www.thinktecture.com/de/blazor/webinar-blazor-webassembly-neues-in-dotnet5/ 

3 § 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 [email protected] @christianweyer https://www.thinktecture.com Blazor WebAssembly SPAs mit C# und .NET 5 Christian Weyer 

4 § 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? 

5 Blazor WebAssembly SPAs mit C# und .NET 5 Blazor – how does it feels for developers? 

6 § 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 

7 § 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) 

8 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 ✔ 

9 Blazor WebAssembly SPAs mit C# und .NET 5 Blazor WebAssembly in the browser Blazor DOM WebAssembly .NET Razor Components 

10 Blazor WebAssembly SPAs mit C# und .NET 5 Browser support https://caniuse.com/#feat=wasm 

11 Blazor WebAssembly SPAs mit C# und .NET 5 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 

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 Pages vs. Components HTML, CSS C# ✔ ✔ 

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 DI Class Libraries Full Stack (APIs, Push, Security) ✔ ✔ ✔ 

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 Data Passing Forms Validation ✔ ✔ ✔ ✔ 

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 Current State & Future Data Binding & Forms JS Interop PWA ✔ ✔ ✔ ✔ ✔ 

16 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 ✔ ✔ ✔ ✔ ✔ ✔ 

17 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 WebAssembly SPAs mit C# und .NET 5 Overview of new features in .NET 5 

18 § 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 WebAssembly SPAs mit C# und .NET 5 Current state & future 

19 Blazor WebAssembly SPAs mit C# und .NET 5 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. 

Danke! Bei Fragen kontaktieren Sie mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer [email protected] 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 § 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