Blazor: Running C# in the Browser Using Web Assembly
C# is usually thought of as a backend, server-side language. But with the Blazor-Web Assembly combo, developers can use it for client-side as well.
Join the DZone community and get the full member experience.Join For Free
Blazor: Running C# on Browser Using Web Assembly
Web Assembly: A Game Changer
What Is Web Assembly?
Web Assembly is a low-level assembly language with a compact binary format that provides a way to run code written in different high-level languages in the browser with native speed.
Why C# for Client-Side Programming?
Robust and feature-rich language.
With .NET Core maturing and quickly becoming one of the main frameworks for the server-side programming, it is a good idea to use the same stack for the development and using C# for front-end development is added advantage.
Running C# Inside the Browser
To build this framework we need something which will run our beloved C# code in the browser; how we can do this? Thanks to the game changer, Web Assembly, we can use C# code without using any plugins. Web Assembly is being supported in all mainstream browsers, including the latest mobile browsers. We have Web Assembly, but how does it allow us to run .NET code in the browser? The answer is MONO. Many of us have heard about MONO, which is the official runtime for client platforms (Android/iOS), which is used for the running .NET into the browser
Let’s look at normal, bootstrapped Blazor application. Whenever the application gets started, it first loads Blazor.js along with Mono.js (present in the first diagram). We also include Bootstrap in the Mono Runtime ( i.e. Mono.Wasm) which is Mono's Web Assembly framework.
After Mono.wasm loads, the .dll application (which, here, is Blazor.dll) and the .NET runtime .dll (like mscorlib.dll) and System.net are loaded.
If you're a .NET developer, you're probably familiar with Razor Engine, which combines C# with HTML to generate dynamic content. We all know Razor runs on the server-side, but, with Blazor, Razor runs on the client-side where Razor Engine generates C# code during compilation.
The C# part of Blazor creates the render tree which is a tree of UI items.
This event may be button click which is processed by c# part.
In this overall process, we can see that no plugin is initiating things, unlike in Flash or Silverlight where some plugins are needed to initiate the process.
Blazor is inspired by today's popular SPA frameworks like Angular, React, and Vue, so it provides all the features which we will see below.
This was all about the Blazor and how it loads and runs in the browser but to make Blazor a true Single-Page Application framework, we will have to use features like components, routing, state management, unit testing, and build optimization techniques.
Every SPA framework is built up based on components, which can be a single pop up box, a user registration form, etc. In Blazor, components are classes which we can write in C# or the normal cshtml we use in Razor. With this approach, we can apply various patterns to the components.
When a new Blazor app is created, it adds some core features that every app needs, such as layouts, rendering, routing, DI, and unit testing.
One of the most important aspects of any programming framework is the deployment of the application. For deployment, one .NET Core middleware is provided which will help to deploy your Blazor UI application.
4. Code Sharing and .NET Standard
We can make use of our existing class libraries with the Blazor which allows us to reuse code which is well used and tested already.
This was all about the Blazor and how it works. I hope it helps!
Note: As Blazor been in an experimental phase until recently, it is not recommended to use the Blazor for any production app until the final release is available from Microsoft.
Opinions expressed by DZone contributors are their own.