Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Blazor - The new WebAssembly framework

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

Lars Gyrup Brink Nielsen

August 13, 2021
Tweet

More Decks by Lars Gyrup Brink Nielsen

Other Decks in Programming

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