Blazor WebAssembly: Neues in .NET 5

Ähnlich wie bei Angular und React wird auch bei Blazor ständig an der Plattform weiter gearbeitet. Vor allem bei Blazor WebAssembly als relativer Framework-Neuling sind die Verbesserungen und Neuerungen des ASP.NET-Teams bei Microsoft von Interesse. In diesem Webinar zeigt Christian Weyer auf gewohnt pragmatische Art was alles neu ist im .NET-5-Release und wie diese Features einzuordnen sind.

Transcript

1. Blazor WebAssembly: Neues in .NET 5 Sanfte Evolution 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 Blazor WebAssembly Neues in .NET 5 Christian Weyer
3. 3 Blazor WebAssembly Neues in .NET 5 Introduction to Blazor WebAssembly https://www.thinktecture.com/de/blazor/webinar-aspnet-blazor-webassembly/
4. 4 § Migration § Developer Tooling § Runtime Performance § Component Enhancements § (something new for you &) Q&A Blazor WebAssembly Neues in .NET 5 Talking Points
5. 5 § Blazor WASM 3.2 in .NET Core 3.1 is OK-ish… § A typical “v1” § Ongoing improvements with interim releases § Lots of people were waiting for .NET 5 § Blazor in .NET 5 is more of an evolution § https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore- 5.0?view=aspnetcore-5.0#blazor § More ongoing improvements with interim releases § Blazor WASM evolution process feels like Angular 2+ Blazor WebAssembly Neues in .NET 5 Blazor WASM is still young
6. 6 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 Neues in .NET 5 Overview of new features in .NET 5 ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅
7. 7 Blazor WebAssembly Neues in .NET 5 Migration
8. 8 § Compatibility: Few breaking changes § Changes to .csproj file § Update SDK from Microsoft.NET.Sdk.Web to Microsoft.NET.Sdk.BlazorWebAssembly § Set TargetFramework to net5.0 <PropertyGroup> <TargetFramework>net5.0</TargetFramework> </PropertyGroup> § If present: remove package reference to Microsoft.AspNetCore.Components.WebAssembly.Build § Update Nuget references to 5.0.0 § Clean & rebuild § Changes to app § index.html: App element is a div now <div id="app">Loading...</div> § Startup.cs: builder.RootComponents.Add<App>("#app"); Blazor WebAssembly Neues in .NET 5 Moving from .NET Core 3.1 to .NET 5
9. 9 Blazor WebAssembly Neues in .NET 5 Developer Tooling
10. 10 § Blazor WASM still shallow on developer tooling § Debugging improvements in .NET 5 § Still no fully-fledged debugger, both in browsers, and in VS § Browser compatibility analyzer § Warns developer when app uses unsupported APIs § 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 Blazor WebAssembly Neues in .NET 5 SPA developer tooling
11. 11 § Blazor WASM performs IL trimming to reduce size of published output § Trimming may have detrimental effects § Apps using reflection or similar dynamic features may break § Options can be configured § Trimming for Blazor WASM apps is enabled by default § Trimming can be disabled by setting the PublishTrimmed MSBuild property to false in the .csproj file Blazor WebAssembly Neues in .NET 5 App trimming: Make .NET deployments smaller
12. 12 Blazor WebAssembly Neues in .NET 5 Runtime Performance
13. 13 § Blazor WASM still uses a .NET IL interpreter § Internal optimizations in UI rendering and JSON handling § Optimization in the .NET IL interpreter § Optimizations in core framework libraries § String comparisons, dictionary lookups, JSON (de-)serialization § Optimizations in the rendering process § Depending on the scenario, Blazor WASM in .NET 5 is 2-3x faster § Performance test suite is available on Github Blazor WebAssembly Neues in .NET 5 Internal improvements for better runtime performance
14. 14 § Blazor WASM app bundle size is quite large § .NET assemblies being downloaded into the browser § Downloading adds waiting time for the user § .NET 5 offers server-side prerendering for Blazor WASM § Prerendering significantly speeds up 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 “executed” on the server first § Challenge when client-side security is involved Blazor WebAssembly Neues in .NET 5 Prerendering: Optimizing perceived app loading behavior
15. 15 Blazor WebAssembly Neues in .NET 5 Without prerendering https://jonhilton.net/blazor-wasm-prerendering/
16. 16 Blazor WebAssembly Neues in .NET 5 With prerendering https://jonhilton.net/blazor-wasm-prerendering/
17. 17 § “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 Blazor WebAssembly Neues in .NET 5 Virtualization: Optimizing amounts of data rendered
18. 18 Blazor WebAssembly Neues in .NET 5 Component Enhancements
19. 19 § In Blazor 3.2, CSS had to be global § One big app.css § No intrinsic component-specific styles easily possible § 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 Blazor WebAssembly Neues in .NET 5 Isolated CSS & SASS: Component-specific styles
20. 20 § Non-trivial Blazor projects still need interop with JavaScript code § Using browser web APIs § Using 3rd party libraries § 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 Blazor WebAssembly Neues in .NET 5 Isolated JS: Component-specific interop code
21. 21 § When building modules - e.g. with RCLs - we want to be able to load them only when we need them § Upon routing or via call via an API § Blazor WASM in .NET 5 has simple ability to load assemblies/DLLs based on routes § Not really suited for full modularization § An entry point needed to execute startup code is not supported § Need to get rid of DI in your code § Real lazy loading available via open-source project blazor-lazy-loading § Not yet ported to .NET 5 Blazor WebAssembly Neues in .NET 5 Lazy loading: Delay loading of application parts/modules
22. 22 Blazor WebAssembly Neues in .NET 5 The Road Ahead
23. 23 Blazor WebAssembly Neues in .NET 5 Looking ahead: .NET 6 https://github.com/dotnet/aspnetcore/issues/27883
24. Danke! Bei Fragen kontaktiert mich gerne Christian Weyer https://thinktecture.com/christian-weyer @christianweyer christian.weyer@thinktecture.com Demos: https://github.com/thinktecture/blazor-wasm-things-to-know Artikel zu Blazor, PWA, Web Components, Angular, .NET Core & mehr: https://thinktecture.com/de/newsletter
25. 25 § Breaking changes in .NET 5 § https://docs.microsoft.com/en-us/dotnet/core/compatibility/5.0 § Update Blazor WASM project from .NET Core 3.1 to .NET 5 § https://docs.microsoft.com/en-us/aspnet/core/migration/31-to-50?view=aspnetcore- 5.0&tabs=visual-studio#update-blazor-webassembly-projects § Blazor WASM performance test suite § https://github.com/dotnet/aspnetcore/tree/master/src/Components/benchmarkapps/Wasm.Perfor mance/TestApp § LiveSharp § https://www.livesharp.net/blazor/ § https://twitter.com/christianweyer/status/1336636250464395264 § Lazy loading modules § https://github.com/isc30/blazor-lazy-loading § LibSassBuilder § https://github.com/johan-v-r/LibSassBuilder Blazor WebAssembly Neues in .NET 5 Resources