.NET and WebAssembly – Is this the future of the front-end?

Dev Tips

6 years ago Erik Meijer and I were talking about how JavaScript is/was an assembly language. It turned into an interesting discussion/argument (some people really didn’t buy it) but it still kept happening. Currently WebAssembly world is marching forward and is supported in Chrome, Firefox, and in Development in Edge, Opera, and Safari.

“The avalanche has begun, it’s too late for the pebbles to vote.” – Ambassador Kosh

Today in 2017, WebAssembly is absolutely a thing and you can learn about it at http://webassembly.org. I even did a podcast on WebAssembly with Mozilla Fellow David Bryant (you really should check out my podcast, I’m very proud of it. It’s good.)

The image above is from Steve Sanderson’s NDC presentation. He’s writing the classic client-side JavaScript ToDo application…except he’s writing the code in C#.

What is WebAssembly?

“WebAssembly or wasm is a low-level bytecode format for in-browser client-side scripting, evolved from JavaScript.” You can easily compile to WebAssembly from C and C++ today…and more languages are jumping in to include WebAssembly as a target every day.

Since I work in open source .NET and since .NET Core 2.0 is cross-platform with an imminent release, it’s worth exploring where WebAssembly fits into a .NET world.

Here’s some projects I have identified that help bridge the .NET world and the WebAssembly world. I think that this is going to be THE hot space in the next 18 months.

WebAssembly for .NET

Despite its overarching name, this OSS project is meant to consume WASM binary files and execute them from within .NET assemblies. To be clear, this isn’t compiling .NET languages’ (C#, VB.NET, F#) into WebAssembly, this is for using WebAssembly as if it’s any other piece of resuable compiled code. Got an existing WASM file you REALLY want to call from .NET? This is for that.

Interestingly, this project doesn’t spin up a V8 or Chakra JavaScript engine to run WASM, instead it reads in the bytecode and converts them to .NET via System.Reflection.Emit. Interesting stuff!

Mono and WebAssembly

One of the great things happening in the larger .NET Ecosystem is that there is more than one “.NET” today. In the past, .NET was a thing that you installed on Windows and generally feared. Today, there’s .NET 4.x+ on basically every Windows machine out there, there’s .NET Core that runs in Docker, on Mac, Windows, and a dozen Linuxes…even Raspberry Pi, and Mono is another instance of .NET that allows you to run code in dozens of other platforms. There’s multiple “instances of .NET” out there in active development.

The Mono Project has two prototypes using Mono and WebAssembly.

The first one uses the traditional full static compilation mode of Mono, this compiled both the Mono C runtime and the Mono class libraries along with the user code into WebAssembly code. It produces one large statically compiled application. You can try this fully statically compiled Hello World here. The full static compilation currently lives here.

So that’s a totally statically compiled Hello World…it’s all of Mono and your app into Web Assembly. They have another prototype with a difference perspective:

The second prototype compiles the Mono C runtime into web assembly, and then uses Mono’s IL interpreter to run managed code. This one is a smaller download, but comes at the expense of performance. The mixed mode execution prototype currently lives here.

Here they’ve got much of Mono running in Web Assembly, but your IL code is interpreted. One of the wonderful things about Computer Science – There is more than one way to do something, and they are often each awesome in their own way!

“Blazor” – Experimental UI Framework running .NET in the browser

With a similar idea as the Mono Project’s second prototype, Steve Sanderson took yet another “instance of .NET,” the six year old open source DotNetAnywhere (DNA) project and compiled it into Web Assembly. DNA was an interpreted .NET runtime written in portable C. It takes standard IL or CIL (Common Intermediate Language) and runs it “on resource-constrained devices where it is not possible to run a full .NET runtime (e.g. Mono).” Clever, huh? What “resource-constrained device do we have here six years later?” Why, it’s the little virtual machine that could – the JavaScript VM that your browser already has, now powered by a standard bytecode format called WebAssembly.

To prove the concept, Steve compiles DotNetAnywhere to WASM but then takes it further. He’s combined standard programming models that we see on the web with things like Angular, Knockoutjs, or Ember, except rather than writing your web applications’ UI in JavaScript, you write in C# – a .NET language.

Here in the middle of some Razor (basically HTML with C# inline) pages, he does what looks like a call to a backend. This is C# code, but it’ll run as WASM on the client side within a Blazor app.

@functions {
WeatherForecast[] forecasts;

override protected async Task InitAsync()
using (var client = new HttpClient())
var json = await client.GetStringAsync(AbsoluteUrl("/api/SampleData/WeatherForecasts"));
forecasts = JsonUtil.Deserialize<WeatherForecast[]>(json);

This would allow a .NET programmer to use the same data models on the client and the server – much like well-factored JavaScript should today – as well as using other .NET libraries they might be familiar or comfortable with.

Why do this insane thing? “To see how well such a framework might work, and how much anyone would care.” How far could/should this go? David Fowler already has debugging working (again this is ALL prototypes) in Visual Studio Code. Don’t take my word for it, watch the video as Steve presents the concept at the NDC Conference.

Blazor as a prototype has a number of people excited, and there was a Blazor Hackthon recently that produced some interesting samples including a full-blown app.

Other possibilities?

There’s lots of other projects that are compiling or transpiling things to JavaScript. Could they be modified to support WebAssembly? You can take F# and compile it to JavaScript with F#’s Fable project, and some folks have asked about WebAssembly.

At this point it’s clear that everyone is prototyping and hacking and enjoying themselves.

What do YOU think about WebAssembly?

Source link

Leave a Reply