A Guide to Blazor WebAssembly: C# in the Browser

For decades, JavaScript has been the undisputed king of client-side web development. If you wanted to build an interactive web UI, you had to use JavaScript (or a language that transpiles to it, like TypeScript). But what if you could write your client-side logic in C#? This is the promise of Blazor WebAssembly.

Blazor is a free and open-source web framework that enables developers to build web apps using C# and HTML. It offers two hosting models, but the one that has generated the most excitement is Blazor WebAssembly.

What is WebAssembly?

Before we can understand Blazor, we need to understand WebAssembly (Wasm). WebAssembly is an open standard that defines a binary instruction format for a stack-based virtual machine. In simple terms, it's a low-level assembly-like language that can be run in modern web browsers.

This means that you can compile code written in languages like C, C++, and Rust into WebAssembly and run it in the browser at near-native speed. It's not a replacement for JavaScript, but rather a complement to it, designed for performance-critical code.

How Blazor WebAssembly Works

Blazor WebAssembly uses this technology to run .NET code directly in the browser. Here's what happens:

1. You write your application's UI and logic in C# using the Blazor component model (which is based on Razor).
2. When you build your application, it's compiled into .NET assemblies.
3. When a user navigates to your application, the browser downloads the .NET runtime (a version specifically compiled to WebAssembly), your application's assemblies, and any other dependencies.
4. The Blazor WebAssembly runtime then executes your .NET code directly in the browser's WebAssembly sandbox.

This means you have a full .NET runtime running inside the browser, allowing you to write rich, interactive, client-side applications in C#.

Blazor Server vs. Blazor WebAssembly

Blazor offers another hosting model called Blazor Server. It's important to understand the difference.

• Blazor Server: In this model, your application runs on the server. The UI is rendered on the server, and any interactions (like button clicks) are sent to the server over a real-time SignalR connection. The server processes the event, calculates the UI changes, and sends the diff back to the client to be applied to the DOM.

• Blazor WebAssembly: In this model, your application runs entirely on the client inside the browser. After the initial download, there is no need for a constant connection to the server (unless you are making API calls).

Comparison:

Feature	Blazor Server	Blazor WebAssembly
Runtime Location	Server	Client (Browser)
Connection	Requires a constant, low-latency SignalR connection.	Works offline after initial download.
Payload Size	Very small initial payload.	Larger initial payload (runtime + app assemblies).
Processing	Offloaded to the server.	Uses the client's CPU and memory.
Best For	Internal line-of-business apps, thin clients.	Public-facing apps, Progressive Web Apps (PWAs).

Building Your First Blazor Component

Building components in Blazor is simple. A component is a .razor file that contains a mix of HTML markup and C# code.

Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

This simple component defines a button that, when clicked, calls the IncrementCount C# method. The UI automatically updates to reflect the new value of currentCount. This all happens in the browser without any server communication.

The Future of .NET Web Development

Blazor WebAssembly represents a fundamental shift in web development for the .NET ecosystem. It allows C# developers to leverage their existing skills to build modern, client-side web applications without having to write JavaScript. It enables code sharing between the client and the server, as you can use the same .NET libraries and models on both sides.

While it won't replace JavaScript, it provides a powerful and compelling new option for building rich, interactive web experiences with .NET.