Building SPAs with C#

Looking at this title, many developers would say “Are you mad? You can’t build single page applications with C#! You need a front end framework, like Angular, React or Vue”. Right now I can’t say that I can prove them wrong, but I can definitely at least say that building SPAs with C# is in fact possible. For now it’s only experimental, but the ASP.NET team announced an experimental project called Blazor. Blazor is an experimental web UI framework based on C#, Razor, and HTML that runs completely in the browser via WebAssembly. This really opens new perspectives on the fact that you may build modern SPAs using C# and the entire .NET stack. 

A short history

Some months back, Steve Sanderson had this crazy idea that it should be possible to run .NET code in the browser via WebAssembly. WebAssembly is a compact bytecode format optimised for minimum download sizes and maximum execution speed. This doesn’t introduce new security concerns, because it’s not regular assembly code (e.g., x86/x64 or similar), but a new bytecode format that can only do what JavaScript can do. And WebAssembly is now supported by all mainstream browsers, including on mobile.

Steve built and entire prototype project using this concepts and managed to prove that this is in fact feasible. Hence, this idea became an official experimental project within the ASP.NET organization at Microsoft that has the intention to build what I would call a “.NET front end framework”.

How does it work?

A first very important building block is Mono. Mono is an open source development platform based on the .NET Framework, that allows developers to build cross-platform applications with improved developer productivity. Mono’s .NET implementation is based on the ECMA standards for C# and the Common Language Infrastructure. Simply put, Mono is the official .NET runtime for client platforms (e.g., native mobile apps and games). WebAssembly just another client platform, so it makes sense that Mono should run on it and the official Mono support for WebAssembly has been recently announced.

So, in order to run C# code in the browser, the Mono runtime is compiled to WebAssembly (mono.wasm) and the compiled mono.wasm can in turn load and run C# .dll files.

Playing around with the Blazor samples from the official repository I was able to see this in the developer tools network trace:

Seeing mscorlib.dll running in the browser is clearly something that I am very excited about.

Furthermore, there is another possibility to run C# code in the browser: we can compile the .dll files themselves in .wasm (WebAssembly) files that are executed directly in the browser. In a blog post, Steve Sanderson explains these possible proceedings in a very detailed manner.

What does this mean for the future?

Please bare in mind that Blazor is for now only an “official” experimental project and not a committed product. This means that things will massively change during development, based on feedback gathered from the ASP.NET community. However, Blazor will have all the features of a modern web framework including:

  • A component model for building composable UI
  • Routing
  • Layouts
  • Forms and validation
  • Dependency injection
  • JavaScript interop
  • Live reloading in the browser during development
  • Server-side rendering
  • Full .NET debugging both in browsers and in the IDE
  • Rich IntelliSense and tooling
  • Ability to run on older (non-WebAssembly) browsers via asm.js
  • Publishing and app size trimming

Conceptually, this means that the perception on web development will change. The paradigm that you have to be familiar with a front end framework to build SPAs will heavily challenged. From a pure theoretical perspective, if you have a runtime like Mono, you could run C, Java, C++ and any other language in the browser. And this means that the gap between desktop application developers and web developers will become narrower and narrower. One day we will probably be able to run entire operating systems in the browser. That’s a really exciting perspective!

I would be very interested to hear your opinions on this new possibilities, so feel free to drop a comment. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *