Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Christian Weyer https://thinktecture.com/christian-weyer @christianweyer CTO @ Thinktecture AG

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 [email protected] @christianweyer https://www.thinktecture.com Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Christian Weyer

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 Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Blazor WebAssembly: how does it feel…?

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 § 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 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 Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Blazor WebAssembly in the browser Blazor DOM WebAssembly .NET Razor Components

9 Blazor in .NET 5 Single-Page-Applications mit C# & WebAssembly Browser support https://caniuse.com/#feat=wasm

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

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