DEV Community

loading...
Cover image for What is Blazor?

What is Blazor?

justinhhorner profile image Justin Horner Originally published at justinhhorner.com Updated on ・6 min read

Table of contents

Introduction

Just a few years ago, the thought of writing client-side web applications in a language other than JavaScript was just a dream. Not because I dislike JavaScript, but because I wanted to use the same language to get as much reusability as possible when using an ASP.NET back-end.

Thanks to WebAssembly, it's now possible to write client-side web applications with multiple languages, including the one I'm going to discuss today; C#.

My goal with this post is to explain what WebAssembly is, how Blazor fits into the picture, and if you're entirely new to Blazor, getting hands-on creating your first Blazor client-side app. Ready?

Let's GOOO 🔥
Cat putting on sunglasses with text I'm Ready

What is Blazor?

Blazor is an open-source, cross-platform framework from Microsoft for creating interactive web user interfaces using C# and .NET!

Blazor offers several benefits:

  • Shared logic across front-end and back-end
  • Ability to utilize libraries from the .NET ecosystem
  • Familiar concepts as other front-end frameworks
  • Client-side and server-side hosting models
  • Single Page Application experience

Using Blazor, we can build such user interfaces using a familiar component model. If you've used React or Vue, you will quickly see the analogies with those frameworks.

For anyone thinking, "Yeah, but what about the JavaScript we need to integrate with?". That's possible with the JS interop layer where C# and invoke JavaScript and vice-versa.

Sounds pretty exciting, right? Now, on to the hosting models.

Hosting Models

Blazor apps can be hosted client-side using WebAssembly or server-side within an ASP.NET Core web application using SignalR for real-time UI updates. Each has its own tradeoffs.

Here's the good news; your components are agnostic of the hosting model you use! In fact, you can create a dedicated project/assembly that contains razor components and share it with a client-side and server-side hosted Blazor app easily.

Here are a few pros and cons for each hosting model.

Client-Side

Pros

  • Supports all modern desktop and mobile browsers
  • .NET is not required to serve the app
  • Single Page Application (SPA) user experience as you'd build with a JavaScript library or framework.
  • Offline support

Cons

  • Browsers without the ability to use WebAssembly are not supported, such as Internet Explorer.
  • Initial download size is more significant due to additional runtime dependencies, typically a one-time cost, as the assemblies are cached for future use. Unused code can be stripped out when publishing apps to optimize further with IL Trimmer.

Server-Side

Pros

  • Supports all browsers
  • Initial download size is small.
  • Work directly with server libraries, like Entity Framework Core.

Cons

  • Network delay due to bi-directional updates via SignalR
  • No offline support due to being completely server-based
  • Scalability could become a concern due to the amount of SignalR connections to clients. The Azure SignalR Service can help in this case.

What is WebAssembly?

I'll be focusing on client-side Blazor in this post. WebAssembly, or wasm, is the technology that makes it possible to run .NET and C# in the browser.

Wasm is an open web standard, supported by all modern browsers, that executes a compact portable bytecode format optimized for fast download and execution times (yes, faster than JavaScript).

WebAssembly is sandboxed the same as JavaScript. You have all the same protections you'd expect from malicious browser pursuits. All browser functionality can be accessed via JavaScript interoperability.

It's not just .NET and C# that can run via wasm! There are already several compilers that can output this binary format. All you need is such a compiler for the language you want to write in, and that bytecode can be delivered to and executed in the browser.

Blazor in Action

Man jumping over a blazing fire to escape

Now, let's see Blazor in action! If you don't have the .NET 5 SDK, you can download and install it for your preferred platform here.

The .NET SDK comes with several project templates out-of-the-box to make it quick and easy to create almost any project you'll need. Use the dotnet new command with no arguments to display these project templates. You should see Blazor Server App and Blazor WebAssembly App in the list. The one we're interested in has a short name of blazorwasm, which we'll use to create our app.

> dotnet new
Enter fullscreen mode Exit fullscreen mode

Windows Terminal with a list of .NET 5 project templates

Now we can create a new blazorwasm project in a folder called HelloBlazorWasm usingdotnet new blazorwasm -o HelloBlazorWasm. This will also run dotnet restore automatically to restore dependencies for the project.

> dotnet new blazorwasm -o HelloBlazorWasm
Enter fullscreen mode Exit fullscreen mode

Screen shot of running the dot net new command within Windows Terminal

Let's navigate to the HelloBlazorWasm directory and see what the default project template provides generated. We can do that by running dotnet run from within the project directory.

The console should output where the port it's listening to on localhost. This is what you should see when you visit that URL in your favorite browser.
Screen shot of a default blazor app running in the Edge browser

So, how does Blazor get both the framework and your app assemblies down to the client? To answer this we should take a look at the index.html file inside of the wwwroot directory.

Notice that we're loading the blazor.webassembly.js file via the script tag. This JavaScript file is what is downloaded to the client first and subsequently downloads the necessary framework and app assemblies, which are then cached in the browser.

Here you can see the assemblies downloading in the Network tab of Edge on initial load before they are cached.
Edge browser showing downloaded dot net assemblies in network tab

Okay, now let's move on to components.

Components in Blazor are made using Razor syntax, which you may be familiar with from ASP.NET Core. These components, in the context of Blazor, are referred to as razor components.

Razor files can have a mixture of HTML and C#. You can include both in the same .razor file, or separate C# into a partial class. As you'd expect, components can be nested, and you can pass data to them via Parameters (think props) and other ways we'll get into later.

The default project has a few pages that demonstrate the use of components. For this introduction, we'll focus on the Index, Counter, and SurveyPrompt components.

Let's take a look at the Index.razor file first, which renders the content for the Home page.
Code snippet for the Index component

Components that can be navigated to have a @page directive with a URL, in this case, the root of the site /. Past the header and welcome text, you'll see we're using the SurveyComponent and passing a string to the title parameter.

Taking a look at the @code block within the SurveyPrompt component, we can see how parameters are defined by applying the Parameter attribute on public properties. Here we're rendering the value of the title property within the h1 element using @Title.
Code snippet for the SurveyPrompt component

The last component we'll walk through is Counter.razor. The counter component is a simple page that increments a value every time the button is clicked.

This component demonstrates how to handle events in Blazor. We have a currentCount field and an IncrementCount() method that can be used in HTML. To increment the count, the IncrementCount() method is assigned to the @onclick event.
Code snippet for the Counter component

Since we're rendering @currentCount in the paragraph element, changes to the currentCount property are updated in the UI automatically.
Gif showing user clicking a button to increment a counter in the browser

That's all

I hope you found this valuable. If so, please consider sharing with others that might be interested in getting started with Blazor.

Discussion (0)

pic
Editor guide