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