Table of contents
- What is Blazor?
- Hosting Models
- What is WebAssembly?
- Blazor in Action
- That’s all
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 🔥
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.
Sounds pretty exciting, right? Now, on to the 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.
- Supports all modern desktop and mobile browsers
- .NET is not required to serve the app
- Offline support
- 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.
- Supports all browsers
- Initial download size is small.
- Work directly with server libraries, like Entity Framework Core.
- 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.
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
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
Now we can create a new
blazorwasm project in a folder called
dotnet new blazorwasm -o HelloBlazorWasm. This will also run
dotnet restore automatically to restore dependencies for the project.
> dotnet new blazorwasm -o HelloBlazorWasm
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.
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
Notice that we’re loading the
Here you can see the assemblies downloading in the
Network tab of Edge on initial load before they are cached.
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
Let’s take a look at the
Index.razor file first, which renders the content for the Home page.
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
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
Since we’re rendering
@currentCount in the paragraph element, changes to the
currentCount property are updated in the UI automatically.
I hope you found this valuable. If so, please consider sharing with others that might be interested in getting started with Blazor.