The following article will show how to implement Web assembly in ASP.NET Core. I have previously wrote about ASP.NET Core in the following articles:
Implementing SOLID REST API using ASP.NET Core
Unit testing ASP.NET Core Identity
Before start, let’s take a more technical look to web assembly technology.
Deep-dive into web assembly
About interpreters and compilers
Usually, there are two ways of translating to machine language:
- Interpreter: interpreters are quick to get up and running. You do not have to go through that whole compilation step before you can start running your code. You just start translating that first line and running it;
- Compiler: it takes a more time to start up because it has to go through that compilation step at the beginning. But then code in loops runs faster, because it does not need to repeat the translation for each pass through that loop;
JITs act like interpreter and compiler:
Finally, Web Assembly
Compilers take high-level programming languages and translate them to machine code. WebAssembly is a machine language for a conceptual machine, the browser. The compiler tool chain that currently has the most support for WebAssembly is called LLVM.
There is also another tool called Emscripten. It is a bit easier to use at the moment. It has its own back-end that can produce WebAssembly by compiling to another target, called asm.js, and then converting that to WebAssembly.
Web assembly in ASP.NET
Web Assembly in ASP.NET Core is a lie. The current status of web Assembly in ASP.NET Core can be found here: https://github.com/aspnet/Mvc/issues/6457.
However, Steve Sanderson put together a cool prototype of Razor running in the browser on WebAssembly: Blazor.
Blazor is an experimental web UI framework using C#/Razor and HTML, running client-side via WebAssembly. It runs .NET code in the browser via a small, portable .NET runtime called DotNetAnywhere compiled to WebAssembly.
DNA stands for Dot Net Anywhere. It is written in C and has been designed to be as small and portable as possible, allowing .NET software to be used on resource-constrained devices where it is not possible to run a full .NET runtime. DNA can be compiled as .wasm and executed in a browser.
Hands on Blazor
Blazor runs over the .NET Core 2.0 preview 3 or later. There are two way to setup a project sample:
- Visual Studio 2017.3 or later: by installing the following extension. Then use File->New project and choose Blazor Application from the Web category;
- Visual studio Code, Rider IDE: the project scaffolding extension is only available on Visual studio. But you can find the base template of project on GitHub: https://github.com/SteveSanderson/Blazor/tree/master/template/MyApplication;
To start the application in VS, just press F5 or Ctrl+F5 as usual. To start the application on the command line, run
dotnet blazor serve.
Once your app is running, you can edit its
cshtml files, and the application will update automatically.
In conclusion, Blazor is just an amazing experiment. It is NOT a production-ready solution. But the idea behind the project and the possibility to use Web assembly in ASP.NET Core can be an amazing feature.
More in general, the same concept can be applied to other languages, for example: Java, Swift or Go.
Ok, seriously? Are you shipping an entire dot net core library in your web page over the web?!
Well, as you can see from the screenshot the transferred size is
566K Jan 4 22:03 angular2.min.js. So, Blazor framework is a pretty good strarting point.
For more information:
A cartoon introduction to Web Assembly – Lin Clark
.NET and WebAssembly – Is this the future of the front-end?
Steve Sanderson’s NDC presentation
Cover image by: Katsushika Hokusai – Storm below the Mountain.