Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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/

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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)

Slide 8

Slide 8 text

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 ✔

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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