What is Blazor?

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.

Contents

• 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.

Image Source: Microsoft

Progressive Web Apps

A Progressive Web App is a website that has the characteristics of a native app. It is a symbiosis of a responsive website and an actual app.

Pros:

• Findable as an application from search engines
• Installable without the hurdles of an app store
• Linkable. You can share its URL to install it
• Network independent
• Simultaneous use as a website (web app) and as a installed app is possible

How it works

The web application runs in a headless browser, so to speak. This allows the PWA to use all features that available to a browser / web site.