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 about 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.
Well as we now know about Blazor and Web Assembly, let talk about why you should care about it and how Blazor works under the hood.
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.
Note
The Blazor team has compiled the Mono DotNet runtime into WebAssembly(dotnet.wasm), which then executes our programs Dot Net standard assemblies in the client browser.
So as we have already discussed about the working of Blazor or to be precise about the working process of Blazor WebAssembly. Let’s discuss about the different flavors of Blazor and their advantages and disadvantages.
Hosting models available for Blazor
Currently there are two supported hosting models of Blazor, which are as mentioned below,
- Blazor Server
- 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
- The application loads much faster
- Can take full advantage of server capabilities
- All the client needs to use the app is an web browser
-
More secure as the app code is not sent to the client
Disadvantages of Blazor Server
- ASP.NET Core server is required
- An active connection to the server is required
- Higher latency due to a round trip to the server
- 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
- Active server connection not required
- Client resources and capabilites are used
- Full Blown ASP.NET Core web server not required
- Can be hosted on our own server, cloud, Azure CDN
- Can make Progessive Web Apps using C#
Disadvantages of Blazor WebAssembly
- The very first request usually takes longer
- Restricted to the capabilities of the browser
- Larger the application heavier the pay load of the applicaiton gets
- Cannot work with web browsers not supporting web assembly
References and Resources
-
-
https://blazor-university.com/overview/what-is-blazor/