Real-World Blazor WebAssembly : 5(+) Dinge, die Sie kennen sollten

In diesen 60 Minuten spricht Christian Weyer über fünf Erkenntnisse aus dem praktischen Einsatz von Blazor WebAssembly - mit Demos, live und in Farbe. Auch wenn für Sie vielleicht nur ein einziges "Ding" dabei ist, das sie neu lernen: diese Session sollte sich dennoch lohnen ;-)

Transcript

1. Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Christian Weyer https://thinktecture.com/christian-weyer @christianweyer Co-Founder & CTO
2. 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
3. 3 § Blazor WASM 3.2 in .NET Core 3.1 is OK-ish… § A typical “v1” § Lots of people were waiting for .NET 5 § Various things in this talk are about .NET 5 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Blazor WASM is still young…
4. 4 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ⓪ Live reload
5. 5 § Blazor WASM still shallow on developer tooling § Debugging improvements in .NET 5 § Still no fully-fledged debugger, both in browsers, and in VS § Basic reload support in .NET 5 and VS 2019 16.8 § Full live reload currently with external tools, like LiveSharp § Uses external dev server instance via command line § Commercial tool Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten SPA developer tooling
6. 6 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ① Code-first gRPC
7. 7 § SPAs & APIs § Usually, SPAs talk to Web/HTTP/REST APIs § 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 § gRPC-Web is needed to enable SPAs in the browser to talk to gRPC services § ASP.NET Core has it built-in via middleware § Blazor WASM can use C# and code sharing to invoke gRPC services strongly-typed § Increased developer productivity Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten gRPC – APIs beyond Web/HTTP/REST APIs
8. 8 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ② Prerendering .NET 5
9. 9 § 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 § .NET 5 offers server-side prerendering for Blazor WASM § Prerendering significantly speeds app bootstrap § 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 § Challenge when client-side security is involved Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Optimizing perceived app loading behavior
10. 10 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Without prerendering https://jonhilton.net/blazor-wasm-prerendering/
11. 11 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten With prerendering https://jonhilton.net/blazor-wasm-prerendering/
12. 12 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ③ Virtualization .NET 5
13. 13 § “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 <Virtualize> 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
14. 14 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ④ Isolated CSS & SASS .NET 5
15. 15 § In Blazor 3.2, CSS had to be global § No intrinsic component-specific styles § With .NET 5, Blazor components can be completely 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 <style> 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
16. 16 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ⑤ Isolated JS .NET 5
17. 17 § 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 completely encapsulated components Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Component-specific interop code
18. 18 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten ⑥ Fluent validation
19. 19 § 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
20. 20 Real-World Blazor WebAssembly 5(+) Dinge, die Sie kennen sollten Looking ahead - .NET 6 https://github.com/dotnet/aspnetcore/issues/27883
21. 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
22. 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 https://github.com/thinktecture/blazor-webassembly-demo Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://thinktecture.com/de/newsletter