Baskaran
Photo by Microsoft
Microsoft have announced the release of .NET 5 which it's globally available. I'm pretty excited on what .NET 5 can bring improvements to the .NET ecosystem and to my blog. Worthy of a upgrade to .NET 5? Let's see!
Pre-requisites
Once you have downloaded the pre-requisites, to upgrade current Blazor project structure to .NET 5, all you need to do is to edit your .csproj
file with the content below:
csproj
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0" PrivateAssets="all" />
<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
</ItemGroup>
</Project>
Microsoft have released many improvements to Blazor .NET 5 which I find it's going to help Blazor usability across Production environment. Let's review some .NET 5 improvements and will cover more in future posts.
Debugging experience
On Blazor WebAssembly 3.2, I've mentioned that it lacks of hot reload when code is changed where you will require to always rebuild/refresh the application manually. Good news! With .NET 5, you no longer have to do that manually where auto-refresh is introduced todotnet watch command. As soon as you hit save, it will re-compile your changes,
and hot reload the page. Announcement right
here.
CSS isolation
Ever came across when you needed only specific styling applicable for a specific page (e.g.h1,
p) and not affecting to the rest of the pages. What do we do to overcome that? We eventually create
a specific CSS class to assign like below:
CSS
/* For global */
h1 {
color: blue;
}
/* For specific */
.h1-specific-page {
color: red;
}
With CSS isolation, we can now create a specific CSS just for a page(e.g.
Footer.razor.css) along side
Footer.razor page. That's it, now you have a specific CSS handling for a page that will not conflict with
the global CSS created.
Virtualization
Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. For example, you may have thousands of records that you will want to display to client side. While rendering this records, you will experience noticeable lag/stutters when fetching it from background. Therefore, with Virtualization, it will only render what you can see rather than all to improve performance of component rendering.Before we go further, there are couple of caveats to take note:
- Virtualization requires fixed height to render to know the scroll range to render the given items.
- If the content can be text-wrapped/responsive to screen widths, this may disrupt the rendering.
-
I faced an issue where I've set
overflow-y:scroll;style tohtmltag. When there is a fixed scroll, Virtualization does not recognize the height of the items.
posts.json
file:
HTML, Razor
@foreach (var post in posts)
{
<a href="@post.Url">@post.Name</a>
}
@code
{
private Post[] posts;
protected override async Task OnInitializedAsync()
{
posts = await Http.GetFromJsonAsync<Post[]>("posts.json");
}
}
Now, let's change this to use Virtualization technique. On
_Imports.razor file, you will require to add the below code first:
Razor
....
@using Microsoft.AspNetCore.Components.Web.Virtualization
...
Virtualize component replaces
foreach and is used to render records which does not block the rendering on UI.
HTML, Razor
<Virtualize Context="post" Items="posts">
<a href="@post.Url">@post.Name</a>
<Virtualize />
@code
{
private Post[] posts;
protected override async Task OnInitializedAsync()
{
posts = await Http.GetFromJsonAsync<Post[]>("posts.json");
}
}
If you have done right, to test this out, you can generate more data to the
posts.json and open Chrome Dev console.
Inspect to the content of the loaded items and start scrolling. You will observe with Virtualization, Blazor will re-calculate the
height of the items. The best part is that as soon as you scroll down, it will reset the items at the top which provides efficient
scrolling without any lags.
Note:
For this example, the data is fetched OnInitializedAsync and kept in client browser memory. You may have a question on how to fetch data on demand. Virtualization has Item provider delegate capability where we can fetch based on continuation rather than all at once.
For this example, the data is fetched OnInitializedAsync and kept in client browser memory. You may have a question on how to fetch data on demand. Virtualization has Item provider delegate capability where we can fetch based on continuation rather than all at once.