Dajbych.net


Blazor is .NET in a Web Browser. What Makes it Possible?

, 2 minutes to read

blazor logo

The most powerful, performant, and easy-to-use UI framework is HTML with CSS and JavaScript. DirectX has an extremely high development cost, and UWP is missing many features that are standard in CSS. The Achilles' heel of pure web development is JavaScript. When you use a higher-level language compiled to JavaScript, one question arises: is JavaScript an efficient intermediate language? The answer is no, and the result is a web bytecode called WebAssembly.

JavaScript is inefficient and slow. New features in ECMAScript 6 were so complex that compiler optimizations for ECMAScript 5 were not applicable. A complex language also needs a complex compiler, which consumes more computational power. This does not matter on PCs, but it matters on battery-powered devices. JavaScript is one of the most energy-consuming components in a web page. For example, downloading and interpreting JavaScript on a Wikipedia page takes about 30% of the total energy needed to download and render the whole page (source: Who Killed My Battery: Analyzing Mobile Browser Energy Consumption).

asm.js

One attempt to return JavaScript compiler optimizations was asm.js. It was a research project at Mozilla that aimed to define an optimizable, low-level subset of JavaScript. It was able to compile C++ code to JavaScript, which could run with near-native performance. Browsers detected optimized JavaScript code and used a specific compiler. JavaScript code was backward compatible with traditional compilers, so support from other browser vendors was not necessary.

WebAssembly

WebAssembly is an enhancement of asm.js. It essentially drops backward compatibility for higher performance. The browser executes binary code designed for fast parsing and startup. The language is not dynamic, so it unlocks many fast CPU instructions. WebAssembly has been designed jointly by all major browser vendors, so there is wide agreement on how to optimize it. On December 5, 2019, it became a W3C recommendation.

Blazor

Blazor is a .NET runtime able to run as WebAssembly. Unlike Silverlight, it is based on HTML5 and DOM instead of XAML with a custom rendering engine. So what essentials does it contain?

Blazor Compiler

The Blazor Compiler transforms .razor files to C# code, which can be compiled by a vanilla C# compiler. The main difference between processing .cshtml and .razor files is that the Blazor compiler builds a syntax tree that reflects the DOM. It parses HTML and thus requires well-formatted HTML.

Mono.net Runtime

One of the .NET runtimes is Mono, which was ported to WebAssembly. It interprets .NET assemblies. In the future, ahead-of-time compilation might be supported because it is used by Xamarin.iOS and UWP. The vanilla C# compiler will support it with .NET 5.


Blazor has the potential to supersede Windows Forms, WPF, UWP, and Xamarin Forms. It could be a major UI framework for all .NET applications. Well, almost – Console apps are immortal. The initial release of Blazor is scheduled for May 2020.