Blazor: Running C# On Browser using web Assembly
Web Assembly : The game Changer
What is web Assembly ?
It is a low-level assembly language with compact binary format that provides a way to run the code written in different high-level languages in the browser with same speed as native
Why C# for Client-side programming ?
- Robust and feature Rich language
- Code Reusability is possible with c#
- With .Net Core maturing and being the main framework for the server-side programing it is good idea to use the same stack for the development and using c# for the front-end development becomes added advantage with it.
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 that ? Thanks to our Game Changer Web Assembly, this will allow the C# code without using any plugin , Web Assembly is being supported into all mainstream browser including the latest mobile browsers. Ok Cool 😊 we have web Assembly but how does it allow us to run the .net code into the Browser answer is MONO many of us have heard about MONO which is the official run time for client platforms (Droid/IOS) which is used for the running the .net into the browser
Let’s see the bootstrap of the Normal Blazor application whenever the application gets started it first loads the Blazor.js Along with Mono.js (Present in the First Diagram) it Bootstrap the Mono Runtime ( i.e. Mono.Wasm) which is Mono web assembly
After this Mono.wasm loads the Application dll Which is Blazor.dll and the .net Run time dll like mscorlib.dll, System.net are loaded.
Being .net developer we all Know the Razor Engine which combines c# with the HTML to generate the dynamic contents we all know Razor runs on the server side but with the Blazor , Razor runs On the client side in which razor engine is generates the c# code during compilation
1.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 the things unlike Flash or Silverlight where some plugins needed to initiate the process.
Blazor Being inspired by todays Popular SPA frameworks like Angular, React or Vue it provides all the feature which we will see below
This was all about the Blazor and how it loads and runs under browser but to make Blazor A true Single page Application framework will have the feature like component, Routing, State management, Unit testing and build optimization techniques.
Every SPA framework things are built up based on the components which can be a single pop up box or the user Registration form, In Blazor Components are classes which we can write in C# or normal Cshtml we use in Razor, with this approach we can apply various patterns with the components
When new Blazor app is crated then it adds some core features that every app needs such as Layouts, Rendering, Routing, DI, and Unit testing
One of the most important aspect of any programming is the deployment of the application and for deployment one .net Core Middleware is provided which will help to deploy the Blazor UI Application
- Code Sharing and netstandard
We can make use of our existing Class Library with the Blazor so allowing to use the code reuse which is well used and tested already
This was all about the Blazor and how it works hope it helps to everyone
Note :: Blazor being in the experimental phase till now it is not recommended to use the Blazor for any production app for now until final release is available from Microsoft