Blazor : Running C# On Browser

Blazor: Running C# On Browser using web Assembly

Being a Web developer and coming from the .Net stack we often use the   C# for back end programing for writing the services and then we use excellent Client-side framework  like angular or React for developing the UI part, being a C# guy, I always find it difficult to do to and from between c# to JavaScript . Considering these facts Microsoft announced the new Web UI Framework Called Blazor based on c# ,Razor and HTML which runs in the Browser using the Web Assembly

Web Assembly : The game Changer

When we look at the client-side development JavaScript always has the upper hand , No doubt there are new client side frameworks like Agular ,React  but end of the day they turn into the JavaScript but with the Web Assembly it is not the case any more

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 ?

JavaScript is great and powerful language but with some disadvantage , big problem with new developer and JavaScript is the learning curve and the complex syntax it has most of the things have been corrected with the Typescript but using C# is exciting because the features it is shipped with like below

1. Robust and feature Rich language
2. Code Reusability is possible with c#
3. 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.

Razor Engine

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

HTML Output

Till now we have seen the razor engine generates the C# code but can C# code access the DOM directly, Answer is Big NO, to access the DOM C# must go through the JavaScript Let’s see how this conversion happened to and from

1.C# part of Blazor creates the Render tree which is a tree of UI Items

2.Web Assembly pass this Render tree to the Rendering part of the Blazor JavaScript, which executes corresponding DOM changes

1. Whenever the Any Event occurs then JavaScript part of the Blazor send event to the C# part through Web assembly
2. This event may be button click which is processed by c# part
3. if the DOM Changes Occurs then the Render Batch with UI tree difference is sent from c# which is Given to the JavaScript Blazor and DOM changes Occurs

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.

1.Components

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

2.Infrastructure

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

3.Deployment

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

1. 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

5.JavaScript/Typescript Interop

Although we are developing the things in c# we might need to refer the third-party library so we can use them using Typescript type definitions then we can register the JavaScript function using Register function method in the C#

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

References

http://blog.stevensanderson.com/2018/02/06/blazor-intro/

http://learn-blazor.com/getting-started/what-is-blazor/

Happy Coding