Blazor in nutshell

#dotnet #blazor #webassembly #javascript

What's BLAZOR?

Blazor is a new framework from Microsoft designed to create SPAs (single page applications) UI, Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS ( Oops can't see Js 🤔 ). Blazor is an open source project from microsoft and was initialy released 2 years ago (January 2018). By releasing Blazor WebAssambly version in May 2020, the community has become much larger and people are getting more intrested.
The name of Blazor is a combination of two words, first one is Browser and second one is Razor. Razor is a template markup syntax, used to create dynamic web pages based on the C# programming language, that enables the programmer to use an HTML construction workflow in ASP .NET MVC Framework. The implication behind the name is instead of having to execute code in the server( like we used to do it with Razor pages apps) inorder to render HTML, Blazor is capable of doing the same thing but in the browser (without relying in one single line of JS).

How does Blazor Work ?

To understand how Blazor works we need to diffrentiate between two version of Blazor, Blazor server version and Blazor WebAssembly.

1. Blazor Server :

Blazor Server uses a standard ASP .NET Core application to run, and Within this application we can add server-side functionality such as DataBase communication, Authentification service...
Blazor server rely on SignalR which's is basically a library for ASP .Net used to add real-time web functionality to their applications based in the famous WebSocket protocol.
- Blazor server app handles a copy of the DOM for every connected client, and each UI transaction trigger an event that will transported to the server using SignalR WebSocket than the server will update the DOM or apply BackEnd functionality.

Note : Latency still a major problem of Blazor Server. Client is tied to the server with a webSocket protocol which bring into question the scalability of Blazor server App (virtual DOM management for each client need importante CPU, Storage and Network resources)

2. Blazor Wasm :

Blazor Wasm or Blazor WebAssembly is another supported way to host your Blazor pages in client-side and relying on WebAssembly Host system, which is an open web standards supported in all modern web browsers.
WebAssembly is an open standard for running binary programs in the browser with near-native performance. WebAssembly can go where JavaScript has not showed great performance (3D animation, media editing, high games ending ...).

Note : WebAssembly is not a programming language however it's a compile-target code (similar to .Net IL or java byteCode), so the idea behind it is simple, you write your code in any language you are familiar with and than your code is giong to be transpiled to webAssembly code, and finally executed in the browser.

So what happens when we run Blazor wasm app ? Technically when Blazor Wasm app is going to be launched, it will build and shipped like a DLL files (packaging format for .Net apps) + css files + Index.html, and than sent to the browser with a compact run time environement (2Mo) called Mono interpreter which is a lightweight dotnet Run-Time. Mono interpreter is responsable to transform DLL package to webAssembly code, this processus is only executed in the first transaction between the application and the Browser, after the initial HTTP request the application will run completly in the browser.

Note : Microsoft is working to reduce the size of the Mono interpreter by implementing AOT compilation which will impact the performance of Blazor Wasm app.