Blazor WebAssembly Preview - Full-Stack C# Development for Web Applications

Microsoft has released the 3.2.0 Preview 1 of Blazor WebAssembly, which adds support for a SignalR client, simplified startup and improved download size.

Blazor is a framework for building web applications using C#, HTML and CSS. The C# code is used for both client and server functionality, meaning that duplicated business logic is no longer an issue. The C# code is compiling to run on WebAssembly. The framework uses .NET Standard 2.0 so you can include standard libraries from Microsoft or 3rd parties. Code running in WebAssembly is sandboxed so can't access APIs such as accessing the file system. The visual aspects of the UI are provided by Razor Components written using the Razor markup language. Third parties such as Telerik are already providing UI components for using with WebAssembly.

WebAssembly (WASM) is supported by most modern browsers such as Chrome, Edge, Firefox, and WebKit. It is also possible to run WebAssembly as a desktop application. There are even experimental projects to run WASM on microcontroller devices such as the ESP32 which will bring WASM to IoT devices as well as web applications.

Image source: .NET Conf 2019 presentations

To get started with Blazor development, you can install the .NET Core 3.1 SDK
Then run the following command to install the template pack.

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

Running the following produces a sample Blazor WebAssembly application.

dotnet new blazorwasm
dotnet build
dotnet run

The example has three pages with a simple static page, an interactive counter and a tabular example with weather data.

@page "/fetchdata"
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

The code should be clear to those who’ve used technologies such as ASP.Net Core. But note that this is a different technology to ASP.Net. This is reflected in the simplified startup found in Program.cs. The WebAssemblyHostBuilder no longer uses the startup class approach used by ASP.Net core.

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

Due to WebAssembly being compiled code it is already small compared to the equivalent JavaScript-based application.  The example three-page application compiles to just 7.7 kB. This preview version has introduced trimming of unused code by the .NET IL Linker which now removes 100 kB from transfers compared to previous versions. It does this by increasing the scope of the libraries that are trimmed to include the Blazor framework files as well as the Core files. As you can see from the waterfall diagram, the IL virtual machine for WebAssembly is based on Mono.

The last new feature is the SignalR client. This is not to be confused with the Blazor Server-based hosting which also uses SignalR for communication.

The SignalR client allows you to add real-time functionality to your WebAssembly application. It is ideal for providing up-to-date data for dashboards, chat or for collaborative applications. The client connects to a hub which can be provided by your server; this handles the dispatching of messages to the clients. Communication between client and hub can be either JSON or a binary format based on MessagePack which will produce smaller messages.

There is an example of a chat application using SignalR that can communicate with multiple clients. Note that the server project in this example does use a startup class as it is using ASP.Net Core to provide the SignalR hub.

The release version of Blazor WebAssembly is scheduled for general release in May of this year.

For more examples and resources for Blazor visit Awesome Blazor.