About Blazor with .Net Core

Ever wondered about developing a client-side web application without using Javascript or about building a Single Page Applications (SPA) or a Progressive Web Apps (PWA) using Dot Net? Well if your answer is yes, then you are in for a treat now. With Blazor, you can develop client-side web applications like Single Page Applications(SPA) or Progressive Web Apps(PWA) using your existing knowledge of Dot Net without having to learn a new language to build client-side applications and their UI Logic. In this article, we are going to discuss Blazor and the various functionalities it offers to build client-side web applications. FYI, you can also build desktop and mobile native applications using Blazor too.

What is Blazor? 

 Blazor is a web UI framework to build interactive client side web applications using C# rather than Javascript. Blazor uses Web Assembly because of which it no longer requires the installation of any additional plugins in the web browser or the need to convert your code to Javascript to run in the web browser.

What is Web Assembly?

Web Assembly is like the byte code for the web. This means that if your code can be converted into web assembly then it can easily run on any web browser with native speed. It was adopted as an open web standard way back in 2015 by major browser vendors who are a part of W3C.

Why should I care about it?

One of the first things that excited me about Blazor as a Dot Net Developer was, it allowed me to do full stack web application development using .Net without the necessity to learn a different language and its framework. And if that doesn’t make you happy then maybe the next line will:  Even though you can write C# code to build the client side application and their UI logic but just in case you wanted to use some javascript code in your Blazor application, you can absolutely do that. Blazor provides you with a javascript interop to do that which means you can have the fun of both worlds at the same time. There are a bunch more reasons which are mentioned later in the advantages of using Blazor WebAssembly and Blazor Server section of this article.

How does Blazor work?

To discuss how Blazor works, we are going to take the example of the execution of a Blazor WebAssembly application. Unlike the Blazor Server, The Blazor WebAssembly starts the program execution in the web browser. So when the browser sends a request to our application, the blazor.webassembly.js gets executed, then it downloads the Mono DotNet runtime and all the application libraries used by the application. After downloading all the required resources, the blazor.webassembly.js set’s up the DOM by binding all the javascript interop between our applications DLLs and the UI components in the browser. And once all of the above steps are done, then the blazor.webassembly.js initializes the runtime to begin the program execution. There can be a concern which some of you might feel that is as we are downloading a Dot Net runtime along with the applications DLLs, this can easily make the web application quite heavy but the size of Mono DotNet runtime is around 2.46 MB and the Blazor team is focusing on reducing the size in the coming release though we can overcome issue by using Blazor server.

Hosting models available for Blazor

 Currently there are two supported hosting models of Blazor, which are as mentioned below,

1. Blazor Server
2. Blazor WebAssembly

Please note, there are a few experimental flavors of Blazor available and are being continuously developed but in this article we are going to discuss about the two officially supported flavors. 

What is Blazor Server?

 Blazor Server runs your razor components and application DLLs in the server enabling you to leverage the full capabilities of an Server. UI events that occur in the browser are sent to the server over a real-time two way connection using SignalR. Advantages of Blazor Server

1. The application loads much faster
2. Can take full advantage of server capabilities
3. All the client needs to use the app is an web browser
4. More secure as the app code is not sent to the client

Disadvantages of Blazor Server

1. ASP.NET Core server is required
2. An active connection to the server is required
3. Higher latency due to a round trip to the server
4. Scalability can be a challenge

What is Blazor WebAssembly?

 Blazor WebAssembly aka Blazor wasm runs directly on the web browser on web assembly based Dot Net runtime. Blazor WebAssembly functions in a similar way to front-end javascript frameworks like angular or React. We have discussed briefly about the working mechanism of Blazor WebAssembly earlier in the article. Advantages of Blazor WebAssembly

Advantages of Blazor WebAssembly

1. Active server connection not required
2. Client resources and capabilites are used
3. Full Blown ASP.NET Core web server not required
4. Can be hosted on our own server, cloud, Azure CDN
5. Can make Progessive Web Apps using C#

Disadvantages of Blazor WebAssembly

1. The very first request usually takes longer
2. Restricted to the capabilities of the browser
3. Larger the application heavier the pay load of the applicaiton gets
4. Cannot work with web browsers not supporting web assembly

Is Blazor a plugin like Silverlight?

No, Blazor is not a browser plugin. It runs natively in all modern browsers, including Chrome and Safari on Android and IOS. Blazor Server uses a client JavaScript library and ASP.NET Core SignalR to communicate to standard C# server-side code. Blazor WASM uses WebAssembly, specifically the Mono runtime (compiled as mono.wasm), to execute C# assemblies directly in the browser.

So Blazor doesn’t use JavaScript at all?

The Blazor framework itself uses JavaScript to interact with the DOM. But Blazor abstracts this interaction away from the developer. For example, when the value of a variable bound on a Razor page changes in C#, Blazor updates the UI using JavaScript automatically.

So is Blazor\WebAssembly replacing JavaScript?

No. Both Blazor and WebAssembly depend on JavaScript to interact with the DOM. As of the time of this writing, WebAssembly has no direct access to the DOM. It can only send messages to JavaScript handlers, which in turn interact with the DOM. Blazor leverages the strengths of both WebAssembly and JavaScript to abstract away this interaction and let developers focus on building applications.