Blazor : The view of a C# developer
Introduction
I’ve been coding in C# for over 15 years, primarily focusing on backend business logic without front-end responsibilities. However, the past five years has seen a shift for me where I’ve been developing across a broader range of technologies, languages, and frameworks such as .NET, C#, JavaScript, Vue.js, and Hapi.js.
Why tell you this? Well, C# is kind of my warm cosy comfort blanket, it’s what I’ve been doing for years…JavaScript not so much. So to have a tech come along (it’s actually been around since 2018) that can be used to build web apps in C# rather than leverage JavaScript certainly appeals.
Where do I start?
I took the option to work through the Build web apps with Blazor learning path from Microsoft. This provided me with a introduction to Blazor, building up simple web apps written in C# using the component based model. The learning path had several advantages:
- It’s free, only requiring an user profile to be created for achievements to be recorded against.
- It’s hosted by Microsoft, thus providing a high level of confidence in what is being taught.
- It can be worked through at my own pace and time.
- It contains knowledge checks for each module.
- All source code is available to download from GitHub.
- Achievements, badges and trophies are earned for completing modules and paths, these are recorded under your profile.
What I found
Blazor is Microsoft's offering of a .NET framework which utilises C# code to build web apps without requiring JavaScript. It still requires knowledge of HTML and CSS, however these are a fundamental requirement to build and style any web page.
Some of the key benefits and features of Blazor that I learned during the learning path were:
- It’s an open-source framework developed and supported by Microsoft.
- It’s ideal for teams or developers who have experience with NET and C#.
- There is a a high level of familiarity for developers who have previous experience with ASP.NET Razor syntax.
- JavaScript, although not essential, can still be used via JS interop packages.
- If contains a fully supported, large number of out-of-the-box components.
- It supports both server and client side rendering of components, allowing the developer to decide and apply per component.
- Components can be built within a standalone project and shipped as a NuGet package.
- It supports hot reloading of changes to the browser during development.
My First Project
To understand how simple it is to get started with Blazor, I’ll run through the few steps required to create a new web app.
Using Visual Studio 2022 as my IDE, I create a new Blazor web app using a project template.
- Firstly create the project by selecting the menu option:
File -> New -> Project - From the list of project templates, select Blazor Web App and then continue to create the project leaving all default settings as they are.
Straight out the box, this template will provide you with a web app containing a navigation bar on the left hand side along with three individual pages (home, counter and weather). Each page contains it’s own layout and interactive elements.
Viewing the solution explorer within the IDE, we can see that each page is an individual razor file contained within the Components/Pages folder. These files are what you get straight out the box when creating a new project using the Blazor Web App template.
Counter Component
Lets take a look at Counter.razor. This is a component built within a single Razor file that contains a mix of HTML and C#. The HTML contains the layout of the page with the C# defining any logic required.
- Default increment
From the code below we can see that it binds the onclick event of the button to the IncrementCount method within the C# code block. So on each click of the button, the count will increment the currentCount variable which is automatically rendered by the component and displayed to the user.
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
- Configurable increment
What if we want to change the increment amount and re-use this counter component on another page. As can be seen in the following code block, I’ve added a new IncrementAccount variable with a default value of 1, along with updating the IncrementCount method to use this variable. The new variable also contains a [Parameter] attribute which will be discussed later. When this page is rendered, given the default value of IncrementAmount is set to 1, we will still see each click of the button incrementing the counter by 1 as in the previous example.
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}However, lets re-use the counter component on another page and make use of the IncrementAmount parameter. We can add the component to the home page, simply by adding the line of code below. Note that we have set the IncrementAmount to 10. By adding the [Parameter] attribute to the variable within the base component, this allows other pages to set the value of the variable when calling it. Given this, when the Home page is rendered, the Counter component is displayed and any click of the button will result in the counter being incremented by 10 and not the default value of 1.
<Counter IncrementAmount="10" />Here you can see an example of the component rendered in full on the Home page, you can see that it contains all elements within the component including the HTML headers, paragraph and button.
Conclusion
Even though I’ve only scratched the surface of my learning, I’m already impressed with what I’ve seen from Blazor. By offering developers a familiar and robust toolset in C#/.NET, it becomes an extremely attractive option for building web applications.
I’m definitely eager to explore more of what Microsoft offers with Blazor, as it has really caught my interest. Hopefully, I’ll get the opportunity to work on a real-life project with a more extensive, business-oriented structure.
