Intro to
Blazor
What is Blazor?
Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.
How Does it Work?
Blazor runs your client-side C# code directly in the browser using WebAssembly. Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.
What's WebAssembly?
WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.
That Doesn't Explain How .NET Compiles to WASM...
Currently, Blazor uses the Mono project has introduced a new tool, mono-wasm. It takes C# assemblies as input and generates LLVM bitcode for use with the LLVM WebAssembly backend.
Since the LLVM linker recently added support for WebAssembly, mono-wasm supports incremental compilation. This greatly reduces compilation times as code that doesn't change (mscorlib.dll, Mono runtime, etc.) does not need to be recompiled while developing your application.
Getting Into
the Nitty Gritty
Flavors!
Client-Side
Server-Side
Hosted
*Component Library
Also the part of the presentation that I ran out of time to get background-less images
Client-Side
Blazor client-side is a single-page app framework for building interactive client-side web apps with .NET. Blazor client-side uses open web standards without plugins or code transpilation and works in all modern web browsers, including mobile browsers.
Server-Side
Blazor decouples component rendering logic from how UI updates are applied. Blazor server-side provides support for hosting Razor components on the server in an ASP.NET Core app. UI updates are handled over a SignalR connection.
(Full Stack)
Creates 3 projects:
- Client
- Shared
- Server
* Share models between Client and Server
Hosted
Directives
@page: Used for routing - specifies the path
@using: Imports/Aliases types defined in other namespaces
@inherits: Inherits methods/properties from the component's base class
@injects: Injects a dependency (DI)
@code: Component logic
Attributes
[Parameter]: Makes a property available as an attribute in the component tag
[Inject]: Injects a dependency (DI)
(Data Annotations)
Drawbacks / Caveats
- Still in preview (plenty of kinks to work out)
- Large file size (Should be fixed soon, if not already)
- Limited debugging functionality
- No hot reload
- CORS is a bit tricky for Client-Side
- dotnet watch run seems to have issues as well
Resources