Slide 1

Slide 1 text

Blazor: The new WebAssembly framework Code & Create

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Razor components

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Blazor hosting models

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Demo

Slide 17

Slide 17 text

Conclusion

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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/

Slide 22

Slide 22 text

Lars Gyrup Brink Nielsen 🐦 @LayZeeDK

Slide 23

Slide 23 text

No content