Page 56 - MSDN Magazine, September 2018

Cutting EdgE DINO ESPOSITO Never Mind JavaScript, Here’s Blazor
About a decade ago the mainstream Web stopped at a crossroad. Traditionally interpreted, client-side technologies such as HTML, CSS and JavaScript were about to disappear, progressively overwhelmed by compiled technologies and languages such as XAML and C#. At the same time, the browser environment seemed poised to incorpo- rate a native, dedicated processing engine like Silverlight, which had been installed as a separate plug-in. Then the first drafts of HTML 5 appeared at the horizon and, shortly thereafter, Silverlight was sunsetted.
The turn of events shook up the landscape as IT decision makers sought a viable platform for cross-platform Web development. HTML5 received a boost and JavaScript began its comeback. Today, Angular, React and Vue are highly popular JavaScript-based frameworks that more and more development teams are choosing for building their front ends.
Blazor relies extensively on work done by Xamarin to bring its Mono framework to WASM.
Blazor comes up as a possible alternative to Angular/React/Vue and, thanks to WebAssembly (WASM), it opens up the Web to be able to take advantage of existing development ecosystems, including .NET. Therefore, more than just another Model-View-ViewModel (MVVM)-oriented JavaScript framework, Blazor is, to some extent, a modern attempt to revamp and refine
The code presented in this article is based on version 0.5.0 released in July 2018.
In this article, I’ll discuss the underlying system architecture of a Blazor application and present a minimal “Hello World” application.
The Magic of Blazor
If you’re coming from a Silverlight background, you might wonder how Blazor—a non JavaScript platform—can run in the browser without an installable plug-in. The answer is that, well, it can’t. Blazor actually requires some sort of plug-in to host it within a compliant browser. The trick is that the so-called conceptual plug-in is already embedded in most modern browsers (those released in the past 12 months), and can be easily polyfilled via JavaScript in older browsers. Unlike discreet plug-ins like Adobe Flash or Silverlight, the tool enabling Blazor support is WASM, an open standard being developed in a W3C Community Group that includes representatives from all major browsers.
Technically, WASM is a binary format for a stack-based virtual machine (VM), architecturally similar to the .NET CLR and Java Virtual Machine, but unlike the Android Dalvik VM. As the com- pilation target of high-level programming languages, WASM has the potential to enable deployment of .NET applications over the Web. For this to happen, however, a bridge is needed to convert the .NET runtime to WASM. Blazor relies extensively on work done by Xamarin to bring its Mono framework to WASM. The .NET code contained in a Blazor application runs against a version of Mono specifically compiled to WASM, as shown in Figure 1.
the Silverlight concept—bringing the power of C# to client-side Web development. The core of Blazor is designed to provide a strongly typed, browser-based environment upon which to build Web front ends using C# and .NET Core, in lieu of JavaScript and Razor on top of HTML. However, Blazor doesn’t push HTML and CSS to the corner. Rather, it extends the HTML syntax with a collection of predefined Razor tag helpers while requir- ing no plug-in to be installed.
I caution that Blazor is still largely in development and whatever you read here may radically change in only a few weeks.
Blazor App
Mono/WASP
Browser
Content
How is this different from, say, Silverlight? Silverlight applications ran sandboxed in a browser-specific shell communicating with the container browser environment through ActiveX in Internet Explorer, and through NPAPI in other browsers like Chrome and Firefox (see documentation at bit.ly/2klDgdY). Today, most browsers are dismissing NPAPI support in favor of WebAssembly. Blazor takes many of the best concepts of Silverlight and applies them in a way that appeals to developers seeking an alternative to JavaScript.
What about legacy browsers?
Development tools cross compile code to both WASM and asm.js, which is a low-level subset of JavaScript, intended to be a compile target from high-level languages (see asmjs.org). Blazor, in particular, falls back to using an
Code download available at bit.ly/2LVeCxA.
48 msdn magazine
Figure 1 .NET Code Running in the Browser