Blazor, WebAssembly, and the Future of the Browser

As a .NET Developer, I have always wanted to have the ability to write C# on the client-side. Now, with the addition of Blazor to Microsoft’s ever-growing tech-stack, I can do just that.

What exactly is Blazor?

Blazor is an HTML framework in the same vein as Angular, React, and Vue. It’s used for rendering .NET on the client side and runs under WebAssembly. It offers all the benefits of a modern front-end framework while working entirely in C#.

Benefits of Using Blazor

• Runs in a memory safe sandboxed environment and nearly faster as native applications.
• All the necessary SPA features are supported by Blazor such as components, routing, dependency injection for an up to date developer experience.
• Blazor applications can be deployed on machines having no .NET, just as static files.
• Rich IntelliSense and tooling for lesser development time.
• Supported by all mainstream browsers(Chrome, Edge, Firefox, Opera, Safari) including the ability to run on older (non-WebAssembly) ones via asm.js.

Why Does WebAssembly Matter?

You can easily compile C/C++/C# or many other back-end languages into WebAssembly. WebAssembly code allows access to the full functionality of the browser via JavaScript interop. Since it’s a compact bytecode format, it’s optimized for minimum download sizes and maximum execution speed making it much faster and more efficient. WebAssembly has support from all mainstream browsers, including mobile devices. At the same time, WebAssembly code runs in the same trusted sandbox as JavaScript to prevent malicious actions on the client machine. Additionally, WebAssembly lets you choose your desired coding language and runs in a sandboxed environment separate from the host runtime.

The one drawback of WebAssembly is that it loads and gets compiled using JavaScript, which means you’re still tied up working with JavaScript. JavaScript is there to bootstrap WebAssembly, but it doesn’t stop there. Accessing platform APIs require JavaScript it as well.

Blazor Templates

Let’s take a look at some of what the Blazor templates have to offer. To start, install the following:

• .NET Core 2.1 SDK (2.1.500 or later).
• Visual Studio 2017 (15.9 or later) with the ASP.NET and web development workload selected.
• The latest Blazor Language Services extension from the Visual Studio Marketplace.
• The Blazor templates on the command-line:
  dotnet new -i Microsoft.AspNetCore.Blazor.Templates

In our Pages/Index.cshtml, the Blazor client-side router uses route parameters to populate the corresponding component parameters with the same name.

The @page directive in the first line represents the routing and is mapped to the home index root. Then the next 2 lines are just normal HTML markups. The last line may look different from what you’re used to seeing. This is called a component in Blazor. Note that the component name is the same as the component page name.

Moving on, to our Shared/SurveryPromt.cshtml

The Blazor function at the end of the component makes it possible to pass a value from the parent, Index page in this case to the component with the help of [Parameter] annotation.

Also like we said Blazor supports dependency injection as demonstrated in our Pages/FetchData.cshtml working with http requests you can inject HttpClient into a certain page for handling requests.

Final Thoughts

Blazor’s learning curve is smooth and easy. It has all the must-have features of a modern day SPA-Framework at your disposal while still keeping things simple. Regardless, Blazor is still in its alpha stage so it’s expected that some of the features are either lacking functionality or are in development.

While Blazor and WebAssembly don’t have the ability to directly access the Browser’s DOM API the JavaScript interop provides a means of filling the gap. The interop makes it possible to migrate existing JavaScript libraries to Blazor.

As Blazor gains in popularity, it’s reasonable to assume that an ecosystem of interop libraries will emerge. As more interop libraries become available, Blazor developers will likely spend less time writing JavaScript and more time in C#.

Further Reading:

• https://blazor.net/docs/index.html
• http://blog.stevensanderson.com/

Image Source: Christopher Gower on Unsplash