Slide 1

Slide 1 text

Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO

Slide 2

Slide 2 text

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 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Christian Weyer

Slide 3

Slide 3 text

3 § Blazor WebAssembly (WASM) is a browser SPA framework § For C# and .NET developers § .NET code runs on a CLR compiled to WASM (AOT will change this a bit) § Blazor WASM is still young § 13 months since official release § Still, lots of space for improvement § Blazor WASM in .NET 5.0 is “OK” § Significant steps from Blazor WASM 3.2 to 5.0 § More to come in NET 6.0+ Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Current state of Blazor

Slide 4

Slide 4 text

4 § Performance § Rendering § Loading § Components § Isolation § Interop § Logic & communication § Code sharing § Productivity Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Our trip today

Slide 5

Slide 5 text

5 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ① Virtualization Performance

Slide 6

Slide 6 text

6 § 🗣 “My app is slow!!!” § “And only because 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 in .NET 5 § Only the visible elements are in the DOM § Can be used with data all in memory – or fetch data dynamically Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Optimizing amounts of data rendered

Slide 7

Slide 7 text

7 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ② Prerendering Performance

Slide 8

Slide 8 text

8 § 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 § Might get even worse with AOT compilation in .NET 6.0 § .NET 5 offers server-side prerendering for Blazor WASM § 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 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Optimizing perceived app loading behavior

Slide 9

Slide 9 text

9 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Without prerendering https://jonhilton.net/blazor-wasm-prerendering/

Slide 10

Slide 10 text

10 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten With prerendering https://jonhilton.net/blazor-wasm-prerendering/

Slide 11

Slide 11 text

11 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ③ Isolated CSS & SASS Components

Slide 12

Slide 12 text

12 § In Blazor 3.2, CSS had to be global § No intrinsic component-specific styles § With .NET 5, Blazor components can be encapsulated, including styles § “Namespaced” to the component § CSS supported out-of-the box § 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 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Component-specific styles

Slide 13

Slide 13 text

13 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ④ Isolated JS Components

Slide 14

Slide 14 text

14 § Non-trivial Blazor projects still need interop with JavaScript code 🤷 § JavaScript interop supports JS modules in .NET 5 § No more putting JS code onto window § JS modules can be imported via IJSRuntime § No more adding JS file references in index page § Further helps for encapsulated components § High performance API with unmarshaled data access § Unofficial in .NET 5.0 § Planned to settle in .NET 6.0 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Component-specific interop code

Slide 15

Slide 15 text

15 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ⑤ Fluent validation Logic & communication

Slide 16

Slide 16 text

16 § 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 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Validation beyond simple data annotations

Slide 17

Slide 17 text

17 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ⑥ Code-first gRPC Logic & communication

Slide 18

Slide 18 text

18 § 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 coupling for increased productivity § 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 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten gRPC – APIs beyond Web/HTTP/REST APIs

Slide 19

Slide 19 text

19 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Looking ahead - .NET 6.0 https://github.com/dotnet/aspnetcore/issues/27883

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 § LiveSharp § https://www.livesharp.net/blazor/ § Code-first gRPC § https://github.com/protobuf-net/protobuf-net.Grpc § LibSassBuilder § https://github.com/johan-v-r/LibSassBuilder § Blazored.FluentValidation § https://github.com/Blazored/FluentValidation Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Resources