Page 58 - MSDN Magazine, September 2018

asm.js-based .NET runtime. Then the deployed code performs fea- ture detection in the browser to de- termine how to run. Note that the entire asm.js framework is currently under research and development.
Youcanvisitcaniuse.comtocheck which browser versions currently support WASM. The site notes that all browser versions (both desk- top and mobile) released from mid-2017 and on support it. Note that at the time of this writing, Blazor polyfill was temporarily not working with Internet Explorer.
Anatomy of a Blazor
Application
A Blazor application is a plain
.NET Standard library with a
Program.Main entry point that
gets downloaded and run in the
browser. Only the .NET runtime is
compiled to WASM; the source code you write in C# runs natively as if it were a normal .NET application. To clear security concerns, note that all Blazor code still runs in the same secure sandbox as JavaScript. Figure 2 shows the list of files downloaded by the sam- ple Blazor application being presented in the rest of this article.
The different background color you see in the figure identifies two distinct moments in the lifetime of a Blazor application. First, the blazor.js and mono.js files are downloaded to coordinate the download of the Mono WebAssembly runtime (the mono.wasm file). At present, the Mono runtime includes a relatively feature-rich version of .NET and weighs in at 600KB. However, in earlier ver- sions a compact option was available at a fraction of the size. This is an area that could use some improvement and optimization.
Once the Mono runtime has been downloaded, it begins the download of the actual .NET assemblies. The initialization step may take a while—about three seconds in the example in Figure 2. For this reason, the standard Blazor Visual Studio template pro- vides a dedicated area for the UI to show during the loading phase. Let’s take a look at a sample application.
Building a Sample Application
To play with Blazor, you need .NET Core 2.1 and Visual Studio 15.7 or newer. In addition, you need to install the Blazor templates from the Visual Studio marketplace. The template is located under the ASP.NET Core Web Application folder. There are currently three templates—plain client-side Blazor, ASP.NET Core-hosted application and server-side Blazor. Let’s go for a plain Blazor application with no dependencies on any back-end environment. This scenario resembles very closely that of an Angular/React or even Silverlight application—a plain client application downloaded and run within the browser.
As mentioned, the project in Visual Studio is a .NET Standard 2.0 console application based on two specific NuGet packages:
Figure 2 Files Downloaded by the Sample Blazor Application
Blazor.Build and Blazor.Browser. Both are rooted in the Microsoft.AspNetCore namespace.
The project is a standard .NET Core project with a Program.cs bootstrapper, a Startup.cs class, and a few folders that recall an ASP.NET Core application, such as wwwroot, Shared, and Pages. The Main method is shown as follows:
public class Program {
public static void Main(string[] args) {
CreateHostBuilder(args).Build().Run(); }
public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) => BlazorWebAssemblyHost.CreateDefaultBuilder()
.UseBlazorStartup<Startup>(); }
A Blazor application is made of components that each consist of a .cshtml Razor file. By default, the name of the .cshtml file is the name of the component. In the sample application, App is the name of the startup component whose source code is in app.cshtml, as shown here:
<Router AppAssembly=typeof(Program).Assembly />
At the minimum, the startup class indicates the App class to use.
public class Startup {
50 msdn magazine
Cutting Edge
public void Configure(IBlazorApplicationBuilder app) {
app.AddComponent<App>("app"); }
The App module just sets up the Blazor router component. In tradi- tional Web sites (such as ASP.NET), routing takes place on the server, but in single-page applications it’s preferably done via a dedicated client-side component. In Blazor, the router isn’t made by JavaScript (as it is in, say, Angular), but, rather, is an instance of the internal Router class that parses all the classes in the referenced assembly, looking for those that implement the IComponent interface.
}