Blazor WebAssembly in der Praxis: 5 Dinge, die Sie kennen sollten

SPAs mit .NET und C# bauen. Hört sich super an! Wie immer zählen nur die Real-World-Erfahrungen aus Projekten, um ein Framework besser zu verstehen. 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 kennenlernen: diese Session sollte sich für Sie lohnen!

Transcript

1. Blazor WebAssembly in der Praxis:
   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
   § 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
   christian.weyer@thinktecture.com @christianweyer https://www.thinktecture.com
   Blazor WebAssembly in der Praxis
   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 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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. 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<br/>§ SASS support easy to implement with Nuget packages, e.g.<br/>LibSassBuilder or DartSassBuilder<br/>§ 💪 More component-oriented code structure<br/>Blazor WebAssembly in der Praxis<br/>5(+) Dinge, die Sie kennen sollten<br/>Component-specific styles<br/>

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide