Blazor - The new WebAssembly framework

Brief introduction to Blazor discussing:
- Razor components
- The 2 Blazor hosting models:
- Blazor WebAssembly
- Blazor Server
- Their trade-offs
- The trade-offs of Blazor vs. JavaScript frameworks

Presented at:
- Orbis Connects Code & Create, August 2021 https://www.crowdcast.io/e/code-and-create-blazor

Friday the 13th demo Blazor app:
https://github.com/LayZeeDK/blazor-friday-the-13th

Transcript

1. Blazor: The new
   WebAssembly framework
   Code & Create
   

   View Slide

2. Blazor in a nutshell
   • The brainchild of Steve Sanderson from Microsoft & Knockout.js
   • Build web apps using C# (.NET) instead of JavaScript
   • A Blazor app’s UI consists of Razor components
   • Two hosting models:
   • Blazor WebAssembly
   • Blazor Server
   

   View Slide

3. Blazor in a nutshell
   • Dependency injection
   • Strongly typed
   • .NET ecosystem access
   • JavaScript interoperability
   • Depends on a Microsoft toolchain
   

   View Slide

4. Getting started with the dotnet CLI
   • dotnet new blazorserver BlazorServerApp
   • dotnet new blazorwasm BlazorClientApp
   

   View Slide

5. Razor components
   

   View Slide

6. Single-file Razor component
   • Template and business logic in same file
   • Partial component class is implicit through
   Razor directives and @code blocks
   Business logic
   Template
   Razor directives
   MyComponent.razor
   Razor component
   Blazor attributes
   Blazor lifecycle hooks
   

   View Slide

7. Business logic
   Template
   Razor directives
   MyComponent.razor
   Component styles
   MyComponent.razor.css
   Styled Razor component
   • Styles are isolated to this component,
   emulating web components’ Shadow DOM
   Razor component
   Blazor attributes
   Blazor lifecycle hooks
   

   View Slide

8. Template
   MyComponent.razor
   Business logic
   MyComponent.razor.cs
   Code-behind Razor component
   • Partial component class is explicit through
   code-behind
   Razor component
   Blazor attributes
   Blazor lifecycle hooks
   

   View Slide

9. Blazor hosting models
   

   View Slide

10. Blazor WebAssembly .NET IL
    • Added in .NET Core 3.2
    • Static files, meaning no server dependencies
    • Blazor app bundled as DLLs (depending on OS)
    • DLLs interpreted in browser by .NET
    WebAssembly runtime
    • DOM managed by Blazor JavaScript framework
    Blazor framework
    (JavaScript)
    .NET packages (DLLs)
    Mono .NET runtime
    (WebAssembly)
    Blazor app
    Browser
    JavaScript
    JavaScript modules
    Browser APIs
    DOM
    

    View Slide

11. Blazor WebAssembly AOT
    • Added in .NET 6
    • Static files, meaning no server dependencies
    • Blazor app bundled as WebAssembly binaries
    • WebAssembly binaries executed by browser
    • DOM managed by Blazor JavaScript framework
    WebAssembly binaries
    Blazor app
    Browser
    JavaScript
    JavaScript modules
    Browser APIs
    DOM
    Blazor framework
    (JavaScript)
    

    View Slide

12. WebAssembly vs. JavaScript
    performance
    • A compressed WebAssembly binary is smaller than the
    equivalent compressed JavaScript
    • WebAssembly decoding is faster than JavaScript parsing
    • WebAssembly JIT compilation is faster than JavaScript JIT
    compilation
    • WebAssembly requires no additional optimization cycles
    • WebAssembly execution is 10%-800% faster than JavaScript
    • WebAssembly uses no garbage collection (yet)
    

    View Slide

13. Razor components
    Blazor app
    Server
    Blazor Server
    • Added in .NET Core 3.0
    • Blazor components are rendered on the server
    • User interactions are sent to Blazor server
    through SignalR (web socket)
    • DOM differences are sent to the Blazor runtime
    through SignalR (web socket)
    • DOM managed by Blazor JavaScript framework
    Blazor framework
    (JavaScript)
    SignalR (JavaScript)
    Blazor runtime
    Browser
    JavaScript
    JavaScript modules
    Browser APIs
    DOM
    Blazor server
    Blazor framework
    (.NET)
    ASP.NET Core
    SignalR (.NET)
    .NET packages (DLLs)
    

    View Slide

14. Blazor WebAssembly summary
    Pros:
    • Supports any server
    • No server roundtrip for UI updates
    • WebAssembly is smaller and faster than JavaScript
    • Code-sharing between SPA and web API
    Cons:
    • Requires WebAssembly support
    • .NET packages were not meant for the browser, size-wise
    

    View Slide

15. Blazor Server summary
    Pros:
    • Blazor app has direct access to I/O
    • Bundle size is medium-sized and independent of Blazor app size
    • No code-sharing between client and server necessary
    Cons:
    • Requires ASP.NET Core + SignalR
    • A server roundtrip is required for every UI update
    

    View Slide

16. Demo
    

    View Slide

17. Conclusion
    

    View Slide

18. Blazor benefits
    • Part of ASP.NET Core
    • .NET ecosystem access
    • Use .NET languages everywhere
    • Seamless full-stack apps using Blazor Server
    • Hybrid apps using Blazor WebAssembly web views embedded in
    a .NET MAUI native shell
    • Android, iOS, Linux, macOS, Windows
    

    View Slide

19. Blazor downsides
    • Bundle sizes are bigger than JavaScript framework equivalents
    • Opting out of part of the web ecosystem
    • Barely any web components support
    • No Storybook support
    • No support for JavaScript toolchains
    • It’s still a web app so we still need frontend experts, only now
    with .NET and Blazor expertise
    

    View Slide

20. Fundamentals resources
    • Microsoft Learn: Build a web app with Blazor
    https://docs.microsoft.com/en-us/learn/modules/build-blazor-
    webassembly-visual-studio-code/
    • ASP.NET Core 101: Blazor
    https://www.youtube.com/watch?v=R23v4lgHYQI&list=PLdo4fO
    cmZ0oW8nviYduHq7bmKode-p8Wy&index=10
    

    View Slide

21. Intermediate resources
    • Blazing Pizza workshop
    https://github.com/dotnet-presentations/blazor-workshop
    • Microsoft Learn: Publish a Blazor WebAssembly app and .NET
    API with Azure Static Web Apps
    https://docs.microsoft.com/en-us/learn/modules/publish-app-
    service-static-web-app-api-dotnet/
    

    View Slide

22. Lars Gyrup Brink Nielsen
    🐦 @LayZeeDK
    

    View Slide

23. View Slide