What is Blazor?

#csharp #dotnet #blazor #webassembly

Blazor is a Framework to create client-side interactive Web-UIs with .NET.

Pros:

Interactive UIs with C# instead of JavaScript
.NET App-Logic for Server and Client
Browser-Compatibility (incl. Mobile)

In this article I want to give you a quick overview of the Blazor technology of .NET.

Razor-Markup
Blazor WebAssembly
Blazor Server
Progressive Web Apps

Razor-Markup

Blazor apps are based on Components like pages, forms, etc. that can be nested and re-used in multiple places.

These components can be written in Razor-Markup, which is a combination of HTML and C#-Code.

<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {

    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("'Yes' button was clicked.");
    }

}

Blazor WebAssembly

Blazor WebAssembly is a Single-Page-App-Framework to create client-side interactive Web-UIs with .NET.

it uses open web standards
allows the execution of .NET code in the browser
the .NET code is executed in the JavaScript-Sandbox of the browser
the sandbox protects against malicious actions on the client computer

How it works

C# and Razor-Markup files are compiled into .NET assemblies. The assemblies and the .NET-Runtime are downloaded by the browser and the Blazor WebAssembly starts the .NET-Runtime and configures it to load the assemblies. After that DOM changes and API calls in the browser will be managed by the Blazor WebAssembly-Runtime from the JavaScript-Interop.

Image Source: Microsoft

Blazor Server

Blazor decouples component rendering from UI updates, which brings support for hosting Razor components in an ASP.NET Core app on the server. UI updates are than triggered over a SignalR connection.