In the universe of technology, something is constantly going on. If you, as a web developer, are using JavaScript and its frameworks and libraries day to day, you are familiar with the feeling of excitement when something new is out there. Blazor is not that new though, it was released in 2018, but the hype is getting bigger each year mostly due to Microsoft's efforts to give it more and more power.

About a decade ago when I was trying out different programming languages, one stood out for its loveable syntax - C#. It turned out that I will be mostly involved in JavaScript projects so the C# had to go on hold. This year I took a bit more interest in Blazor and how it can be used to create web apps alongside diving deeper into C# itself.

Hang around for my take on discovering Blazor as a tool for web development after exclusively working with JavaScript.

Briefly about Blazor

Let's go through Blazor's business card. Blazor is an open-source web development framework from Microsoft that allows developers to build interactive web applications using C# and .NET instead of JavaScript. The name comes as a combination of Browser and Razor (Browser being, you know, the browser and Razor being the .NET HTML view generating engine). Blazor brings web development to C# and .NET developers without any JavaScript. With Blazor, developers can have their client-side code running in the browser using WebAssembly or server-side code running on the server.

When we think about UI components, the final result is rendered in standard HTML and CSS. This allows using all the magic the CSS offers with any flavor you like, and the same goes with HTML. With the Blazor server, UI updates are handled with a SignalR connection. You can build a web page without the backend using Blazor WebAssembly and also tackle the delays for rendering pages with server-side prerendering. While in development, you can use Hot reload to instantly view changes as you implement them (only available from .NET 6 and up). Routing is made easy with the Route component and @page directives on each component individually.

Blazor for web development

Blazor can be hosted in several ways. You can set up a Blazor server project and run everything server-side in ASP.NET Core or you can set up a Blazor WebAssembly project and run client-side in the browser on WebAssembly-based .NET runtime. Additionally, you can host Razor components in native mobile and desktop apps also known as Blazor Hybrid. Blazor hybrid apps can be built by a .NET native app framework .NET MAUI so you get a powerful way to build cross-platform apps for mobile and desktop with the full support of native platform capabilities.

Blazor Server

Let me share a bit about the Blazor Server hosting model. In this hosting model, your application is executed on the server within an ASP.NET Core app. For hosting it, it is best to have ASP.NET hosting although it is quite possible to run it on Linux VPS with a couple of tweaks. SignalR connection via WebSockets protocol is responsible for UI updates, event handling, and JavaScript calls.

Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection. Image is from learn.microsoft.com

On the client, the Blazor script establishes the SignalR connection with the server then the script is served to the client from the resource in ASP.NET Core shared framework. So what are the benefits here? Your app can take full advantage of server capabilities, including .NET Core APIs, the entire code base is not served to the client, Server apps work with browsers that don't support WebAssembly, and app loading time is faster than Blazor WebAssembly app.

Knowing about advantages is great, but what makes or breaks the deal are the limitations. One of the main limitations is that there is no offline support, if the client connection fails, the application will stop working. Scaling with a large user base requires server resources to handle multiple client connections and we all know how quickly an AWS bill can become a major headache.

Blazor WebAssembly

These apps run client-side on a WebAssembly-based .NET runtime. The app, dependencies and .NET runtime are downloaded to the browser and executed directly on the browser's UI thread. If we are deploying a Blazor WebAssembly app without a backend we call it a standalone Blazor WebAssembly app, while we call it hosted if we have also created a backend app that will serve its files. Hosted Blazor WebAssembly application is the closest to the current setup of web applications made from a client-side application in let's say ReactJS and a server-side application made in NodeJS. Hosted client applications can interact with the backend application in a variety of protocols such as gRPC-web, web API, and SIgnalR.

Blazor WebAssembly runs .NET code in the browser with WebAssembly. Image is from learn.microsoft.com.

If the server goes offline, the application remains functional since there are no .NET server-side dependencies needed after the application is downloaded from the server. Work is transferred from the server to the client which can cut costs of server resources. You can have serverless deployment scenarios such as serving the application from a CDN. Apart from these benefits, there are some limitations as the amount of time to load the application since the download size is larger. Another limitation is that the application is restricted to the capabilities of the browser.

Blazor Hybrid

I'll be honest, I'm the most excited about the cross-platform capabilities using Blazor and .NET MAUI. The .NET Multi-platform App UI (or MAUI) is a framework where you can develop apps that can run on Android, iOS, macOS, and Windows from a single shared code base. I intend to dive into Blazor .NET MAUI in the coming articles so now I'll get back to the benefits of using the Blazor Hybrid hosting model. Two of the most prominent benefits are that you can reuse components and share them between the web, mobile, and desktop and that applications have full access to the native capabilities of the device. While the obvious limitation is that separate native client applications must be built, deployed, and maintained for each target platform.

Razor Components

After this short introduction and getting-to-know basic Blazor terminology, I will say a couple of words about Components which are UI building blocks in the Blazor application. Microsoft documentation says the following about components:

Components are .NET C# classes built into .NET assemblies that:

• Define flexible UI rendering logic.

• Handle user events.

• Can be nested and reused.

• Can be shared and distributed as Razor class libraries or NuGet packages.

You write the component class inside a file with a .razor file extension which is then referred to as a Razor component. Razor is a syntax where you can combine HTML and C# code. For example, you can reference a string variable inside HTML with a simple @currentCount and write all the logic within @code{ } code block. Components render into an in-memory representation of the browser's DOM called a render tree which is then used to update the UI.

To get a taste of a Razor component here is what a simple Counter component would look like:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Increase</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

}

In the beginning, we are using @page directive to tell our application at which route will this component be available.

@page "/counter"

This means that when we navigate to let's say https://localhost:7206/counter we will see the output of this component.

In the next couple of lines, we see the standard HTML markup along with @currentCount which is a string variable that will have its values shown.

Inside the <button> element we see the @onclick event handler with the value of IncrementCount which represents the name of our method.

Lastly, we arrive at the @code block where we define the currentCount variable and IncrementCount method, all written in C#.

Development with Blazor

Per Microsoft's recommendation, the two best IDEs that you can use for development with Blazor are Visual Studio and Visual Studio Code. I use Visual Studio Code for my JavaScript projects, but for Blazor projects, I went with the latest Visual Studio with a community license. When installing Visual Studio be sure to do it with ASP.NET and web development workload included. After that, new project templates give you a great scaffold and examples of how fundamental things work in Blazor.

With Visual Studio, you are also getting development on https localhost, debugging, hot reload, powerful IntelliSense and in my view more robust development environment than currently with other alternatives.

Will it work for you?

Of course, there are many things I didn't mention in this brief overview of Blazor as a tool for web development as it is intended for anyone interested in the topic to provide explanations of basic terminology and a stepping stone to further exploration of documentation and available articles.

As I am someone interested in getting more into C#, I find Blazor and especially .NET MAUI perfect tools to cross from JavaScript frameworks to .NET frameworks for web development.

Will Blazor work for you? As with a lot of technologies today, the answer is: "It depends". Certainly, tech-savvy developers will look to explore the possibilities provided by Microsoft especially due to the more and more features included in .NET versions. C# is a modern object-oriented and type-safe programming language enabling developers to build many types of applications so it is a perfect candidate to dive into as a new challenge and a source of new opportunities.

On top of that, C# and .NET are considered to be enterprise-level platforms capable of creating robust, scalable, and capable software be that desktop or web applications. That said, why not leverage the potential and start building with C# and Blazor powerful web, desktop, and mobile applications?