Blazor WebAssembly in der Praxis: 5 Dinge, die Sie kennen sollten Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO

2 § Co-Founder & CTO at Thinktecture AG § Personal focus on § Pragmatic end-to-end solutions § Cloud-native & serverless architectures § Mobile & web-based application architectures § 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 in der Praxis 5(+) Dinge, die Sie kennen sollten Christian Weyer

3 § Blazor WebAssembly (WASM) is a browser SPA framework § For C# and .NET developers § .NET assemblies run interpreted on a CLR compiled to WASM § AOT-ed code will mostly run as native WASM § Blazor WASM is still quite young § First release end of April 2020 § Lots of space for improvement § Blazor WASM in .NET 6.0 establishes a reasonable baseline § More to come in NET 7.0+ Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Current state of Blazor in the browser

4 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Our journey today Logic & Communication Components Performance Code sharing Produc- tivity Isolation Interop Rendering Loading

5 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Our journey today Logic & Communication Components Performance Code sharing Produc- tivity Isolation Interop Rendering Loading

6 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten ① Fluent validation Logic & communication

7 § View model or DTO validation with data annotations is very rudimentary § FluentValidation has been around for years in .NET land § Integrations into various .NET frameworks § Blazor forms validation can leverage FluentValidation § Nuget packages around, e.g. Blazored.FluentValidation § Share validation rules in a shared class library § 💪 Increased developer productivity in controlled environments Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Validation beyond simple data annotations

8 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten ② Code-first gRPC Logic & communication

9 § SPAs & APIs § Usually, SPAs talk to Web/HTTP/REST APIs § Often, RPC style § Many developers have control over both ends, frontend and APIs § Could use a stronger typing based on interfaces § gRPC offers RPC semantics with strongly-typed programming model § Code-first in C# with real interface sharing § Via protobuf-net.Grpc open-source project § gRPC-Web is needed to enable SPAs in the browser to talk to gRPC services § ASP.NET Core has it built-in via middleware § 💪 Increased developer productivity in controlled environments Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten gRPC – APIs beyond Web/HTTP/REST APIs

10 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten gRPC Service (MyCode) gRPC-Web Middleware (ASP.NET Core) Shared .NET Interfaces & DTOs (My Code) 1 Blazor WASM Client ASP.NET Core Server 1 0 1 1 0 1 1 0 gRPC-Web Client Factory (.NET Library) HTTP/2 Razor Component (My Code) Protocol Buffers

11 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Our journey today Logic & Communication Components Performance Code sharing Produc- tivity Isolation Interop Rendering Loading

12 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten ③ Isolated CSS & SASS Components

13 § In Blazor 3.2, CSS had to be global § Since .NET 5, Blazor components can have specific styles § “Namespaced” to the component § CSS supported out-of-the box § Custom CSS syntax and semantics for child component support § Styles will be merged at compile time and included in one file via tag § SASS support easy to implement with Nuget packages, e.g. LibSassBuilder or DartSassBuilder § 💪 More component-oriented code structure Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Component-specific styles

14 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten ④ Isolated JS High-Perf JS Interop Components

15 § Non-trivial Blazor projects still need interop with JavaScript code 🤷 § JavaScript interop supports JS modules since .NET 5 § No more putting JS code onto global window § JS modules can be imported via IJSRuntime § No more adding JS file references in index page § High performance IJSUnmarshalledObjectReference API with unmarshaled data access § 💪 More component-oriented code structure Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Component-specific interop code

16 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Our journey today Logic & Communication Components Performance Code sharing Produc- tivity Isolation Interop Rendering Loading

17 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten ⑤ Virtualization Performance

18 § 🗣 “My app is slow!!!” § “I want to download and display 1000s of rows in my data grid at once!” § A user can only view so many data rows, anyway § Paging is a well-known technique § Endless scrolling is another one § If you want to optimize rendering performance of list data, then you can use the component § Only the visible elements are in the DOM § Can be used with data all in memory – or fetch data dynamically § 💪 Better perceived performance for lists Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Optimizing amounts of data rendered

19 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten ⑥ Prerendering Performance

20 § Blazor WASM app bundle size is quite large § Primarily due to .NET assemblies being downloaded into the browser § Downloading it adds waiting time for the user § Will get even worse with AOT compilation § Server-side prerendering for Blazor WASM since .NET 5.0 § Prerendering significantly speeds app bootstrapping § Page is rendered on server and sent to client as static HTML § Turning on prerendering means testing the entire application for prerendering § Pages are “run” on the server first § But: Challenges when client-side security is involved § 💪 Better app-like loading experience Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Optimizing perceived app loading behavior

21 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Without prerendering

22 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten With prerendering

23 § Since .NET 6.0, we can specify state to be stored and be transferred § In prerendering, runtime executes calls on the server and client, by default § Safe unnecessary calls § ApplicationState provides methods for hydrating and de-hydrating § Note: Prerendering can only be used with hosted Blazor WASM apps Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Preserving state for prerendering

24 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Our journey today Logic & Communication Components Performance Code sharing Produc- tivity Isolation Interop Rendering Loading

25 Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Looking ahead: .NET 7.0 https://github.com/dotnet/aspnetcore/issues/39504

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

27 § Blazored.FluentValidation § https://github.com/Blazored/FluentValidation § Code-first gRPC § https://github.com/protobuf-net/protobuf-net.Grpc § LibSassBuilder § https://github.com/johan-v-r/LibSassBuilder Blazor WebAssembly in der Praxis 5(+) Dinge, die Sie kennen sollten Resources