Scott Hanselman

Compiling C# to WASM with Mono and Blazor then Debugging .NET Source with Remote Debugging in Chrome DevTools

November 16, 2018 Comment on this post [14] Posted in DotNetCore | Open Source
Sponsored By

Blazor quietly marches on. In case you haven't heard (I've blogged about Blazor before) it's based on a deceptively simple idea - what if we could run .NET Standard code in the browsers? No, not Silverlight, Blazor requires no plugins and doesn't introduce new UI concepts. What if we took the AOT (Ahead of Time) compilation work pioneered by Mono and Xamarin that can compile C# to Web Assembly (WASM) and added a nice UI that embraced HTML and the DOM?

Sound bonkers to you? Are you a hater? Think this solution is dumb or not for you? To the left.

For those of you who want to be wacky and amazing, consider if you can do this and the command line:

$ cat hello.cs
class Hello {
static int Main(string[] args) {
System.Console.WriteLine("hello world!");
return 0;
}
}
$ mcs -nostdlib -noconfig -r:../../dist/lib/mscorlib.dll hello.cs -out:hello.exe
$ mono-wasm -i hello.exe -o output
$ ls output
hello.exe index.html index.js index.wasm mscorlib.dll

Then you could do this in the browser...look closely on the right side there.

You can see the Mono runtime compiled to WASM coming down. Note that Blazor IS NOT compiling your app into WASM. It's sending Mono (compiled as WASM) down to the client, then sending your .NET Standard application DLLs unchanged down to run within with the context of a client side runtime. All using Open Web tools. All Open Source.

Blazor uses Mono to run .NET in the browser

So Blazor allows you to make SPA (Single Page Apps) much like the Angular/Vue/React, etc apps out there today, except you're only writing C# and Razor(HTML).

Consider this basic example.

@page "/counter"

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
int currentCount = 0;
void IncrementCount() {
currentCount++;
}
}

You hit the button, it calls some C# that increments a variable. That variable is referenced higher up and automatically updated. This is trivial example. Check out the source for FlightFinder for a real Blazor application.

This is stupid, Scott. How do I debug this mess? I see you're using Chrome but seriously, you're compiling C# and running in the browser with Web Assembly (how prescient) but it's an undebuggable black box of a mess, right?

I say nay nay!

C:\Users\scott\Desktop\sweetsassymollassy> $Env:ASPNETCORE_ENVIRONMENT = "Development"
C:\Users\scott\Desktop\sweetsassymollassy> dotnet run --configuration Debug
Hosting environment: Development
Content root path: C:\Users\scott\Desktop\sweetsassymollassy
Now listening on: http://localhost:5000
Now listening on: https://localhost:5001
Application started. Press Ctrl+C to shut down.

Then Win+R and run this command (after shutting down all the Chrome instances)

%programfiles(x86)%\Google\Chrome\Application\chrome.exe --remote-debugging-port=9222 http://localhost:5000

Now with your Blazor app running, hit Shift+ALT+D (or Shift+SILLYMACKEY+D) and behold.

Feel free to click and zoom in. We're at a breakpoint in some C# within a Razor page...in Chrome DevTools.

HOLY CRAP IT IS DEBUGGING C# IN CHROME

What? How?

Blazor provides a debugging proxy that implements the Chrome DevTools Protocol and augments the protocol with .NET-specific information. When debugging keyboard shortcut is pressed, Blazor points the Chrome DevTools at the proxy. The proxy connects to the browser window you're seeking to debug (hence the need to enable remote debugging).

It's just getting started. It's limited, but it's awesome. Amazing work being done by lots of teams all coming together into a lovely new choice for the open source web.


Sponsor: Preview the latest JetBrains Rider with its Assembly Explorer, Git Submodules, SQL language injections, integrated performance profiler and more advanced Unity support.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
November 16, 2018 9:19
I was expecting something like this when you guys launched ASP.NET 2.0 :)
November 16, 2018 9:50
Could this be somehow mixed with Electron to have local web apps that run WASM?
Uwe
November 16, 2018 11:09
Blazor seems to get really awesome! @Uwe see this repo for an example of using Blazor with Electron: BlazorElectronExperiment.
November 16, 2018 11:33
To be perfect, instead of using HTML Blazor you should use XAML Standard, in this way, companies that have made a lifetime desktop software, could run applications within a browser without learning HTML and without changing any single line of code.

This is possible, because the Razor HTML markup "translates" to an assembly in .NET that when executed on the client by Blazor "moves" this HTML to the rendering engine of the browser that is the one that draws the interface. If in the browser we had a XAML rendering engine, instead of sending HTML, we could send XAML and "surprise", we would have a XAML desktop application running in the browser without any changes.

I sincerely think that Microsoft should work in this direction and that the team that could do it is Xamarin's team.
November 16, 2018 12:22
Awesome, I’m not gonna try it out yet but please keep blogging about it! I love the possibility of .NET everywhere, presumably you’re aware of the meadow IoT Kickstarter?

And If you do end up supporting XAML, please don’t make it the default... :|
November 16, 2018 12:56
Yes I think it would be wonderful to be able to use both Xaml and HTML. For those of us have already built apps in xaml will allow very good content reuse. But for people who are familiar with HTML they can move straight in and use it
November 16, 2018 18:46
Francisco - the Xamarin question has been raised and answered already, see https://github.com/aspnet/Blazor/issues/389.

The Blazor team is focused on doing HTML and CSS using Razor rendering. If Xamarin's what you love your should check out https://github.com/praeclarum/Ooui

Blazor isn't likely to be Microsoft's only WASM technology. Once the Mono WASM client is properly baked and tested it will probably form the basis of several MS and non-MS frameworks.

To quote the famous Eccles: http://bloodnok.net/aac/alive2.m4a

It's good to be alive!
November 16, 2018 18:57
Uwe - Check out this video for exactly that type of example. Unfortunately it doesn't show you the code, just shows you it's possible and a situation they've thought of. https://youtu.be/61qmX5eAPwI?t=2876

I'm currently trying to build a website using Blazor and I can tell you it is really nice being able to do the frontend and backend all in C#. I should also say that I love JavaScript, I really do, however this is quickly becoming my new favorite.

There are still a lot of things you would still need JS for since DOM access isn't available yet through WebAssembly, but Blazor is already very useful.

Also, you can turn off the WebAssembly side (Client) and have it all run server side. Check out the video, it explains it far better than I ever could.
November 16, 2018 20:28
+1 for the john pinette ref
November 16, 2018 23:18
When will Blazor be fully supported with an extended product support duration?

I can't use this for my paid job as it's pre-alpha without a MS commitment to long term support. We get questions about Lightswitch and Silverlight when such an early stage technology is discussed.

I can get buy in to use technologies MS has a stated support policy for and a long term support horizon beyond 4 years. Shorter than 4 years or lack of a support policy excludes it from our production environment.

November 17, 2018 0:44
What's the size of that wasm library? Are we getting to angular or react size yet? It gets there and this is VERY interesting. Especially if Telerik et. al. start making control libraries that work with it (webassembly anyone?)
November 17, 2018 4:24
@Henry, certainly Blazor is a ways away from being fully supported, but they are taking some aspects and putting them into official ASP.NET core, like Razor components.
November 18, 2018 7:50
Xaml and HTML could make it possible to do several things, this opens an incredible door.
November 29, 2018 21:23
For XAML support look at https://platform.uno/

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.