Razor Components First Official Preview

The Blazor world has been bustling with activity lately! This blog walks you through the recent release of Razor Components and also offers an overview of the 0.8.0 Blazor release.

It’s been an exciting and busy time recently in the Blazor world. We’ve had the first official preview of Razor Components (formally known as server-side Blazor). Then, only a week later, we also received version 0.8.0 of Blazor! In this post, I’m going to walk you through this first release of Razor Components, and I’ll also give a brief overview of what the 0.8.0 release of Blazor was all about.

Razor Components

They’re here and they’re official! So, of course, you want to know how you can get your hands on them?

As you may expect, you are going to need to get a couple of preview bits installed to be able to get playing with Razor Components. The first thing you will need is the latest preview of Visual Studio 2019 (currently Preview 2.2). While that is downloading/installing, you also need the latest preview release of the .NET Core SDK.

Once they are both installed, you are ready to go.

Creating Your First Project

With everything installed, you can get on with creating your first Razor Components project. Things are a little different with Visual Studio 2019—when it first starts up, you are presented with a new modal screen.

From here, select “Create a new project”. You will then move to the project template screen.

On this screen, select the “ASP.NET Core Web Application” template and click "Next". On the next screen, you can give your project a name as well as select where you want to save it.

Once you have given your project a name, click "Create" to finish and you will be presented with a new modal to allow you to select the type of your new ASP.NET Core Web project.

Here is where you can make the choice for Razor Components. You can then click "OK" and your solution will be generated for you. When it’s finished, you will end up with something like this.

Congratulations! You have just created your first Razor Components application.

Project Changes

Anyone who has tested out an earlier version of Razor Components (back when it was called server-side Blazor) might notice a slight change in the generated projects. The root folder is now part of the server project and no longer part of the app project. And that’s because the app project is no longer a web project—it’s now a library project.

The reason for this is that the long-term plan is to have only one project. But currently there is a tooling issue—Razor Components have a .cshtml extension that is the same as Razor Pages and Razor Views. The issue is that Razor Components need to be compiled differently than the other two. If they are all in the same project, then there is no way to tell how to compile a .cshtml file.

This is going to be addressed in a future release by introducing the new file extension for Razor Components, .razor. If I’m honest, I’m not totally sold on the extension—I think it could be a bit confusing for developers, but naming things is hard and I have no idea what a good alternative would be. Anyway, with this new extension, it will be possible to host everything in a single project and there will be no need for the .app project anymore.

Component Libraries

Unfortunately, a component library project template didn’t make it into this release. However, you can still create them, you just need to use the Blazor templates and the dotnet CLI.

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::0.8.0-preview-19104-04

Once you have the templates installed, you can then use the following command to create a project

dotnet new blazorlib

The big issue to watch out for in this first preview is that component libraries with static assets aren’t supported in Razor Components. So, for example, if you have a component library that has some JavaScript in it and you reference it from a Razor Components project, those JavaScript files will not get added when you run the project. This is a pretty large limitation, but the team will be addressing this in a future preview.

MVC & Razor Pages Integration

Now, this is really quite exciting if you have existing MVC or Razor Page apps and are interested in using Razor Components. The long-term plan is to be able to mix and match Razor Components with either MVC or Razor Pages. And not just whole pages, but parts of a page. I think this is a really impressive plan and should offer an extremely smooth migration path to Razor Components.

In this first preview, you can add a Razor Component into an MVC view or Razor page. The catch? They’re not interactive… yet.

This is achieved by using a new HTML helper, RenderComponentAsync. For example, if we wanted to render a component called BlazorLabel into an MVC page that took a parameter for the text, it should display named LabelText. We could do so using the following code.

@(await Html.RenderComponentAsync<BlazorLabel>(new { LabelText = "Cool Label" }))

However, this syntax is only temporary. Longer term, the team wants developers to just be able to use the normal element and attribute syntax so the above would become this:

<BlazorLabel LabelText="Cool Label"></BlazorLabel>

There is certainly a long way to go, but I think what this promises is pretty awesome. It is worth pointing out that this relationship will be one-way, meaning MVC views and Razor Pages can host Razor Components but not the other way around.

That wraps things up for the first preview of Razor Components. I think this is a solid first preview, and while we didn’t get many new features, we put a lot of groundwork in to enable things for the future.

Before we wrap things up, let’s take a quick look at what’s in Blazor’s 0.8.0 release.

Blazor 0.8.0

This release isn’t about adding new features to Blazor—it’s far more of a maintenance release. The primary goal of 0.8.0 is to update Blazor to use Razor Components in .NET Core 3 as well as get out some bug fixes.

Getting Set Up

If you’ve followed the steps to get up and running with Razor Components, then you are pretty much ready to play with Blazor as well. The only additional thing you need to do is install the Blazor Language Services from the Visual Studio Marketplace. All this does is provide you with the Blazor standalone and Blazor Hosted templates. Once you have the extension installed, you then get the option to select a Blazor project type.

Performance & IL Linker Improvements

One nice addition in this release is an updated version of the Mono WASM (WebAssembly) runtime. This newer version carries a speed increase of around 25% for Blazor apps running on Chrome, which is nothing to sniff at.

Another improvement is with the IL linker. If you’ve not heard about this before, the IL linker is responsible for reducing the size of Blazor apps. It does this by removing code and libraries which no code paths hit. It’s a very similar concept to tree-shaking in the JavaScript world.

Up till now, the IL linker has been a bit too aggressive, and some popular libraries (most notably Json.NET) couldn’t be used with Blazor out of the box. But with this new release, that’s no longer the case, and many more libraries are now available to be used in Blazor applications.

Blazor Hosted Template Bug

Currently, there’s a bug with the Blazor Hosted template which can be seen by trying to load the Fetch Data page. This is due to the template not having a reference to Json.NET (this has been removed in .NET Core 3). You can solve it really easily by installing Json.NET and then updating the server projects Startup.ConfigureServices method like so:

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().AddNewtonsoftJson();
    services.AddResponseCompression();
}

Wrapping Up

Overall, I think it’s been a decent couple of releases, especially when you take into account the number of changes that have happened. The Blazor team is creating some really solid foundations that they can build upon going forward.

The biggest issues at the moment seem to be with the tooling. Most of the people I’ve spoken with are hitting quite a few issues with Visual Studio 2019, which can be frustrating. But let’s remember this is all bleeding-edge tech and things are being improved every day.

If you haven’t dipped your toe in the world of Razor Components and Blazor, I urge you to give it a go. It really is an amazing framework and you can already achieve so much.