Introduction
Being a Web developer and coming from the .Net stack we often use C# for back-end programming for writing the services, and then we use an excellent Client-side framework like Angular or React for developing the UI part. Being a C# guy, I always find it difficult to go to and from 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 Angular and React but at the end of the day they turn into the JavaScript but with the Web Assembly, it is not the case anymore.
What is web Assembly?
It is a low-level assembly language with a compact binary format that provides a way to run the code written in different high-level languages in the browser at the same speed as native.
Why C# for Client-side programming?
JavaScript is a great and powerful language but with some disadvantages. The big problem with a new developer and JavaScript is the learning curve and the complex syntax. Most of the things have been corrected with Typescript but using C# is exciting because of the features it is shipped with like below.
- Robust and feature-rich language
- Code reusability is possible with C#
- With .Net Core maturing and being the main framework for the server-side programming, it is a good idea to use the same stack for the development and using C# for the front-end development becomes an 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 that? Thanks to our Game Changer Web Assembly, this will allow the C# code without using any plugins. Web Assembly is being supported into all mainstream browsers 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? The answer is MONO. Many of us have heard about MONO which is the official runtime for client platforms (Droid/IOS) which is used for 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 bootstraps 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 Runtime dll like mscorlib.dll and System.net are loaded.
Razor Engine'
Being .net developers we all know the Razor Engine 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 the Razor engine generates the C# code during compilation.
HTML Output
So far we have seen that the razor engine generates the C# code but can C# code access the DOM directly? The answer is a Big NO, to access the DOM, C# must go through the JavaScript. Let’s see how this conversion happened:
- C# part of Blazor creates the Render tree which is a tree of UI Items
- Web Assembly passes this Render tree to the Rendering part of the Blazor JavaScript, which executes corresponding DOM changes
- Whenever the Any Event occurs then JavaScript part of the Blazor sends an event to the C# part through Web assembly
- This event may be a button click which is processed by the C# part.
- If the DOM Changes occur then the Render Batch with UI tree difference is sent from C# which is given to the JavaScript Blazor and DOM changes occur
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 today's Popular SPA frameworks like Angular, React or Vue, it provides all the features 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 we will have features like component, routing, state management, unit testing and build optimization techniques.
Components
All SPA frameworks are built up based on the components which can be a single pop up box or the user Registration form. In Blazor Components, there 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.
Infrastructure
When a new Blazor app is created then it adds some core features that every app needs such as Layouts, Rendering, Routing, DI, and Unit testing.
Deployment
One of the most important aspects of any programming is the deployment of the application and for deployment, .net Core Middleware is provided which will help to deploy the Blazor UI Application.
Code Sharing
We can make use of our existing Class Library with the Blazor allowing it to reuse the code which is well used and tested already.
Javascript/Typescript Interop
Although we are developing the things in C# we might need to refer to 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 C#.
This was all about Blazor and how it works. I hope it helps everyone.
Note
Blazor has been in the experimental phase so far. It is not recommended to use Blazor for any production app for now until the 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/