Save 37% off PRO during our Black Friday Sale! »

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

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

4f349dbe1d48627445735f7e2c818c97?s=128

Lars Gyrup Brink Nielsen

August 13, 2021
Tweet

Transcript

  1. Blazor: The new WebAssembly framework Code & Create

  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
  3. Blazor in a nutshell • Dependency injection • Strongly typed

    • .NET ecosystem access • JavaScript interoperability • Depends on a Microsoft toolchain
  4. Getting started with the dotnet CLI • dotnet new blazorserver

    BlazorServerApp • dotnet new blazorwasm BlazorClientApp
  5. Razor components

  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
  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
  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
  9. Blazor hosting models

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

  17. Conclusion

  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
  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
  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
  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/
  22. Lars Gyrup Brink Nielsen 🐦 @LayZeeDK

  23. None