Blazor in nutshell
Tags: dotnet, blazor, webassembly, javascript
Published: 2021-01-08 12:21:12





# 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 :thinking: ). Blazor is [an open source project from microsoft ](https://www.google.com) 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...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mgssvd1boie722z0i630.png)
- Blazor server rely on [SignalR](https://dotnet.microsoft.com/apps/aspnet/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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lbgrrbra3ygmnd20h385.png)
- 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.
	
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rvzykr4c72ehm9xyh8ev.png)
- 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](https://visualstudiomagazine.com/articles/2020/05/22/blazor-future.aspx) which will impact the performance of Blazor Wasm app.

- Blazor wasm app can be deployed as static files, so it can run independantly in the browser in offline state.

# Where can I learn it ?
- So here I will share with you some free ressources (you can also find great courses in Udemy, Pluralsight ...) that I found useful for learning Blazor :

 - [Official Microsoft Blazor Documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-5.0)

 - [Blazor university : Blog for learning the main concepts behind Blazor](https://blazor-university.com/)
 - [Blazor Tutorial : Build your first Blazor App ](https://www.youtube.com/watch?v=MR0uc3pJYf4&list=PL4WEkbdagHIR0RBe_P4bai64UDqZEbQap&index=3&ab_channel=CuriousDrive])

 - [Official Dotnet channel in youtube](https://www.youtube.com/watch?v=KlngrOF6RPw&list=PLdo4fOcmZ0oWlP1Qpzg7Dwzxr298ewdUQ&ab_channel=dotNET)
 
- That's all, I hope this article helped you somehow to understand the principal concepts behind Blazor, thank you :wink: