We need to talk about Blazor

Blazor is a .NET based web application technology that allows you to build interactive applications leveraging C#, Razor, and HTML. The web app builder, Blazor, compiles to WebAssembly known as Wasm for short. This enables the new emerging technology to run in any modern web browser with great performance.

.NET in WebAssembly

WebAssembly is a binary instruction format for a stack-based virtual machine. Many languages like c#, Go and Rust can compile to Wasm meaning these languages can be used to develop within browsers. As a byte code format, there is no need for script parsing or pre-compile for optimization. The code is directly translated to native code improving performance at load and startup time compared to JavaScript. WebAssembly is not restricted to the JavaScript language because it implements its own instruction set. This means there is no need for JavaScript or Typescript.

The ability to compile the .NET Framework in Wasm gives us a whole new world of possibilities. Using Blazor we have the power of the .NET runtime and standard .NET libraries to our advantage within a browser, everything behaves exactly like .NET on the desktop or server.

Blazor VS … everything else

This new framework has much going for it with a lot of positive characteristics and piqued interest from the .NET community. It directly cuts the complexity of a multi-stack codebase, removing the need for third-party Frameworks like Angular, React and the millions of Javascript libraries that can be overwhelming, in complexity and learning, on our way to meeting requirements. With Blazor everything is unit-testable, strongly typed, conceptual modeling is easier and it comes in C#.

Server-Side vs Client-Side

Blazor comes in two main flavors, Server-Side and Client-Side. Server-side serves your single page application to the browser using Signal R. This approach gives us the full advantage of server-side execution, decreases initial download time and supports thin clients, meaning it will work on browsers that do not support web assembly or has resource constraints. The app and its components are not served to the client.

Personally, for me, the exciting part about Blazor is the ability to run the single page application client-side. The application is able to run independently on a clients device or browser with no dependency to the server. Because of the disadvantages associated with client-side architecture like downloading the .NET runtime including your application (compiled to Wasm) to the client, I would not recommend using this approach for general browser-based applications. However, the utilization of the Client-Side approach has just become very interesting from a mobile perspective.

Using both approaches we can share standard .NET libraries between two shell projects( server and client). We could develop a single login component or any other UI or backend component and reuse it in both server-side and client-side shell applications. Modularity is a great advantage when using Blazor.

Introducing BlazorMobile

As described on the GitHub page BlazorMobile – is a set of Nuget packages & project templates for embedding a Blazor web application as a standalone mobile application, hosted in Xamarin with native communication support.

The Client-Side shell compiles to a zip file and is then embedded within a Xamarin application at compile time. To use native functionality, a proxy interface can be added to a shared project between Blazor and Xamarin. The concrete implementation of the proxy interface is placed in a shared Xamarin project, available to the iOS, Android, UWP & Desktop shell projects. From the Blazor implementation the proxy interface is injected and called when required.

Final words

Blazor started as an experimental project by Microsoft software engineer Steve Sanderson and was quickly adopted into the .Net echo system, Blazor was officially released in .NET core 3.0. Sanderson says that Blazor is inspired by JavaScript frameworks such as React, Vue, and Angular but mashed up with technologies familiar to an ASP.NET programmer

I think a question on everyone’s minds is, will Blazor replace Frameworks like React, Vue, and Angular? In my opinion, this new exciting technology is definitely going to be a strong competitor with its ability to increase development speed and modularity. Building single-page applications with Blazor is surprisingly simple with a straight forward approach. There are no surprises or unexpected behavior, leaving us with a seamless development experience.

References

• https://www.infoq.com/news/2018/02/blazor-webassembly-microsoft/
• https://www.grapecity.com/blogs/web-assembly-and-dotnet
• https://chrissainty.com/what-is-blazor-and-why-is-it-so-exciting/
• https://steffenjorgensen.com/post/2019/05/20/Is-Blazor-the-new-Angular-killer.aspx
• https://www.infoq.com/articles/webassembly-blazor/
• https://blog.stevensanderson.com/2017/11/05/blazor-on-mono/
• https://blog.jeremylikness.com/blog/2019-01-03_from-angular-to-blazor-the-health-app/
• https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.0
• https://github.com/Daddoon/BlazorMobile