← Back to main site

‘Blazor’ is like a dream come true — .NET in browser is finally here…

March 27, 2018

Back in 2017 one day, while browsing YouTube, I stumbled across Steve Sanderson’s demo of ‘WebAssembly in your Browser’ at NDC Oslo. Steve showed a demo of a project he was working on at that time, which used DotNetAnywhere with WebAssembly to deliver C# code to be run right in the browser at client-end. As I was watching the video, I was awestruck by how amazingly easy it was to write beautiful code which could run natively in a browser that was not JavaScript.

On February 6, 2018, Microsoft ASP.NET team announced that they’re bringing in ‘Blazor’ as an experimental web UI project.

It is powered by a lightweight Mono framework implemented in WebAssembly to convert C# and HTML in native code that runs inside the browser. No plugins. No transpilation.

Today, most modern browsers such as Chrome, Firefox and Edge support WebAssembly. It works on older browsers too, by falling back on asm.js based .NET runtime. WebAssembly is such a big deal, because, up until now, if we had to create any client-side code, there was no option but JavaScript. Now, the possibilities are limitless — you can potentially code in C, C++, Ruby, Java, C# or any other language you are using to write server-side code.

Blazor is being developed as an open-source software and is hosted on GitHub. I wanted to try running this but there wasn’t a release yet. Finally, in the second week of March, I checked out the repo, installed the Visual Studio Preview 15.7 and latest .NET Core 2.1 Preview SDK and built the NuGet packages for myself. I installed the Visual Studio extension and my development environment was finally ready.

New ASP.NET Core Application Window with Blazor options

The built-in template comes with the example project with basic examples of a counter, routing by navigation bar, and a page which fetches the data from API endpoint using HttpClient.

Success! DLLs running in browsers…

Familiar Razor syntax is used to create Components which are represented by *.cshtml files. These are an amalgamation of C# and HTML code. In this way, I found Blazor to be very similar to Angular and React. It feels very straight-forward and easy to learn. e.g. Counter.cshtml contains C# code (everything with @ ) intermingled with plain-old HTML —

@page "/counter"

<h1>Counter</h1>

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

<button @onclick(IncrementCount)>Click me</button>

@functions {
int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }

}

The route is defined at the top of the page by @page. The block @functions contains the properties and methods for the component. Think of this like a code-behind in WPF or WinForms. Blazor team noted that soon, writing the code-behind in a separate file will be possible. The variable currentCount is bound to DOM in the <p> block. Whenever the value changes, it reflects in the DOM. Finally, we have an example of an event @onClick() directed to a method.

I played around and could create a To Do List app in a short amount of time. I discovered @bind directive that is used to bind the data with elements like this —

<input
  type="text"
  placeholder="New Task"
  class="form-control"
  id="addTask"
  @bind(newToDo.Title)
/>

Normal C# syntax works as expected.

<button
    class="btn btn-primary"
    @onclick( async () => await AddTask())
>
    Add
</button>

End result was nothing fancy, a simple To Do app, but perfect to play with and understand the new framework -

To Do App

Live reloading is not yet supported, which meant closing and rebuilding the app to see the changes, but this is planned and being worked on in the 0.2 milestone.

Overall, I was very impressed with the prerelease code in the dev branch, as many things like layouts and dependency injection worked out of the box. Still the framework is in it’s infancy and not yet ready.

On March 22, ASP.NET team released Blazor 0.1 on Visual Studio Marketplace. They are encouraging community feedback and support. I think they have done a wonderful work, and wishes them all the best for the future releases.

Here is a link to the Getting Started guide, and to the GitHub repo, if you are interested to try Blazor.


{author}

Written by
Vibhav Churi