Scott Hanselman

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

November 16, '18 Comments [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
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb
Friday, 16 November 2018 05:19:03 UTC
I was expecting something like this when you guys launched ASP.NET 2.0 :)
Friday, 16 November 2018 05:50:53 UTC
Could this be somehow mixed with Electron to have local web apps that run WASM?
Friday, 16 November 2018 07:09:30 UTC
Blazor seems to get really awesome! @Uwe see this repo for an example of using Blazor with Electron: BlazorElectronExperiment.
Friday, 16 November 2018 07:33:15 UTC
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.
Francisco Grueso
Friday, 16 November 2018 08:22:18 UTC
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... :|
Matt
Friday, 16 November 2018 08:56:21 UTC
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
Stefan Olson
Friday, 16 November 2018 14:46:28 UTC
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!
Howard Richards
Friday, 16 November 2018 14:57:50 UTC
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.
Steve Buchok
Friday, 16 November 2018 16:28:48 UTC
+1 for the john pinette ref
p@rick
Friday, 16 November 2018 19:18:30 UTC
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.

Henry
Friday, 16 November 2018 20:44:17 UTC
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?)
James Hancock
Saturday, 17 November 2018 00:24:55 UTC
@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.
Richard Gavel
Sunday, 18 November 2018 03:50:38 UTC
Xaml and HTML could make it possible to do several things, this opens an incredible door.
Thursday, 29 November 2018 17:23:51 UTC
For XAML support look at https://platform.uno/
Sean Flynn
Comments are closed.

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