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
   

   View Slide

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
   

   View Slide

3. 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
   

   View Slide

4. 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
   

   View Slide

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

   View Slide

6. 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
   

   View Slide

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

   View Slide

8. 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
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 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<br/>§ SASS support easy to implement with Nuget packages, e.g.<br/>LibSassBuilder<br/>Real-World Blazor WebAssembly<br/>5(+) Dinge, die Sie kennen sollten<br/>Component-specific styles<br/>

    View Slide

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

    View Slide

14. 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
    

    View Slide

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

    View Slide

16. 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
    

    View Slide

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

    View Slide

18. 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
    

    View Slide

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

    View Slide

20. 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
    

    View Slide

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
    

    View Slide